目录
一、echarts介绍
二、学习资源
三、应用实例
1、下载
2、引入echarts.js文件
3、制作第一个echarts图表
4、从后台获取数据
一、echarts介绍
在很多网站中都应用了echarts图表，最典型的就是疫情看板
通俗的理解：
-
是一个JS插件
-
性能好可流畅运行PC与移动设备
-
兼容主流浏览器
-
提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】
二、学习资源
echarts官网——Apache ECharts（图表比较基础）
组件社区——数据可视化技术分享-echarts热门组件 - Powered by Discuz! （图表更加丰富）
黑马pink老师数据可视化教程—— JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续哔哩哔哩bilibili （适合系统学习，从P443开始）
三、应用实例
1、下载
打开官网——》点击首页上的快速入门——》echarts CDN by jsDelivr - A CDN for npm and GitHub下载——》选择dist目录下echarts.js文件
2、引入echarts.js文件
先准备一个echarts02.html文件——》准备一个DOM容器——》引入上一步骤下载好的echarts.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>3、制作第一个echarts图表
打开官网——》点击所有事例——》根据需要选择饼图——》点击第一个第一个饼图——》选择完整代码——》复制到echarts代码到echarts01.html——》运行
4、从后台获取数据
jsp页面：
在登陆的servlet层LoginServlet里，把需要的数据存进session里，（注意：session里不能放太多数据，建议以后学习了其他方法之后使用其他方法），在Jsp页面中都可以使用session里的数据。
json：
echarts.init(document.getElementById('main')).setOption(option)
这里的option表示使用json数据格式的配置来绘制图表
详情见 ECharts 配置语法 | 菜鸟教程 (runoob.com)
