Echarts 的简单使用

http://echarts.baidu.com/index.html

直接用script引入从官网下载的echarts.js文件

官网的文件有几种版本的，按需下载即可，注意精简版的只显示折线、圆柱等几个图表，而且只显示图，连标题都是不显示的，一般使用的话下载普通就行。

基本使用：

在HTML里必须有一个固定宽高的容器，这样才能显示出来

//指定图标的配置和数据
        var option = {
            title:{           //标题
                text:'2017年 下半年'
            },
            tooltip:{        //提示框 
               
                formatter: '{b}{a}: {c}万'  //内容： {a}:为图表的名字 {b}:为x轴的项  {c}为Y轴的值，单纯的数值，需要单位的话要在后面自己添加

 }, legend:{ data:['账单'] }, 
grid: {//图表间距 
left: '2%', 
right: '10%', 
bottom: '2%', 
containLabel: true
 }, 
xAxis:{ 
axisTick: {//去掉刻度 show: false }, 
data:["7月","8月","9月","10月","11月","12月"] 
}, 
yAxis:{ 
axisLabel:{ formatter: '{value} 万' },
 splitLine:{//去掉网格线 show:false }, 
axisTick: {//去掉刻度 show: false } 
}, 
series:[
{ name:'账单',
 type:'line', 
symbol:'circle',//拐点样式 
symbolSize: 12,//拐点大小  i
temStyle:{ color:"#cc9966" }, 
data: [22,25,20,18,29,25] }]
 }; 

//初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); 

//使用制定的配置项和数据显示图表 myChart.setOption(option);

折线图参考链接:https://www.jianshu.com/p/8cac22daca98