最近有个项目是做图标展示的，现在流行的插件一般有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.οnresize=chart1.resize;
数据都是从后台读取出来的，大家可以使用ajax的方式来实现。
网上还有很多其他案例，大家可以参照着学习。
官方的开发文档：http://echarts.baidu.com/echarts2/doc/doc.html
样例展示：http://echarts.baidu.com/echarts2/doc/example.html
