第一步去官网挑选自己需要的图形了。 官网地址：https://echarts.baidu.com/

第二步按照官网的demo，下载需要的js组件并放到自己的项目中。

第三步仿照demo创建需要的div，并在js中将方法原模原样的复制过去，运行测试是否能够在页面显示出来，以此来检查最基本的js组件有木有引对等最不应该犯得小错误。

第四步确定demo在自己的项目中可以正常显示之后，就可以对自己的数据进行处理了。按照demo的数据格式进行拼接，可以通过后台进行拼接，也可以在js中进行拼接。

以下是我个人对于基本的柱形图、饼状图、折线图的使用代码。

因为这是在原来项目上进行修改，而且项目比较老了，不想动后台，直接将后台传输到前台的页面在js中进行处理了。

柱形图：

后台返回到页面的信息如下

  1. <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代码（片段）

  1. <head>
    　　<script type="text/javascript" src="<%=request.getContextPath() %>/js/lib/echarts/echarts.js"></script>
  2. 　　<script type="text/javascript" src="<%=request.getContextPath() %>/js/lib/jquery/jquery.js"></script>
  3. 　　<script type="text/javascript" src="<%=request.getContextPath()%>/js/programCount/echarsProgrammeCount.js"></script>
  4. </head>

    <div id="my-tabs-qcq" align="center" style="width: 1000px;height:400px"></div>

js代码（片段）

  1. function show_queryRpt(){
  2.     var myChart = echarts.init(document.getElementById("my-tabs-qcq"));
  3.     Ext.Ajax.request({
  4.         url: './rptController.do',
  5.         timeout: '60000',
  6.         params:{
  7.             method:'newQueryRptSame', //queryRpt
  8.             sign : Ext.getCmp('programSignJs').getValue(),
  9.             cityCode: deptTpye >1 ? cityCode : Ext.getCmp('rptCityJs').getValue(),
  10.             deptId: deptTpye >2 ? deptId : Ext.getCmp('rptDeptJs').getValue() ,
  11.             deptName : Ext.getCmp('rptDeptJs').getRawValue() ,
  12.             important :  Ext.getCmp('importantJs').getValue() ,
  13.             inceptObj : Ext.getCmp('inceptObjJs').getValue() ,
  14.             startDate : Ext.getCmp('recordStartDateJs1').getValue() ,
  15.             endDate : Ext.getCmp('recordEndDateJs1').getValue(),
  16.             duration : Ext.getCmp('durationJs').getValue()
  17.         },
  18.         success : function(resp, option) {  //数据处理部分就在这里，ajax返回的data也就是resp进行处理以下栗色部分为数据处理的过程
  19.             var res = resp.responseText;
  20.             alert(res)
  21.             var reg1 = /label='(.*?)'/g;
  22.             var reg2 = /value='(\d+)'/g;
  23.             var reg3 = /\'.*\'/;
  24.             var str1 = res.match(reg1);
  25.             var str2 = res.match(reg2);
  26.             var arrayObj = new Array();
  27.             var arrayVal = new Array();
  28.             //alert(str1)
  29.             if(!(str1 == null || str1 == "" || str1 == "undefined")){
  30.             for (var i = 0;i<str1.length;i++){
  31.                 arrayObj.push(str1[i].match(reg3).toString().replace(/\'/g,""));
  32.                 arrayVal.push(str2[i].match(reg3).toString().replace(/\'/g,""));
  33.             }
  34.             //console.log("arrayObj=="+ arrayObj);
  35.             var option = {
  36.                     title: {
  37.                         text: ''
  38.                     },
  39.                     tooltip: {},
  40.                     legend: {
  41.                         data:['备案通过节目和栏目']
  42.                     },
  43.                     xAxis: {
  44.                         data: arrayObj, //重点拼接数据之一
  45.                         axisLabel : {//坐标轴刻度标签的相关设置。
  46.                             interval:0,
  47.                             rotate:"30" //x轴倾斜程度 当x轴字符串过长时可以倾斜显示
  48.                         }
  49.                         //下边注释掉的为将每行显示的字符串进行处理
  50.                         /*axisLabel : {//坐标轴刻度标签的相关设置。
  51.                             formatter : function(arrayObj){
  52.                                var newParamsName = "";// 最终拼接成的字符串
  53.                                         var paramsNameNumber = arrayObj.length;// 实际标签的个数
  54.                                         var provideNumber = 2;// 每行能显示的字的个数
  55.                                         var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
  56.                                         *//**
  57.                                          * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
  58.                                          *//*
  59.                                         // 条件等同于rowNumber>1
  60.                                         if (paramsNameNumber > provideNumber) {
  61.                                             *//** 循环每一行,p表示行 *//*
  62.                                             for (var p = 0; p < rowNumber; p++) {
  63.                                                 var tempStr = "";// 表示每一次截取的字符串
  64.                                                 var start = p * provideNumber;// 开始截取的位置
  65.                                                 var end = start + provideNumber;// 结束截取的位置
  66.                                                 // 此处特殊处理最后一行的索引值
  67.                                                 if (p == rowNumber - 1) {
  68.                                                     // 最后一次不换行
  69.                                                     tempStr = arrayObj.substring(start, paramsNameNumber);
  70.                                                 } else {
  71.                                                     // 每一次拼接字符串并换行
  72.                                                     tempStr = arrayObj.substring(start, end) + "\n";
  73.                                                 }
  74.                                                 newParamsName += tempStr;// 最终拼成的字符串
  75.                                             }
  76.  
  77.                                         } else {
  78.                                             // 将旧标签的值赋给新标签
  79.                                             newParamsName = arrayObj;
  80.                                         }
  81.                                         //将最终的字符串返回
  82.                                         return newParamsName
  83.                             }
  84.  
  85.                         }*/
  86.                     },
  87.                     yAxis: {},
  88.                     series: [{
  89.                         name: '备案通过节目和栏目',
  90.                         type: 'bar',
  91.                         itemStyle: {
  92.                             normal:{
  93.                                 color:"#4169E1"
  94.                             }
  95.                         },
  96.                         data: arrayVal //重点拼接数据之二
  97.                     }]
  98.                 };
  99.                 // 使用刚指定的配置项和数据显示图表。
  100.                 myChart.setOption(option);
  101.         }else{
  102.             alert("暂无数据")
  103.         }
  104.         }
  105.     });
  106. };

饼状图：

后台返回到页面的数据

  1. <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代码：

  1. var show_tInterval = function() {
  2.     var myChart = echarts.init(document.getElementById("chartTime"));
  3.     var programCity;
  4.     if(cityName == Ext.getCmp('cityTimeJs').getValue()){
  5.         programCity = cityCode;
  6.     }else{
  7.         programCity =  Ext.getCmp('cityTimeJs').getValue();
  8.     }
  9.     var programDept;
  10.     if(deptName == Ext.getCmp('deptTimeJs').getValue()){
  11.         programDept = deptId;
  12.     }else{
  13.         programDept =  Ext.getCmp('deptTimeJs').getValue();
  14.     }
  15.     var avgOrSumTime = Ext.getCmp('avgOrSumTimeJs').getValue();
  16.     Ext.Ajax.request({
  17.         url: './programCountcontroller.do?method=newIteminterval', //newIteminterval
  18.         timeout: '60000',
  19.         params:{
  20.             sign :  Ext.getCmp('signTimeJs').getValue(),
  21.             cityCode : programCity,
  22.             uploadDeptId : programDept,
  23.             typeTime : Ext.getCmp('typeTimeJs').getValue(),
  24.             avgOrSumTime : avgOrSumTime //Ext.getCmp('avgOrSumTimeJs').getValue()
  25.         },
  26.         success : function(resp, option) {  //进行数据处理，用到了正则匹配。数据一般都是转为json格式。
  27.             var res = resp.responseText;
  28.             //alert(res)
  29.             var reg1 = /name=\s'(.*?)'/g;
  30.             var reg2 = /value='(.*?)'/g;
  31.             var reg3 = /\'.*\'/;
  32.             var str1 = res.match(reg1);
  33.             var str2 = res.match(reg2);
  34.             var arrayData = new Array();
  35.             var str4 = "";
  36.             var legenddata = '[';
  37.             var seriesdata = '[';
  38.             if(!(str1 == null || str1 == "" || str1 == "undefined")){
  39.             for (var i = 0;i<str1.length;i++){
  40.                 //拼接数据 将“=”替换成“:”
  41.                 var strName = str1[i].toString().replace(/=/g,":");
  42.                 strName = strName.substring(0,strName.length);
  43.                 //console.log("strName======"+strName);
  44.                 legenddata += '"' + strName.match(reg3).toString().replace(/\'/g,"") + '",'
  45.                 //console.log(str1[i].toString().replace(/=/g,":"));
  46.                 var str3 = str2[i].toString().replace(/\'/g,"").replace(/=/g,":");
  47.                 var strNum;
  48.                 if(str3.indexOf('.') != -1){ //如果是浮点类型的则保留两位小数
  49.                     strNum = str3.substring(0,str3.indexOf('.')+3);
  50.                 }else{ //整数直接保留
  51.                     strNum = str3;
  52.                 }
  53.  
  54.                 seriesdata += '{"name":"' + strName.match(reg3).toString().replace(/\'/g,"") + '","value":' + strNum.substring(6,strNum.length) + '},';
  55.                 //console.log(strName);
  56.  
  57.                 //arrayData.push("{"+strNum+","+strName+"}");
  58.             }
  59.              if (legenddata.length > 1) {
  60.                  legenddata = legenddata.substring(0, legenddata.length - 1);
  61.              }
  62.              if (seriesdata.length > 1) {
  63.                  seriesdata = seriesdata.substring(0, seriesdata.length - 1);
  64.              }
  65.             legenddata += ']';
  66.             seriesdata += ']';
  67.  
  68.             var arr1 = res.split('|')[0];
  69.             var arr2 = res.split('|')[1];
  70.             var caption = '类型平均时长统计';
  71.             if(avgOrSumTime == 1){
  72.              caption = '类型总时长统计';
  73.             }else if(avgOrSumTime == 2){
  74.                  caption = '节目总备案时长';
  75.             }else if(avgOrSumTime == 3){
  76.                  caption = '栏目总备案时长';
  77.             }else if(avgOrSumTime == 4){
  78.                  caption = '全部总备案时长';
  79.             }
  80.             option = {
  81.                     title : {
  82.                         text: '类型总时长统计',
  83.                         subtext: '',
  84.                         x:'center'
  85.                     },
  86.                     tooltip : {
  87.                         trigger: 'item',
  88.                         formatter: "{a} <br/>{b} : {c} ({d}%)"
  89.                     },
  90.                     legend: {
  91.                         orient: 'vertical',
  92.                         left: 'left',
  93.                         data: $.parseJSON(legenddata)  //需要重点拼接的数据之一
  94.                     },
  95.                     series : [
  96.                         {
  97.                             name: '数据来源',
  98.                             type: 'pie',
  99.                             radius : '55%',
  100.                             center: ['50%', '60%'],
  101.                             data: $.parseJSON(seriesdata),  //需要重点拼接的数据之二
  102.                             itemStyle: {
  103.                                 emphasis: {
  104.                                     shadowBlur: 10,
  105.                                     shadowOffsetX: 0,
  106.                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  107.                                 }
  108.                             }
  109.                         }
  110.                     ]
  111.                 };
  112.              myChart.setOption(option);
  113.         }else{
  114.             alert("暂无数据")
  115.         }
  116.         }
  117.     });
  118. };

折线图：

后台返回页面数据（片段）：

  1.  <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代码：

  1. var show_Drift = function() {
  2.     var city;
  3.     var chartDirft = echarts.init(document.getElementById("chartDirft"));
  4.     if(cityName == Ext.getCmp('cityDriftJs').getValue()){
  5.         city = cityCode;
  6.     }else{
  7.         city =  Ext.getCmp('cityDriftJs').getValue();
  8.     }
  9.     var dept;
  10.     if(deptName == Ext.getCmp('deptDriftJs').getValue()){
  11.         dept = deptId;
  12.     }else{
  13.         dept =  Ext.getCmp('deptDriftJs').getValue();
  14.     }
  15.     Ext.Ajax.request({
  16.         url: './programCountcontroller.do',
  17.         timeout: '60000',
  18.         params:{
  19.             method:'newStaticChange',
  20.         //    method:'staticChange',
  21.             sign : Ext.getCmp('signDriftJs').getValue(),
  22.             city:city,
  23.             dept:dept,
  24.             timeType:Ext.getCmp('timeTypeJs').getValue(),
  25.             year:Ext.getCmp('yearJs').getValue(),
  26.              yearType:Ext.getCmp('yearTypeJs').getValue(),
  27.             quarterType:Ext.getCmp('quarterTypeJs').getValue(),
  28.             monthType:Ext.getCmp('monthTypeJs').getValue()
  29.         },
  30.         success : function(resp, option) {
  31.             var res = resp.responseText;
  32.             //alert(res)
  33.             var reg1 = /label='(.*?)'/g;
  34.             var reg2 = /value='(\d+)'/g;
  35.             var reg3 = /\'.*\'/;
  36.             var str1 = res.match(reg1);
  37.             var str2 = res.match(reg2);
  38.             var arrayObj = new Array();
  39.             var arrayVal = new Array();
  40.             if(!(str1 == null || str1 == "" || str1 == "undefined")){
  41.             for (var i = 0;i<str1.length;i++){
  42.                 arrayObj.push(str1[i].match(reg3).toString().replace(/\'/g,""));
  43.                 arrayVal.push(str2[i].match(reg3).toString().replace(/\'/g,""));
  44.             }
  45.             option = {
  46.                     xAxis: {
  47.                         type: 'category',
  48.                         data: arrayObj,  //重点数据一
  49.                         axisLabel : {//坐标轴刻度标签的相关设置。
  50.                             interval:0,
  51.                             rotate:"45" //x轴倾斜程度 当x轴字符串过长时可以倾斜显示
  52.                         }
  53.                     },
  54.                     yAxis: {
  55.                         type: 'value'
  56.                     },
  57.                     series: [{
  58.                         data: arrayVal,  //重点数据二
  59.                         type: 'line',
  60.                         itemStyle : { normal: {label : {show: true}}}
  61.                     }]
  62.                 };
  63.             chartDirft.setOption(option);
  64.         }else{
  65.             alert("暂无数据")
  66.         }
  67.         }
  68.     });
  69. } ;

最终总结一下，统计图无非就是按照官网上demo中的数据格式进行拼接，然后就是对数据进行处理，处理过程中一定要小心，会出现各种情况。

举个栗子（使用时出现的问题）：

1、数据格式明明拼对了，直接拿出来放在官网上进行测试也没问题，把数据直接放在规定的地方也没问题，但是只要是把它放在一个对象里，再放到规定位置就不行出不来，在组件引对的情况下可能是数据不是json格式，需要将数据json处理一下。

2、上面的饼图的代码，对浮点类型的数据进行了处理，但是没想到出现了一个整数，导致数据不完整，无法进行json转换，最后图也出不来。

3、有时候数据可能太大或者字符串太长都可以进行处理，例子中均有处理，也可以在网上进行搜索。

Echars统计图的使用的更多相关文章

  1. echars入门篇

    官网地址:echars. 官方实例:首次使用请点击. 官方文档以及第一次操作实例如下 我们生活中有很多统计图,举例一下,有:柱形图.饼图.折线图等一些可以统计数据的形式. 图有:X轴(横轴),Y轴(纵 ...

  2. 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】

    之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...

  3. 【Java EE 学习 74 上】【数据采集系统第六天】【使用Jfreechart的统计图实现】【Jfreechart的基本使用方法】

    之前已经实现了数据的采集,现在已经有了基本的数据,下一步就需要使用这些数据实现统计图的绘制了.这里使用Jfreechart实现这些统计图的绘制.首先看一下Jfreechart的基本用法,只有知道了它的 ...

  4. 使用C#和Excel进行报表开发（三）－生成统计图（Chart）

    有的Web项目选用Excel作为报表方案,在服务器端生成Excel文件,然后传送到客户端,由客户端进行打印.在国内的环境下,相对PDF方式,Excel的安装率应该比pdf阅读器的安装率要高,同时,微软 ...

  5. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  6. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  7. java利用JFreeChart实现各种数据统计图（柱形图，饼图，折线图）

    最近在做数据挖掘的课程设计,需要将数据分析的结果很直观的展现给用户,这就要用到数据统计图,要实现这个功能就需要几个第三方包了: 1.       jfreechart-1.0.13.jar 2.    ...

  8. EChars学习-2

    上海的echars学习 <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu ...

  9. Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息

    var pageSize = 20;//初始化每页数据条数 var winTitle = '';//初始化窗口标题 /** *点击统计图时,弹出一个窗口,显示统计的详情列表信息, *该方法为项目中所有 ...

随机推荐

  1. 一篇文章搞定Java注解^_^

    0.序言 自己写这些文章本来想着自己系统的整理下知识,将知识串起来,后面复习用,或者以后年龄大了,去教育机构呀,拿出自己整理的笔记,你看这人爱总结爱分享,文笔也还能看,方便找工作不是. 很开心的是,有 ...

  2. zoj3299 Fall the Brick

    Time Limit: 3 Seconds      Memory Limit: 32768 KB Now the God is very angry, so he wants to punish t ...

  3. 一文带你认识Docker

    Docker是一个容器技术的应用,而底层是由于Linux容器实现的,Docker只是实现层. 一.Linux容器 1.隔离与共享 一台服务器运行着多个逻辑隔离的服务器进程,谁的运行环境都不希望影响到谁 ...

  4. 【论文笔记】AutoML for MCA on Mobile Devices——论文解读与代码解析

    理论部分 方法介绍 本节将详细介绍AMC的算法流程.AMC旨在自动地找出每层的冗余参数. AMC训练一个强化学习的策略,对每个卷积层会给出其action(即压缩率),然后根据压缩率进行裁枝.裁枝后,A ...

  5. python-gen

  6. Bootstrap导航组件

    Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页 注意 .nav-tabs 类依赖 .nav 基类 <ul class=" ...

  7. IDEA 安装常用操作二

    一.IDEA启动慢,因为启动时编译.缓存.创建索引等,如果断电等启动异常,可以让缓存索引失效 迁移IDEAD时,可以找到config.system等文件夹, 随着时间使用越久,空间占用越大,另外觉得浪 ...

  8. js create Array ways All In One

    js create Array ways All In One ES6 const arr = [...document.querySelectorAll(`[data-dom="^div& ...

  9. 使用 js 实现十大排序算法: 冒泡排序

    使用 js 实现十大排序算法: 冒泡排序 冒泡排序 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  10. set CSS style in js solutions All In One

    set CSS style in js solutions All In One css in js set each style property separately See the Pen se ...