Echarts的基本使用

1、基本使用

1. 先引入echarts
2. 然后创建一个元素用来装载echarts图表
3. echarts.init() 方法初始化 echarts 实例
4. 最后设置配置项和数据 option，使用 setOption() 方法根据数据和配置项来显示图表即可 

1.  
2.  

4.  
5.  
6.  
7.  
8.  
9.  

11.  
12.  
13.  


15.  
42.  

44.  

2、常用配置项说明

配置项说明文档可参考：https://echarts.apache.org/zh/option.html

配置项指的是 option 对象中的一系列属性，比如：title、tooltip、series 等等。

2.1、决定图表的类型和数据（series）

2.1.1、type属性（决定图表类型）

series 属性中的 type 属性值决定这的图表是什么类型的

比如：series：{type: 'line'} 就是折线图： 

type: pie，饼图：

         type: map，地图：

2.1.2、name属性（名称，提示框tooltip会显示）

系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

2.1.3、label属性（在图表上显示的文本标签）

2.2、标题（title）

1.  var option = {
2.  title:  {
3.  text: '这里是标题',  //主标题文本，支持使用 \n 换行
4.  subtext:  ''  //副标题文本，支持使用 \n 换行
5.  }
6.  ...
7.  };

9.  myChart.setOption(option);

2.3、提示框（tooltip）

提示框也就是当你鼠标悬浮在图表上时，会出现一些提示信息。

比如：下图中红色部分圈起来的就是提示框

1.  var option = {
2.  tooltip:  {
3.  trigger: 'item'  //触发类型。'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'：怎么样都不触发。
4.  },
5.  ...
6.  };

8.  myChart.setOption(option);