Echars统计图的使用
第一步去官网挑选自己需要的图形了。 官网地址：https://echarts.baidu.com/
第二步按照官网的demo，下载需要的js组件并放到自己的项目中。
第三步仿照demo创建需要的div，并在js中将方法原模原样的复制过去，运行测试是否能够在页面显示出来，以此来检查最基本的js组件有木有引对等最不应该犯得小错误。
第四步确定demo在自己的项目中可以正常显示之后，就可以对自己的数据进行处理了。按照demo的数据格式进行拼接，可以通过后台进行拼接，也可以在js中进行拼接。
以下是我个人对于基本的柱形图、饼状图、折线图的使用代码。
因为这是在原来项目上进行修改，而且项目比较老了，不想动后台，直接将后台传输到前台的页面在js中进行处理了。
柱形图：
后台返回到页面的信息如下
<categories><category label='网络剧(部)' /><category label='网络剧(集)' /><category label='微电影(部)' /><category label='网络电影(部)' /><category label='影视类动画片(部)' /><category label='影视类动画片(集)' /><category label='纪录片(部)' /><category label='纪录片(集)' /><category label='文艺(部)' /><category label='文艺(集)' /><category label='娱乐(部)' /><category label='娱乐(集)' /><category label='科技(部)' /><category label='科技(集)' /><category label='财经(部)' /><category label='财经(集)' /><category label='体育(部)' /><category label='体育(集)' /><category label='教育(部)' /><category label='教育(集)' /><category label='其他(部)' /><category label='其他(集)' /></categories><dataset seriesname='节目/栏目统计' color='56B9F9' showValue='1'><set value='1180' /><set value='2236900' /><set value='14317' /><set value='1167' /><set value='779' /><set value='21434' /><set value='1295' /><set value='7772' /><set value='722' /><set value='7072' /><set value='3135' /><set value='24983' /><set value='37' /><set value='109' /><set value='242' /><set value='5218' /><set value='105' /><set value='1274' /><set value='161' /><set value='5849' /><set value='3554' /><set value='15212' /></dataset>
jsp代码（片段）
<head>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/lib/echarts/echarts.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/lib/jquery/jquery.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/programCount/echarsProgrammeCount.js"></script> </head>
<div id="my-tabs-qcq" align="center" style="width: 1000px;height:400px"></div>
js代码（片段）
function show_queryRpt(){ var myChart = echarts.init(document.getElementById("my-tabs-qcq")); Ext.Ajax.request({ url: './rptController.do', timeout: '60000', params:{ method:'newQueryRptSame', //queryRpt sign : Ext.getCmp('programSignJs').getValue(), cityCode: deptTpye >1 ? cityCode : Ext.getCmp('rptCityJs').getValue(), deptId: deptTpye >2 ? deptId : Ext.getCmp('rptDeptJs').getValue() , deptName : Ext.getCmp('rptDeptJs').getRawValue() , important : Ext.getCmp('importantJs').getValue() , inceptObj : Ext.getCmp('inceptObjJs').getValue() , startDate : Ext.getCmp('recordStartDateJs1').getValue() , endDate : Ext.getCmp('recordEndDateJs1').getValue(), duration : Ext.getCmp('durationJs').getValue() }, success : function(resp, option) { //数据处理部分就在这里，ajax返回的data也就是resp进行处理以下栗色部分为数据处理的过程 var res = resp.responseText; alert(res) var reg1 = /label='(.*?)'/g; var reg2 = /value='(\d+)'/g; var reg3 = /\'.*\'/; var str1 = res.match(reg1); var str2 = res.match(reg2); var arrayObj = new Array(); var arrayVal = new Array(); //alert(str1) if(!(str1 == null || str1 == "" || str1 == "undefined")){ for (var i = 0;i<str1.length;i++){ arrayObj.push(str1[i].match(reg3).toString().replace(/\'/g,"")); arrayVal.push(str2[i].match(reg3).toString().replace(/\'/g,"")); } //console.log("arrayObj=="+ arrayObj); var option = { title: { text: '' }, tooltip: {}, legend: { data:['备案通过节目和栏目'] }, xAxis: { data: arrayObj, //重点拼接数据之一 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"30" //x轴倾斜程度 当x轴字符串过长时可以倾斜显示 } //下边注释掉的为将每行显示的字符串进行处理 /*axisLabel : {//坐标轴刻度标签的相关设置。 formatter : function(arrayObj){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = arrayObj.length;// 实际标签的个数 var provideNumber = 2;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 *//** * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 *//* // 条件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { *//** 循环每一行,p表示行 *//* for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 开始截取的位置 var end = start + provideNumber;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不换行 tempStr = arrayObj.substring(start, paramsNameNumber); } else { // 每一次拼接字符串并换行 tempStr = arrayObj.substring(start, end) + "\n"; } newParamsName += tempStr;// 最终拼成的字符串 } } else { // 将旧标签的值赋给新标签 newParamsName = arrayObj; } //将最终的字符串返回 return newParamsName } }*/ }, yAxis: {}, series: [{ name: '备案通过节目和栏目', type: 'bar', itemStyle: { normal:{ color:"#4169E1" } }, data: arrayVal //重点拼接数据之二 }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }else{ alert("暂无数据") } } }); };
饼状图：
后台返回到页面的数据
<set name= '网络剧' value='9.81087600799503756289199807016334688814' isSliced='1' /><set name= '微电影' value='11427.8421211815707228551265248512954935' isSliced='1' /><set name= '网络电影' value='74.66496887379739671760045274476513865308' isSliced='1' /><set name= '影视类动画片' value='15.55840286054827175208581644815256257449' isSliced='1' /><set name= '纪录片' value='37.89181561618062088428974600188146754468' isSliced='1' /><set name= '文艺' value='31.73720740337506804572672836145890038106' isSliced='1' /><set name= '娱乐' value='26.06226289647620165043607493449098517736' isSliced='1' /><set name= '科技' value='6' isSliced='1' /><set name= '财经' value='7.0501632021989348909122143961518639409' isSliced='1' /><set name= '体育' value='70.21899362154500354358610914245216158753' isSliced='1' /><set name= '教育' value='19.94711147274206672091131000813669650122' isSliced='1' /><set name= '其他视听节目' value='10.45147170768840395838619639685359045927' isSliced='1' />|11427.842
jsp代码同上
js代码：
var show_tInterval = function() { var myChart = echarts.init(document.getElementById("chartTime")); var programCity; if(cityName == Ext.getCmp('cityTimeJs').getValue()){ programCity = cityCode; }else{ programCity = Ext.getCmp('cityTimeJs').getValue(); } var programDept; if(deptName == Ext.getCmp('deptTimeJs').getValue()){ programDept = deptId; }else{ programDept = Ext.getCmp('deptTimeJs').getValue(); } var avgOrSumTime = Ext.getCmp('avgOrSumTimeJs').getValue(); Ext.Ajax.request({ url: './programCountcontroller.do?method=newIteminterval', //newIteminterval timeout: '60000', params:{ sign : Ext.getCmp('signTimeJs').getValue(), cityCode : programCity, uploadDeptId : programDept, typeTime : Ext.getCmp('typeTimeJs').getValue(), avgOrSumTime : avgOrSumTime //Ext.getCmp('avgOrSumTimeJs').getValue() }, success : function(resp, option) { //进行数据处理，用到了正则匹配。数据一般都是转为json格式。 var res = resp.responseText; //alert(res) var reg1 = /name=\s'(.*?)'/g; var reg2 = /value='(.*?)'/g; var reg3 = /\'.*\'/; var str1 = res.match(reg1); var str2 = res.match(reg2); var arrayData = new Array(); var str4 = ""; var legenddata = '['; var seriesdata = '['; if(!(str1 == null || str1 == "" || str1 == "undefined")){ for (var i = 0;i<str1.length;i++){ //拼接数据 将“=”替换成“:” var strName = str1[i].toString().replace(/=/g,":"); strName = strName.substring(0,strName.length); //console.log("strName======"+strName); legenddata += '"' + strName.match(reg3).toString().replace(/\'/g,"") + '",' //console.log(str1[i].toString().replace(/=/g,":")); var str3 = str2[i].toString().replace(/\'/g,"").replace(/=/g,":"); var strNum; if(str3.indexOf('.') != -1){ //如果是浮点类型的则保留两位小数 strNum = str3.substring(0,str3.indexOf('.')+3); }else{ //整数直接保留 strNum = str3; } seriesdata += '{"name":"' + strName.match(reg3).toString().replace(/\'/g,"") + '","value":' + strNum.substring(6,strNum.length) + '},'; //console.log(strName); //arrayData.push("{"+strNum+","+strName+"}"); } if (legenddata.length > 1) { legenddata = legenddata.substring(0, legenddata.length - 1); } if (seriesdata.length > 1) { seriesdata = seriesdata.substring(0, seriesdata.length - 1); } legenddata += ']'; seriesdata += ']'; var arr1 = res.split('|')[0]; var arr2 = res.split('|')[1]; var caption = '类型平均时长统计'; if(avgOrSumTime == 1){ caption = '类型总时长统计'; }else if(avgOrSumTime == 2){ caption = '节目总备案时长'; }else if(avgOrSumTime == 3){ caption = '栏目总备案时长'; }else if(avgOrSumTime == 4){ caption = '全部总备案时长'; } option = { title : { text: '类型总时长统计', subtext: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: $.parseJSON(legenddata) //需要重点拼接的数据之一 }, series : [ { name: '数据来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data: $.parseJSON(seriesdata), //需要重点拼接的数据之二 itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); }else{ alert("暂无数据") } } }); };
折线图：
后台返回页面数据（片段）：
<categories> <category label='2013-01' /><category label='2013-02' /><category label='2013-03' /><category label='2013-04' /><category label='2013-05' /><category label='2013-06' /><category label='2013-07' /><category label='2013-08' /><category label='2013-09' /><category label='2013-10' /><category label='2013-11' /><category label='2013-12' /><category label='2014-01' /><category label='2014-02' /><category label='2014-03' /><category label='2014-04' /><category label='2014-05' /><category label='2014-06' /><category label='2014-07' /><category label='2014-08' /><category label='2014-09' /><category label='2014-10' /><category label='2014-11' /><category label='2014-12' /><category label='2015-01' /><category label='2015-02' /><category label='2015-03' /><category label='2015-04' /><category label='2015-05' /><category label='2015-06' /><category label='2015-07' /><category label='2015-08' /><category label='2015-09' /><category label='2015-10' /><category label='2015-11' /><category label='2015-12' /><category label='2016-01' /><category label='2016-08' /><category label='2017-02' /><category label='2017-06' /><category label='2019-01' /></categories><dataset showValue='1'> <set value='435' /> <set value='2221' /> <set value='3001' /> <set value='1797' /> <set value='3141' /> <set value='8709' /> <set value='2756' /> <set value='1606' /> <set value='1496' /> <set value='1241' /> <set value='1485' /> <set value='3227' /> <set value='2586' /> <set value='2635' /> <set value='2802' /> <set value='1394' /> <set value='3155' /> <set value='1718' /> <set value='2442' /> <set value='1690' /> <set value='1654' /> <set ...
jsp同第一个
js代码：
var show_Drift = function() { var city; var chartDirft = echarts.init(document.getElementById("chartDirft")); if(cityName == Ext.getCmp('cityDriftJs').getValue()){ city = cityCode; }else{ city = Ext.getCmp('cityDriftJs').getValue(); } var dept; if(deptName == Ext.getCmp('deptDriftJs').getValue()){ dept = deptId; }else{ dept = Ext.getCmp('deptDriftJs').getValue(); } Ext.Ajax.request({ url: './programCountcontroller.do', timeout: '60000', params:{ method:'newStaticChange', // method:'staticChange', sign : Ext.getCmp('signDriftJs').getValue(), city:city, dept:dept, timeType:Ext.getCmp('timeTypeJs').getValue(), year:Ext.getCmp('yearJs').getValue(), yearType:Ext.getCmp('yearTypeJs').getValue(), quarterType:Ext.getCmp('quarterTypeJs').getValue(), monthType:Ext.getCmp('monthTypeJs').getValue() }, success : function(resp, option) { var res = resp.responseText; //alert(res) var reg1 = /label='(.*?)'/g; var reg2 = /value='(\d+)'/g; var reg3 = /\'.*\'/; var str1 = res.match(reg1); var str2 = res.match(reg2); var arrayObj = new Array(); var arrayVal = new Array(); if(!(str1 == null || str1 == "" || str1 == "undefined")){ for (var i = 0;i<str1.length;i++){ arrayObj.push(str1[i].match(reg3).toString().replace(/\'/g,"")); arrayVal.push(str2[i].match(reg3).toString().replace(/\'/g,"")); } option = { xAxis: { type: 'category', data: arrayObj, //重点数据一 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"45" //x轴倾斜程度 当x轴字符串过长时可以倾斜显示 } }, yAxis: { type: 'value' }, series: [{ data: arrayVal, //重点数据二 type: 'line', itemStyle : { normal: {label : {show: true}}} }] }; chartDirft.setOption(option); }else{ alert("暂无数据") } } }); } ;
最终总结一下，统计图无非就是按照官网上demo中的数据格式进行拼接，然后就是对数据进行处理，处理过程中一定要小心，会出现各种情况。
举个栗子（使用时出现的问题）：
1、数据格式明明拼对了，直接拿出来放在官网上进行测试也没问题，把数据直接放在规定的地方也没问题，但是只要是把它放在一个对象里，再放到规定位置就不行出不来，在组件引对的情况下可能是数据不是json格式，需要将数据json处理一下。
2、上面的饼图的代码，对浮点类型的数据进行了处理，但是没想到出现了一个整数，导致数据不完整，无法进行json转换，最后图也出不来。
3、有时候数据可能太大或者字符串太长都可以进行处理，例子中均有处理，也可以在网上进行搜索。
