Echarts官方网站

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

04-Echarts-体验

官方教程：五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

自己步骤：

初始化echarts实例对象

var myChart = echarts.init(document.getElementById(‘main’));

  • 指定配置项和数据(option)

var option = { xAxis: { type: ‘category’, data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’] }, yAxis: { type: ‘value’ }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: ‘line’ }] };

  • 将配置项设置给echarts实例对象

myChart.setOption(option);

05-Echarts-基础配置

需要了解的主要配置：seriesxAxisyAxisgridtooltiptitlelegendcolor

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