1.echarts-介绍

• 是一个js插件
• 性能好可流畅远行PC和移动设备
• 兼容主流浏览器
• 提供很多图标，用户且可自行修改。

2. echarts 操作的步骤

步骤1：

• 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
• 引入echars <script src="js/echarts.min.js"></script>

步骤2：

• 创建一个盒子用来装生成的图标：这个盒子必须设置宽高

步骤3：

• 初始化echarts实例对象var myChart = echarts.init(document.querySelector('.box'));

步骤4：

• 指定配置项和数据(option)；把示例编辑里面的内容全部给复制粘贴下来，放到步骤3和步骤5中间

  
  示例编辑.png

步骤5：

• 将配置项设置给echarts实例对象myChart.setOption(option);

3.echarts-基础配置

• series
  -- 系列列表。每个系列通过 type 决定自己的图表类型
  -- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
• xAxis：直角坐标系 grid 中的 x 轴
  -- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
• yAxis：直角坐标系 grid 中的 y 轴
• grid：直角坐标系内绘图网格。
  -- 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
  -- 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• color：调色盘颜色列表
• 数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。