Echarts基本概念整理

参考 5 分钟上手 ECharts

1、echarts 实例

一个网页中可以创建多个 echarts 实例。 每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）

2、系列（series）

一组数值以及他们映射成的图

（1）图表类型 series.type line（折线图） bar（柱状图） pie（饼图） scatter（散点图） graph（关系图） tree（树图）

（2）数据series.data

（3）通用的样式series.itemStyle 阴影、透明度、颜色、边框颜色、边框宽度

3、组件（component）

xAxis（直角坐标系 X 轴） yAxis（直角坐标系 Y 轴） grid（直角坐标系底板） angleAxis（极坐标系角度轴） radiusAxis（极坐标系半径轴） polar（极坐标系底板） geo（地理坐标系） dataZoom（数据区缩放组件） visualMap（视觉映射组件） tooltip（提示框组件） toolbox（工具栏组件） series（系列）

4、option 描述图表

option 表述了：数据、数据如何映射成图形、交互行为

背景色 option.backgroundColor: ‘#2c343c’

文本的样式 textStyle.color: ‘rgba(255, 255, 255, 0.3)’

颜色主题（Theme） ‘light’ 和 ‘dark’ var chart = echarts.init(dom, ‘light’);

5、loading 动画

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

6、交互组件

图例组件 legend 标题组件 title 视觉映射组件 visualMap 数据区域缩放组件 dataZoom 时间线组件 timeline