Echarts

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

ECharts的功能

ECharts 提供了常规的折现图、柱状图、散点图、饼图、K线图，用于统计的盒形图；

用于地理数据可视化的地图，热力图，线图；

用户关系数据可视化的关系图，treemap，旭日图，

多维数据可视化的平行坐标

还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭

ECharts的使用步骤

1. 下载并引入echarts.js这个文件

所有图表都依赖于这个js库

2. 准备一个具备大小的DOM容器

3. 初始化echarts实例对象

var myecharts=echarts.init(document.querySelector('.box'))

4. 指定配置项和数据

//指定配置项与容器
var option = { 
    title: { text: 'ECharts 入门示例' }, 
    tooltip: {},        
    legend: { data:['销量'] }, 
    xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
    yAxis: {},
    series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
};

5. 将配置项设置给echarts实例对象

// 使用刚指定的配置项和数据显示图表。    
mycharts.setOption(option)

相关配置讲解

title:标题组件

tooltip:提示框组件

legend:图例组件

toolbox:工具栏

grid:直角坐标系内绘图网格

xAxis:直角坐标系grid中的x轴

yAxis:直角坐标系grid中的y轴

series:系列列表。每个系列通过type决定自己的图表类型（什么类型的图标）

color:调色盘颜色列表

先了解以上九个配置的作用，其余配置还有具体细节我们查阅文档。

series:系列列表

type: 类型（什么类型的图表）比如line是折线，bar柱形等

name: 系列名称，用于tooltip的显示，legend的图例筛选，变化

stack: 数据堆叠，如果设置相同值，则会数据堆叠

数据堆叠： 第二个数据值=第一个数据值+第二个数据值

第三个数据值=第二个数据值+第三个数据值

如果stack指定不同值或者去掉这个属性，则不会发生数据堆叠