最近在弄商城的图表数据，要用到了echart.js，echart是支持多种图表的，有折线图，饼图，柱形图等等，我们项目中主要用到的是饼图与折线图，这里就简单介绍下饼图与折线图。
和大多数的插件一样，必须要引用他的js，我们可以从echart官网，或者用npm 获取 echarts，npm install echarts --save 下载所需的js，这个就不多做介绍，官网上都有，
<script src="echarts.min.js"></script>
html中要准备一个具有宽和高额容器，
<div id='content'></div>
在js中写入绘图步骤，首先找到这个容器
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},//鼠标提示
legend: {
data:['销量']
},
xAxis: {//x轴数据 data数据可为空，可以在请求完接口时，填入数据
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},//y轴数据
series: [{
name: '销量',
type: 'category',// 不同的图表对应不同的type
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
里面一些特定的字段，具有特定的意义，如果想展示不同的效果还要去翻阅echart的官方api http://echarts.baidu.com/api.html#echarts
如果是折线图，需要展示两条x轴数据，y轴不展示，对应写法
xAxis: [{
type:'category',
boundaryGap:false,
data: [],
axisLine:{
show:false
},
axisTick:{
show:false
}
},//第一条数据
{//第二条数据
type:'category',
boundaryGap:false,
data: [],
axisLine:{
show:false
},
axisTick:{
show:false
}
}],
yAxis: {
type:'value',
axisLabel: {
formatter:'{value}'
},
splitNumber:0, //y轴数据间隔，这个默认好像是5 ，所以可以根据调这个大小，来调y轴数据
show:true,//控制y轴是否显示
min:0,//y轴最小数据
max:80,//y轴最大数据
splitLine:{
show:false
}
},
echart非常强大，里面的功能也需要时间去研究，我这一两句也说不明白，大家如果用到 就去官网读代码吧
