做数据可视化时，Echarts是很好用的。这里来一个学习笔记系列。
一、引用echarts
Echarts可以用npm进行安装，也可以直接导入到web项目进行引用，博主采用了引用方式直接分析它的使用。
下载Echarts：http://echarts.baidu.com/download.html
导入相关js：
body里的内容如下：
结果图：
二、echarts柱状图分析
1，init渲染
首先echarts通过js找到id为main的div，通过init(document.getElementById(‘main’))对该框进行渲染。到这一步是没有任何显示的。
真正起作用的事setOption方法。
让我们来看下init 的api：
(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
devicePixelRatio?: number
renderer?: string
width?: number|string
height? number|string
}) => ECharts
dom就是指一个dom对象，像document.getElementById(‘main’))；
theme的话可以设置主题，比如增加一个theme属性：echarts.init(document.getElementById(‘main’),’dark’)，界面变为：
对于theme而言，dark和light一般是有的，其他的主题就得找一找咯
opts和theme一样是可选的，用来显示指定实例相关属性。
2，setOption
setOption是这段代码的核心，设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成。ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
调用setOption方法：
chart.setOption(option, {
notMerge: ...,
lazyUpdate: ...,
silent: ...
});
option:图表的配置项和数据；notMerge：可选，是否不跟之前设置的option进行合并，默认为false，即合并。；lazyUpdate：可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。silent：可选，阻止调用 setOption 时抛出事件，默认为false，即抛出事件。
像代码中的xAxis: {type: ‘category’}, 这些部分，都属于opts的部分，还有dataset也属于option的内容。
配置项API：http://echarts.baidu.com/option.html#xAxis
（1）title
以title为例，如果在option选项中加入 ：
title:{text:[
‘bars1′,’bars2′,’bars3’
]},
则会在页面上显示标题：
（2）xAxis
这个属性是用来设置x轴的
重点看一下type这个属性：
-
'value'数值轴，适用于连续数据。 -
'category'类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。正常显示： -
'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 -
'log'对数轴。适用于对数数据。
默认是value
在选择展示数据的方式时，需要选择一下。
（3）series
系列列表。每个系列通过 type 决定自己的图表类型
type: ‘bar’ 决定了展示方式未bar
serial有三个type为bar的图形，表示dataset中的3列数据；xAxis: {type: ‘category’}表示有x轴为一个类别，因此类别是需要赋值的，因此拿走了dateset中的第一列数据。所有dataset的展示方式为第一列表示类别，2-4列分别表示每一个类别的条形图高度。