学习 ECharts,首先要先知道它是什么。
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
简单来说:
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表,且可定制。
🚩五个步骤教你上手ECharts
✔第一步
下载 ECharts
引入echartsdist/echarts.min.js
✔第二步
⭐准备一个具备大小的DOM容器(生成的图表会放在这个容器里面)
✔第三步
⭐初始化echarts实例对象
<div id="main" style="width: 600px;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
✔第四步
⭐指定配置项和数据(option)(根据需求修改配置选项)
例:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'</