Echart的基本使用 - 《ECharts数据可视化》

Echarts 使用五部曲：
ECharts的相关配置

Echarts 使用五部曲：

步骤一：下载并引入echarts.js文件 → 图表依赖这个js库

步骤二：准备一个具备大小的DOM容器 → 生成的图表会放入这个容器内
.box {
width: 450px;
height: 450px;
background-color: pink;
}

步骤三：初始化echarts实例对象 → 实例化echarts对象
let myChart = echarts.init(document.querySelector(‘.box’));
步骤四：指定配置像和数据（option） → 根据具体需求修改配置选项
这个可以上eCharst官网-实例，找到自己想要的效果，然后复制。
步骤五：将配置项设置给echarts实例对象 → 让echarts对象根据修改好的配置生效
myChart.setOption(option);

ECharts的相关配置

title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox：工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系 grid 中的x轴
yAxis：直角坐标系 grid 中的y轴
series：系列列表。每个系列通过type决定自己的图表类型（什么类型的图标）
color：调色盘颜色列表

series:系列列表
type：类型（什么类型的图表），比如line是折线，bar是圆柱形等
name：系列名字，用于tool’tip的显示，legend的图例筛选变化
stack：数据堆叠。如果设置相同值，则会数据堆叠。如果给stack指定不同的值或者去掉这个数据，就不会发生数据堆叠。