Echarts是现在比较火的js图表库，官网有丰富的实例和友好的入门教程。但是图表的种类很多，配置项的参数也很多，一开始我根据图表类型翻看配置项，发现这样学效率太低了，决定先制定一个简单的学习步骤，按官方教程的顺序：
1.会构建简单的静态图表，主要是最常见的饼图、折线图、柱形图等。
2.实现异步加载数据并更新图表（其实就ajax而已）
3.学会图表的交互
4.解决自适应问题
-------------------------------------
第一步，引入echarts。引入echarts的方式很多，最简单的是直接引入cdn。本地练习的首选，嘿嘿。
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.4/echarts-en.common.min.js"></script>
第二部，初始化图表实例。
在页面中创建实例，其实就是将页面上的一个dom节点作为容器，先设定其高宽，然后在js中初始化一个echarts实例，将它挂载到容器节点上。就是这么简单。
<div ></div>
<script>
var mychart = echarts.init(document.getElementById('main'));
var option={
//...
};
mychart.setOption(option);
</script>
我们注意到，这种方式和Vue、React的做法一样。在Vue中我们也是用js创建根实例，并挂载到某个DOM节点上。视图的渲染和更新依赖实例的配置参数。本质上，就是一种数据驱动视图的思想。
第三步，配置项
这是我们创建图表的关键。我们要创建什么类型的图表，图标的数据怎么展示、动画等都依赖这个配置项的设置。传给setOption()的配置项是一个对象形式，其各属性对应图表实例的某个组件或动态效果，值一般为数组或对象。一个类型的具体图表不会用到全部配置项字段。但有些配置项字段是各个图表都会用到的。
* title 字段：它的text属性表示图表的标题。
*xAxis字段：
其内常用的子字段有type[可选'value','category','time','log'之一]，xAxis设置为category时，可在xAxis下配置data字段存放类目数据。也可以直接配置data字段，那就默认xAxis为'category'。
* series字段：
它的type属性决定了我们要展示的图是什么类型：bar是柱状、pie是饼图，目前官方可选的type多达21种。
它的name属性表示系列名称，“用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列”。
它的data属性表示系列中的内容数组，数组项为一个数据项，依据图表类型含义有所不同。
现在我们的目标是创建最简单的静态的图表，可以参考官网的示例。
首先是柱状图：
var option={ title:{ text:'销量' }, legend:{ data:['A品','B品'], left:'center' }, xAxis:{ data:['一月','二月','三月','四月'] }, yAxis:{}, series:[{ name: 'A品', type: 'bar', data: [15,25,35,45], label:{ normal:{show:true} } },{ name: 'B品', type: 'bar', data: [22, 24, 30, 35], label:{ normal:{show:true} } }] };