官网：
注意：图表的请求必须先请求后台，得到数据，再去渲染图表。所以需要使用同步请求。
1、引入js
<script type="text/javascript" src="${ctx}/shop/resources/plugins/echarts-2.2.1/build/dist/echarts.js"></script>
2、html
<!-- 图表 -->
<div id="chartDiv" class="easyui-panel" title="图表" data-options="closed:true"> <div id="echarts-line" style="height:280px;"> </div> </div> <div id="chartDialog" class="easyui-dialog" title="工单处理量" data-options="iconCls:'icon-save',closed:true" style="width:50%;height:85%"> <div class="easyui-panel" data-options="fit:true" style="padding:25px 20px;background-color:#F7F7F7"> <div id="echarts-pie" style="height:100%;"></div> </div> </div>3、画折线图
function(yAxisData1,yAxisData2){//y轴的值。数组形式 //在主文件引入后你将获得一个AMD环境，配置require.conifg如下： require.config({paths: {echarts:'/shop/resources/plugins/echarts-2.2.1/build/dist'}}); require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 ], function (ec) { //回调函数 var myChart = ec.init(document.getElementById('main')); var option = { //这里自己设置 legend: {data:['投诉工单','问题工单'],x:'right',y:25}, title:{show:true,text:'工单处理量统计',x:'center',y:20}, grid:{y:60,x:60,y2:40,x2:40,borderWidth:0,backgroundColor:'#fff'}, tooltip:{trigger:'axis',backgroundColor:'rgba(0,0,0,0.5)',axisPointer: {type: 'line'}}, xAxis : [{data:customOption.xAxisData,boundaryGap:false,axisLabel:{show:true},splitLine:{show:false}}], series : [{"type":"line","name":'投诉工单',"data":yAxisData1},{"type":"line","name":'问题工单',"data":yAxisData1}]//数据 yAxis : [{splitLine:{show:false},splitArea:{show:false}}], } var myChart = ec.init(document.getElementById('main'),'macarons');//初始化图表 window.onresize = myChart.resize;//动调用resize达到自适应的效果 myChart.on(ecConfig.EVENT.CLICK, paintPieDynamic);//点击折现图表事件的回调函数 myChart.setOption(option);//配置图表 } );} 显示效果：
4、数据传递
//param,获取折线图的数据 function paintPieDynamic(param){ //这里应该通过传递过来的折线图的参数，去请求浒苔，得到饼图数据 var month = param.name; var name = param.seriesName; var arr = new Array(); /*for(prop in codeMap){ arr.push({value:prop,name:codeMap[prop],code:prop,month:month,type:name}); }*/ if(name == "问题工单"){ var param = {flag:'year',month:month.substring(0,month.length-1),type:3}; //Ajax请求 holly.get(holly.getPath()+"/rest/complainSheet/complainListCount",param,function(e){ if(e.success && e.content != null){ for(var i = 0 ; i 5、画饼图
function paintPie(customOption){ require.config({paths: {echarts:holly.getPath()+'/hollybeacon/resources/plugins/echarts-2.2.1/build/dist'}}); require(['echarts','echarts/chart/pie'],function(ec){ var ecConfig = require('echarts/config'); var legendData = []; for(var i=0;i {b} : {c} ({d}%)"}, calculable : false, toolbox: {show : true,feature : {mark : {show: false},saveAsImage : {show: true}}}, series : [{ center:['50%','50%'], name:'工单处理量', type:'pie', radius : '80%', data:customOption.data, itemStyle : { normal : { label : { show : true }, labelLine : { show : true } }, }, }] } var myChart = ec.init(document.getElementById(customOption.dom),'macarons'); myChart.on(ecConfig.EVENT.CLICK, tiaozhuan);//点击回调事件，跳转到对应页面 myChart.setOption(option,true); }); } 显示效果：
6、跳转到对应的页面
//跳转到对应已处理页面 function tiaozhuan(param){ //遍历传递过来的属性值 //其实这里应该跳转 for(prop in param.data){ console.log(prop+": "+param.data[prop]); } } 6、图表上的事件
myChart.on(ecConfig.EVENT.CLICK, tiaozhuan);//都是ecConfig.EVENT.事件
如下事件：
