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