ECharts学习笔记

最近有个项目是做图标展示的，现在流行的插件一般有Highcharts,ECharts。考虑到ECharts是开源的，又是百度的产品，就选择了它。

首先下载echarts的包，地址http://echarts.baidu.com/index.html。然后把echarts.min.js加到项目中。

页面上建一个div，如：

<div id="chart1"></div>

设置它的样式：

height: 340px;

然后编写js：

//第一个图表var container = document.getElementById('chart1');// 基于准备好的dom，初始化echarts实例chart1 = echarts.init(container);var incount = data.series.incount;var outcount = data.series.outcount;var date = data.date;option = {title : {text : '各时段进出人次',x : 'center',textStyle : {fontSize : 24,fontWeight : 'normal',color : '#23FFBB'}},tooltip : {showDelay: 0,hideDelay: 0,transitionDuration:0,padding: 15,position : function(p) {return [p[0] + 10, p[1] - 10];},formatter:'{b} 点<br/>{a}：{c0}'//<br/>{a1}：{c1}<br/>{a2}：{c2}},toolbox: {  show: true,x: 'left',feature: {  magicType: {show: true, type: ['line', 'bar']},  restore: {show: true},  saveAsImage: {show: true}  }  },legend: {show: true,x : 'center',y : 'bottom',itemGap : 20,data : [{name : '进',textStyle : {fontSize : 14,color : '#99CCCC'}},{name : '出',textStyle : {fontSize : 14,color : '#99CCCC'}}],selected: {  '进': true,  '出': true},itemWidth: 20,             // 图例图形宽度itemHeight: 20            // 图例图形高度},xAxis : {type : 'category',axisLine : {lineStyle : {width: 2,color : '#99CCCC'}},axisLabel : {formatter : '{value} 点'},boundaryGap : false,data : date},yAxis : [ {show : true,type : 'value',axisLine : {lineStyle : {width: 2,color : '#99CCCC'}},splitLine : {show : false},axisLabel : {formatter : '{value} 人'}} ],series : [{name : '进',type : 'line',barWidth : 25,//固定柱子宽度symbol : 'none',data : incount,itemStyle : {normal : {color : '#23FFBB',lineStyle: {        // 系列级个性化折线样式width: 2},label : {show : true,position : 'top',textStyle : {fontSize : '15'}}}}},{name : '出',type : 'line',barWidth : 25,//固定柱子宽度symbol : 'none',data : outcount,itemStyle : {normal : {color : '#FFD54E',lineStyle: {        // 系列级个性化折线样式width: 2},label : {show : true,position : 'top',textStyle : {fontSize : '15'}}}}}]};chart1.setOption(option);

得到如下图

上面是一个线形图，我们再编写一个柱状图：

//第二个图表var container = document.getElementById('chart1');// 基于准备好的dom，初始化echarts实例chart1 = echarts.init(container);option = {title : {text : '当天借还量',x : 'center',textStyle : {fontSize : 24,fontWeight : 'normal',color : '#23FFBB'}},tooltip : {//trigger: 'axis',showDelay: 0,hideDelay: 0,transitionDuration:0,padding: 15,position : function(p) {return [p[0] + 10, p[1] - 10];},formatter:'{b} 点<br/>{a}：{c0}'//<br/>{a1}：{c1}<br/>{a2}：{c2}},toolbox: {show : true,x: 'left',                // 水平安放位置，默认为全图右对齐，可选为：feature : {magicType : {show: true, type: ['line', 'bar']},//, 'stack', 'tiled'restore : {show: true},saveAsImage : {show: true}}},legend: {show: true,x : 'center',y : 'bottom',itemGap : 20,data : [{name : '借',textStyle : {fontSize : 14,color : '#99CCCC'}},{name : '还',textStyle : {fontSize : 14,color : '#99CCCC'}},{name : '续借',textStyle : {fontSize : 14,color : '#99CCCC'}}],selected: {  '借': true,  '还': true,'续借': true},backgroundColor: 'rgba(0,0,0,0)',//背景透明borderWidth: 0,padding: 2,                // 图例内边距，单位px，默认各方向内边距为5，itemWidth: 20,             // 图例图形宽度itemHeight: 20            // 图例图形高度},xAxis : {                //x轴axisLine : {lineStyle : {width: 2,color : '#99CCCC'}},axisLabel : {formatter : '{value} 点'},data : data.date},yAxis : [{             //y轴type : 'value',axisLine : {lineStyle : {width: 2,color : '#99CCCC'}},splitLine : {show : false},axisLabel : {formatter : '{value} 本'}}],series : [{name: '借',type : 'bar',barWidth : 20,//固定柱子宽度data : data.type1_total,itemStyle : {normal : {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#37CFFC'},{offset: 1, color: '#3784D9'}]),label : {show : true,position : 'top',textStyle : {fontSize : '15'}}}}},{name: '还',type : 'bar',barWidth : 20,//固定柱子宽度data : data.type2_total,itemStyle : {normal : {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#9DFFAA'},{offset: 1, color: '#19FFBD'}]),label : {show : true,position : 'top',textStyle : {fontSize : '15'}}}}},{name: '续借',type : 'bar',barWidth : 20,//固定柱子宽度data : data.type3_total,itemStyle : {normal : {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#FFEDB3'},{offset: 1, color: '#FFD54E'}]),label : {show : true,position : 'top',textStyle : {fontSize : '15'}}}}}]};// 使用刚指定的配置项和数据显示图表。chart1.setOption(option);

上面的series中的itemStyle的color采用的是渐变色。

得到下图：

随浏览器大小变化，加上下面代码即可：

$(window).resize(function() {if(chart1)setTimeout(chart1.resize, 1);});

也可以写成：

windows.onresize=chart1.resize;

数据都是从后台读取出来的，大家可以使用ajax的方式来实现。

网上还有很多其他案例，大家可以参照着学习。
官方的开发文档：http://echarts.baidu.com/echarts2/doc/doc.html

样例展示：http://echarts.baidu.com/echarts2/doc/example.html