echarts使用
本来想把echarts和chart.js放一起的，不过用了echarts后发现功能比chart.js强大的多，问题也多。
我这里下的是2.2.0版本解压后将echarts目录放到工程里就行了，如图
其实还可以精简文件，我这里是按官方推荐的模块化单文件引入方式，所以只需要echarts目录下的echarts.js（注意是echarts目录下的echarts.js，不是echarts/dist下的echarts.js，官方文档里说的是echarts/dist下的echarts.js，不过我这里用起来报错，应该是少了模块化的依赖了。echarts/dist下echars-all.js是可以单独用script标签引入使用的）和echarts/dist/chart下的单文件图表js文件，如图
然后开始单文件引入js文件（模块化引入方式还是有些麻烦的 ^_^ ，我看官方文档说ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入）
首先加载requireJS和echarts主文件
<script src="require.js"></script>
<script src="echarts.js"></script>
然后配置echarts的require路径，这个可以加在requireJS的config配置文件里
require.config({
paths:{
echarts:'./' //我这里html和echart.js在相同目录
}
});
然后就可以写图表相关的js了
先模拟一个数据，这个数据可以用异步请求也可以直接用后台代码生成到页面变量
var jsonLine = {};
图表代码，首先需要引入echarts模块然后按需加载线图，饼图，柱形图，这里把图表生成的js也用amd规范封装了，这样看起来更简洁，draw函数传入的参数是dom，title，jsonData。同时还对x轴数值、y轴刻度做了格式化，使数据显示看起来更清晰，echarts的配置项很多很多，可以根据实际需要写不同的配置，详情见官方文档http://echarts.baidu.com/echarts2/doc/doc.html这个是echarts2的
require(['echarts','echarts/charts','echarts/chart/line','echarts/chart/pie','echarts/chart/bar'],function (ec,ch) {
ch.drawLine("lineChart","降雨量",jsonLine);
})
代码结构如下（只是测试用，实际需要放到对应项目js目录下，并且html和js是分开的）
grid是图表位置属性，formatter是数据格式化属性，都比较重要，具体看官方文档
代码如下
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <script src="require.js"></script> 7 <script src="echarts.js"></script> 8 </head> 9 <body> 10 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 11 <div id="pieChart" style="width: 700px;height: 500px;"></div> 12 <div id="barChart" style="width: 1000px;height: 500px;"></div> 13 <div id="lineChart" style="width: 1000px;height: 500px;"></div> 14 </body> 15 <script> 16 require.config({ 17 paths:{ 18 echarts:'./' 19 } 20 }); 21 var jsonLine = { "legend":['蒸发量','降水量'],"xData":['2017-03-01','2017-03-02','2017-03-03','2017-03-04','2017-03-05','2017-03-06','2017-03-07','2017-03-08'],"seriesData":[{name:'蒸发量',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 13500.6, 16200.2]},{name:'降水量', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 17005.6, 18200.2]}]}; 22 23 var jsonBar = { "legend":['蒸发量','降水量'],"xData":['2017-03-01','2017-03-02','2017-03-03','2017-03-04','2017-03-05','2017-03-06','2017-03-07','2017-03-08'],"seriesData":[{name:'蒸发量',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 13500.6, 16200.2]},{name:'降水量', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 17500.6, 18200.2]}]}; 24 25 var jsonPie = { "legend":['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],"xData":['2017-03-01','2017-03-02','2017-03-03','2017-03-04','2017-03-05','2017-03-06','2017-03-07','2017-03-08'],"seriesData":[{value:30035, name:'直接访问'},{value:31000, name:'邮件营销'},{value:23004, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}; 26 27 require(['echarts','echarts/charts','echarts/chart/line','echarts/chart/pie','echarts/chart/bar'],function (ec,ch) { 28 ch.drawPie("pieChart","营销数据",jsonPie); 29 ch.drawLine("lineChart","降雨量",jsonLine); 30 ch.drawBar("barChart","降雨量",jsonBar); 31 }) 32 </script> 33 </html>
图表生成相关的charts.js
1 define(['echarts'], 2 function (ec) { 3 var draw = {}; 4 draw.drawLine = function (dom,title,data){ 5 //获取最大数值 6 // var valueList = []; 7 // data.seriesData.forEach(function (elem) { 8 // valueList.push.apply(valueList,elem.data); 9 // }) 10 var max = Math.max.apply({},data.seriesData[0].data); 11 //将数值信息压入series 12 var series=[]; 13 var selectedList = {}; 14 data.seriesData.forEach(function (elem,i) { 15 series.push({ 16 name: elem.name, 17 type: 'line', 18 itemStyle : { 19 normal: { 20 label : { 21 show: true, 22 formatter:function(a,b,c){ 23 if( c >= 10000 ){ 24 return (c/10000).toFixed(2) + "万" 25 } 26 return c; 27 } 28 } 29 } 30 }, 31 data: elem.data 32 }); 33 // if( i > 0 ){ 34 // selectedList[elem.name] = false; 35 // }else { 36 // selectedList[elem.name] = true; 37 // } 38 selectedList[elem.name] = true; 39 }) 40 var myChart = ec.init(document.getElementById(dom)); 41 option = { 42 title:{ 43 text:title, 44 x: 'center', 45 }, 46 tooltip : { 47 trigger: 'items' 48 }, 49 legend: { 50 data: data.legend, 51 padding:35, 52 selectedMode : 'single', 53 selected: selectedList 54 }, 55 toolbox: { 56 show : true, 57 feature : { 58 saveAsImage : {show: true} 59 } 60 }, 61 calculable : false, 62 xAxis : [ 63 { 64 type : 'category', 65 data : data.xData 66 } 67 ], 68 yAxis : [ 69 { 70 type : 'value', 71 splitArea : {show : true}, 72 name : '成交量', 73 nameTextStyle : { 74 color : '#333' 75 }, 76 max : max * 1.2, 77 minInterval : 1, 78 axisLabel : { 79 formatter: function(value) { 80 if( value >= 10000 ){ 81 return (value/10000).toFixed(2) + "万" 82 } 83 return value; 84 } 85 } 86 } 87 ], 88 series : series 89 }; 90 myChart.setOption(option); 91 }; 92 draw.drawBar = function (dom,title,data){ 93 //获取最大数值 94 // var valueList = []; 95 // data.seriesData.forEach(function (elem) { 96 // valueList.push.apply(valueList,elem.data); 97 // }) 98 var max = Math.max.apply({},data.seriesData[0].data); 99 var zoomBarEnd = data.xData.length >= 10 ? 100/data.xData.length*10 : 100; 100 //将数值信息压入series 101 var series=[]; 102 var selectedList = {}; 103 data.seriesData.forEach(function (elem,i) { 104 series.push({ 105 name: elem.name, 106 type: 'bar', 107 itemStyle : { 108 normal: { 109 label : { 110 show: true, 111 formatter:function(a,b,c){ 112 if( c >= 10000 ){ 113 return (c/10000).toFixed(2) + "万" 114 } 115 return c; 116 } 117 } 118 } 119 }, 120 barGap:'5%', 121 barCategoryGap:'40%', 122 data: elem.data 123 }); 124 if( i > 0 ){ 125 selectedList[elem.name] = false; 126 }else { 127 selectedList[elem.name] = true; 128 } 129 }) 130 131 var myChart = ec.init(document.getElementById(dom)); 132 option = { 133 title:{ 134 text:title, 135 x: 'center', 136 }, 137 tooltip : { 138 trigger: 'items', 139 formatter: function(value) { 140 if( value >= 10000 ){ 141 return (value/10000).toFixed(2) + "万" 142 } 143 return value; 144 } 145 }, 146 legend: { 147 data: data.legend, 148 padding:35, 149 selectedMode : 'single', 150 selected: selectedList 151 }, 152 toolbox: { 153 show : true, 154 feature : { 155 saveAsImage : {show: true} 156 } 157 }, 158 calculable : false, 159 grid : { 160 y : 100, 161 y2 : 100 162 }, 163 xAxis : [ 164 { 165 type : 'category', 166 data : data.xData, 167 axisLabel: { 168 interval: 0, 169 // rotate : 50,//x轴文字旋转 170 formatter:function(value,index) 171 { 172 if (index % 2 != 0) { 173 return '\n\n' + value; 174 } 175 else { 176 return value; 177 } 178 } 179 } 180 } 181 ], 182 dataZoom : { 183 show : true, 184 realtime : true, 185 start : 0, 186 end : zoomBarEnd,//根据x轴粒度动态设置滚动条默认显示占比，默认显示10个左右，这样就不会出现x轴拥挤的情况 187 showDetail : false, 188 // backgroundColor : '#ccc', 189 // dataBackgroundColor : 'red', 190 // fillerColor : 'blue', 191 // handleColor : 'green' 192 }, 193 yAxis : [ 194 { 195 type : 'value', 196 // name : '成交量', 197 // nameLocation : 'left', 198 nameTextStyle : { 199 color : '#333' 200 }, 201 max : max * 1.2, 202 splitArea : {show : true}, 203 minInterval : 1, 204 axisLabel : { 205 formatter: function(value) { 206 if( value >= 10000 ){ 207 return (value/10000).toFixed(2) + "万" 208 } 209 return value; 210 } 211 } 212 } 213 ], 214 series : series 215 }; 216 myChart.setOption(option); 217 var ecConfig = require('echarts/config'); 218 myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole); 219 function eConsole(param) { 220 var valueList = []; 221 data.seriesData.forEach(function (elem) { 222 if( elem.name == param.target ){ 223 valueList = elem.data; 224 } 225 }) 226 var max = Math.max.apply({},valueList); 227 option.yAxis[0].max = max * 1.2; 228 myChart.setOption(option); 229 } 230 }; 231 draw.drawPie = function (dom,title,data) { 232 var legendData = []; 233 data.legend.forEach(function (elem) { 234 legendData.push( 235 { 236 name : elem, 237 icon : 'stack' 238 } 239 ) 240 }) 241 var myChart = ec.init(document.getElementById(dom)); 242 option = { 243 title : { 244 text: title, 245 x:'center' 246 }, 247 tooltip : { 248 trigger: 'item', 249 formatter: "{a} <br/>{b} : {c} ({d}%)" 250 }, 251 legend: { 252 orient : 'horizontal', 253 x : 'center', 254 data: legendData, 255 padding : 15 256 }, 257 toolbox: { 258 show : true, 259 feature : { 260 saveAsImage : {show: true} 261 } 262 }, 263 calculable : false, 264 series : [ 265 { 266 type:'pie', 267 radius : '55%', 268 center: ['50%', '60%'], 269 data: data.seriesData, 270 itemStyle:{ 271 normal:{ 272 label:{ 273 show: true, 274 // formatter: '{b} : {c} ({d}%)' 275 formatter:function(a,b,c,d){ 276 if( c >= 10000 ){ 277 return b + "：" + (c/10000).toFixed(2) + "万" + " (" + d + "%)"; 278 } 279 return b + "：" + c + " (" + d + "%)"; 280 } 281 }, 282 labelLine :{show:true} 283 } 284 } 285 } 286 ] 287 }; 288 myChart.setOption(option); 289 }; 290 return draw; 291 } 292 );
