您的位置: 首页  >  文章  >  echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）

echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）

分类: 文章 • 2024-02-04 19:25:10

echarts3是向下兼容echarts2的，所以echarts2切换到echarts3基本无需改代码。

饼图、柱形图、折线图：用的echarts2的配置项，但是能正常显示

echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）


代码片段：


[javascript] view plain copy
  1.     function loadCharts(orgCode){  
  2.     /** 构建故障原因饼图 */  
  3.         myChart1.showLoading();      
  4.         jQuery.ajax({  
  5.             type: "POST",  
  6.             url: "#URL()/fastrepair/statistics/queryDayFaultReason",  
  7.             data: {orgCode:orgCode},  
  8.             success: function(json){  
  9.               var faultReason = json.result;  
  10.      
  11.         option1 = {    
  12.                title : {    
  13.                    text: '主要故障原因',    
  14.                       x:'center',  
  15.                       y:'bottom',  
  16.                       textStyle: {  
  17.                          fontFamily: 'Microsoft YaHei',  
  18.                          fontSize:12,  
  19.                          fontStyle: 'normal',  
  20.                          fontWeight: 'normal',  
  21.                          color: '#333333'  
  22.                       }    
  23.                },    
  24.                tooltip : {    
  25.                    trigger: 'item',    
  26.                    formatter: "{a} <br/>{b} : {c} ({d}%)"    
  27.                },    
  28.                calculable : true,  
  29.                color: ['rgb(27,208,220)','rgb(106,234,157)','rgb(109,174,239)','rgb(240,208,113)','rgb(235,97,0)'],  
  30.                series : [    
  31.                    {    
  32.                      name:'主要故障原因',    
  33.                      clickable:false,  
  34.                      itemStyle: {  
  35.                        normal: {  
  36.                           label: {  
  37.                              formatter: "{b} {c}"  
  38.                           },  
  39.                           labelLine: {  
  40.                               length: 5  
  41.                           }  
  42.                        }  
  43.                      },   
  44.                      type:'pie',    
  45.                      radius : '55%',    
  46.                      center: ['50%', '40%'],    
  47.                      data: faultReason  
  48.                    }    
  49.                ]    
  50.         };    
  51.         myChart1.setOption(option1);    
  52.         myChart1.hideLoading();  
  53.     }  
  54. });            
  55.   
  56.     /** 构建故障类型饼图 */  
  57.         myChart2.showLoading();  
  58.         jQuery.ajax({  
  59.             type: "POST",  
  60.             url: "#URL()/fastrepair/statistics/queryDayFaultType",  
  61.             data: {orgCode:orgCode},  
  62.             success: function(json){  
  63.             var faultType = json.result;  
  64.             
  65.         option2 = {    
  66.                title : {    
  67.                    text: '故障类型',    
  68.                       x:'center',  
  69.                       y:'bottom',  
  70.                       textStyle: {  
  71.                          fontFamily: 'Microsoft YaHei',  
  72.                          fontSize:12,  
  73.                          fontStyle: 'normal',  
  74.                          fontWeight: 'normal',  
  75.                          color: '#333333'  
  76.                       }    
  77.                },  
  78.                tooltip : {    
  79.                    trigger: 'item',    
  80.                    formatter: "{a} <br/>{b} : {c} ({d}%)"    
  81.                },  
  82.                calculable : true,  
  83.                color: ['rgb(27,208,220)','rgb(109,174,239)','rgb(240,208,113)','rgb(235,97,0)'],  
  84.                series : [    
  85.                    {    
  86.                      type:'pie',    
  87.                      name:'故障类型',    
  88.                      clickable:false,  
  89.                      itemStyle: {  
  90.                        normal: {  
  91.                           label: {  
  92.                              formatter: "{b} {c}"  
  93.                           },  
  94.                           labelLine: {  
  95.                               length: 5  
  96.                           }  
  97.                        }  
  98.                      },   
  99.                      radius : '55%',    
  100.                      center: ['50%', '40%'],    
  101.                      data:faultType  
  102.                    }    
  103.                ]    
  104.         };    
  105.         myChart2.setOption(option2);   
  106.         myChart2.hideLoading();   
  107.     }  
  108. });        
  109.   
  110.     /** 构建故障来源饼图 */  
  111.         myChart3.showLoading();  
  112.         jQuery.ajax({  
  113.             type: "POST",  
  114.             url: "#URL()/fastrepair/statistics/queryDayFaultSource",  
  115.             data: {orgCode:orgCode},  
  116.             success: function(json){  
  117.             var faultSource = json.result;  
  118.         option3 = {    
  119.                title : {    
  120.                    text: '故障来源',    
  121.                       x:'center',  
  122.                       y:'bottom',  
  123.                       textStyle: {  
  124.                          fontFamily: 'Microsoft YaHei',  
  125.                          fontSize:12,  
  126.                          fontStyle: 'normal',  
  127.                          fontWeight: 'normal',  
  128.                          color: '#333333'  
  129.                       }    
  130.                },    
  131.                tooltip : {    
  132.                    trigger: 'item',    
  133.                    formatter: "{a} <br/>{b} : {c} ({d}%)"    
  134.                },    
  135.                calculable : true,  
  136.                color: ['rgb(27,208,220)','rgb(109,174,239)','rgb(240,208,113)'],  
  137.                series : [    
  138.                    {    
  139.                      name:'故障来源',    
  140.                      clickable:false,  
  141.                      itemStyle: {  
  142.                        normal: {  
  143.                           label: {  
  144.                              formatter: "{b} {c}"  
  145.                           },  
  146.                           labelLine: {  
  147.                               length: 5  
  148.                           }  
  149.                        }  
  150.                      },   
  151.                      type:'pie',    
  152.                      radius : '55%',    
  153.                      center: ['50%', '40%'],    
  154.                      data:faultSource  
  155.                    }    
  156.                ]    
  157.           };    
  158.           myChart3.setOption(option3);    
  159.           myChart3.hideLoading();   
  160.     }  
  161. });        
  162.   
  163.         myChart4.showLoading();  
  164.         jQuery.ajax({  
  165.             type: "POST",  
  166.             url: "#URL()/fastrepair/statistics/queryDayFaultUnit",  
  167.             data: {orgCode:orgCode},  
  168.             success: function(json){  
  169.             var faultUnit = json.result;  
  170.               var orgname =[];  
  171.               var daytotal = [];  
  172.               var dayrushrepair =[];  
  173.               var dayrecover = [];                
  174.               jQuery.each(faultUnit, function(i,item){    
  175.               orgname.push(item.orgname);  
  176.               daytotal.push(item.daytotal);  
  177.               dayrushrepair.push(item.dayrushrepair);  
  178.               dayrecover.push(item.dayrecover);  
  179.               });  
  180.           option4 = {  
  181.               tooltip : {  
  182.                   trigger: 'item'  
  183.               },  
  184.               legend: {  
  185.                   //data:['历史未复电','当天抢修中','当天已复电'],  
  186.                   data:['当天抢修中','当天已复电','当天总数'],  
  187.                   y:'bottom',  
  188.                   textStyle: {  
  189.                      fontFamily:'Microsoft YaHei'  
  190.                   }  
  191.               },  
  192.               grid:{  
  193.                  x:50,  
  194.                  x2:35,  
  195.                  y:20,  
  196.                  y2:80  
  197.               },  
  198.               xAxis : [  
  199.               {  
  200.                   type : 'category',  
  201.                   axisLine: {  
  202.                      show: false  
  203.                   },  
  204.                   axisLabel: {  
  205.                      textStyle: {  
  206.                         color: '#333',  
  207.                         fontFamily:'Microsoft YaHei'  
  208.                      }  
  209.                   },  
  210.                   axisTick : {show: false},  
  211.                   splitLine: {  
  212.                      show: false  
  213.                   },  
  214.                   splitArea: {  
  215.                      show: false  
  216.                   },  
  217.                   data : orgname  
  218.               }  
  219.               ],  
  220.               yAxis : [  
  221.               {  
  222.                   type : 'value',  
  223.                   axisLine: {  
  224.                      show: false  
  225.                   },  
  226.                   axisLabel: {  
  227.                      textStyle: {  
  228.                         color: '#333',  
  229.                         fontFamily:'Microsoft YaHei'  
  230.                      }  
  231.                   },  
  232.                   axisTick : {show: false},  
  233.                   splitLine: {  
  234.                      show: true  
  235.                   },  
  236.                   splitArea: {  
  237.                      show: false  
  238.                   }                    
  239.               }  
  240.               ],  
  241.               series : [  
  242. /*              { 
  243.                  name:'历史未复电', 
  244.                  type:'bar', 
  245.                  data:[15, 8, 7, 16, 5, 7, 13], 
  246.                  itemStyle: { 
  247.                      normal: { 
  248.                          color: '#6daeef' 
  249.                      } 
  250.                  }, 
  251.                  markLine : { 
  252.                      symbol: 'none', 
  253.                      precision: 1, 
  254.                      itemStyle: { 
  255.                         normal: { 
  256.                            lineStyle: { 
  257.                               type: 'dotted' 
  258.                            } 
  259.                         } 
  260.                      },                  
  261.                     data : [ 
  262.                        {type : 'average', name: '平均值'} 
  263.                     ] 
  264.                  } 
  265.               },*/  
  266.               {  
  267.                  name:'当天抢修中',  
  268.                  type:'bar',  
  269.                  data:dayrushrepair,  
  270.                  itemStyle: {  
  271.                      normal: {  
  272.                          color: '#f0d071'  
  273.                      }  
  274.                  },                   
  275.                  markLine : {  
  276.                      symbol: 'none',  
  277.                      precision: 1,  
  278.                      itemStyle: {  
  279.                         normal: {  
  280.                            lineStyle: {  
  281.                               type: 'dotted'  
  282.                            }  
  283.                         }  
  284.                      },                   
  285.                      data : [  
  286.                          {type : 'average', name : '平均值'}  
  287.                      ]  
  288.                  }  
  289.               },  
  290.               {  
  291.                   name:'当天已复电',  
  292.                   type:'bar',  
  293.                   data:dayrecover,  
  294.                   itemStyle: {  
  295.                      normal: {  
  296.                          color: '#1bd0dc'  
  297.                      }  
  298.                   },                    
  299.                   markLine : {  
  300.                      symbol: 'none',  
  301.                      precision: 1,  
  302.                      itemStyle: {  
  303.                         normal: {  
  304.                            lineStyle: {  
  305.                               type: 'dotted'  
  306.                            }  
  307.                         }  
  308.                      },  
  309.                      data : [  
  310.                         {type : 'average', name : '平均值'}  
  311.                      ]  
  312.                   }  
  313.               },  
  314.               {  
  315.                   type:'line',  
  316.                   name:'当天总数',  
  317.                   yAxisIndex: 0,  
  318.                   itemStyle: {  
  319.                      normal: {  
  320.                         color:'#0970d6'  
  321.                      }  
  322.                   },  
  323.                   data:daytotal  
  324.               }  
  325. /*              { 
  326.                   type:'line', 
  327.                   name:'历史数据', 
  328.                   yAxisIndex: 0, 
  329.                   itemStyle: { 
  330.                      normal: { 
  331.                         color:'#f15acc' 
  332.                      } 
  333.                   },                   
  334.                   data:[25, 26, 27, 28, 29, 30, 36] 
  335.               }*/  
  336.               ]  
  337.           };  
  338.           myChart4.setOption(option4);    
  339.           myChart4.hideLoading();   
  340.      }        
  341. });             
  342.             
  343.      /** 构建故障持续时间柱形图 */  
  344.         myChart5.showLoading();  
  345.         jQuery.ajax({  
  346.             type: "POST",  
  347.             url: "#URL()/fastrepair/statistics/queryDayFaultTime",  
  348.             data: {orgCode:orgCode},  
  349.             success: function(json){  
  350.             var faultTime = json.result;           
  351.           var option5 = {  
  352.                grid:{  
  353.                   x:50  
  354.                },  
  355.                xAxis : [  
  356.                          {  
  357.                               type : 'value',  
  358.                               axisLine: {  
  359.                                    show: false  
  360.                               },  
  361.                               axisTick : {show: false},  
  362.                               splitLine: {  
  363.                                      show: false  
  364.                               },  
  365.                               splitArea: {  
  366.                                    show: false  
  367.                               }                                
  368.                          }  
  369.                        ],  
  370.                yAxis : [  
  371.                         {  
  372.                           type : 'category',  
  373.                           axisLine: {  
  374.                                  show: false  
  375.                           },  
  376.                           axisTick : {show: false},  
  377.                           splitLine: {  
  378.                                      show: true  
  379.                           },  
  380.                           splitArea: {  
  381.                                    show: false  
  382.                           },  
  383.                           data : ['2h-4h','4h-8h','>8h']  
  384.                         }  
  385.                        ],  
  386.               series : [  
  387.                           {  
  388.                             name:'故障持续时间',  
  389.                             type:'bar',  
  390.                             data:faultTime,  
  391.                             itemStyle: {  
  392.                                  normal: {  
  393.                                    color: '#1BD0DC',  
  394.                                    label : {  
  395.                                          show: true,  
  396.                                          position: 'insideRight',  
  397.                                          formatter: '{c}',  
  398.                                          textStyle: {  
  399.                                             color:'#FFF'  
  400.                                          }  
  401.                                    }  
  402.                                  }  
  403.                             }  
  404.                           }  
  405.                        ]  
  406.            };  
  407.            myChart5.setOption(option5);     
  408.            myChart5.hideLoading();   
  409.      }        
  410. });                                
  411. }  


2.柱形图+折线图+地图+散点图，这是从echarts3重新开发的

echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）

echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）

echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）



代码片段：

[javascript] view plain copy
  1. /** 加载图表 function  
  2. * provinceCode 省编码 
  3. * bureau_code 局编码 
  4. * assetType  资产类型 
  5. */  
  6. var myChart = echarts.init(document.getElementById('main'));  
  7. var myChart1 = echarts.init(document.getElementById('main1'));  
  8. var myChart2 = echarts.init(document.getElementById('map'));  
  9. var convertData = function (data) {  
  10.     var res = [];  
  11.     for (var i = 0; i < data.length; i++) {  
  12.         var geoCoord = geoCoordMap[data[i].name];  
  13.         if (geoCoord) {  
  14.             res.push({  
  15.                 name: data[i].name,  
  16.                 value: geoCoord.concat(data[i].value)  
  17.             });  
  18.         }  
  19.     }  
  20.     return res;  
  21. };  
  22. var geoCoordMap = {};  
  23.   
  24. function loadCharts(provinceCode,bureau_code,assetType){  
  25. var tjnybm = cui("#censusDate").getValue();   
  26. if(!provinceCode){ provinceCode = '00';}  
  27. if(!assetType)   { assetType = 0;}  
  28. var assetTypeName ='';  
  29. if(assetType == 0){  
  30.     assetTypeName ='变电站数量';  
  31. }else if(assetType == 1){  
  32.     assetTypeName ='主变数量(台)';     
  33. }else if(assetType == 2){  
  34.     assetTypeName ='主变容量(MVA)';   
  35. }else if(assetType == 3){  
  36.     assetTypeName ='断路器数量(组)';    
  37. }else if(assetType == 4){  
  38.     assetTypeName ='隔离开关数量(组)';   
  39. }else if(assetType == 5){  
  40.     assetTypeName ='GIS间隔数量';     
  41. }else if(assetType == 6){  
  42.     assetTypeName ='输电线路长度(km)';      
  43. }else if(assetType == 7){  
  44.     assetTypeName ='输电线路条数';      
  45. }else if(assetType == 8){  
  46.     assetTypeName ='配变数量(台)';     
  47. }else if(assetType == 9){  
  48.     assetTypeName ='配变容量(KVA)';   
  49. }else if(assetType == 10){  
  50.     assetTypeName ='10kV馈线长度(km)';    
  51. }else if(assetType == 11){  
  52.     assetTypeName ='10kV馈线条数';    
  53. }  
  54. var orgCode = provinceCode;  
  55. var orgName = cui("#parentUnit").getText();  
  56. if(bureau_code){  
  57.     orgCode = bureau_code;  
  58.     orgName = cui("#childUnit").getText();  
  59. }  
  60. var param = [orgCode,tjnybm,assetType];  
  61. /** echarts图表构建开始  */  
  62. //构建资产规模分布  
  63. myChart.showLoading();  
  64. jQuery.ajax({  
  65.         type: "POST",  
  66.         url: "/web/assetmonitoring/assetScaleChart/queryAssetDistribution.bpms",  
  67.         data: {'param':param},  
  68.         traditional:true,  
  69.         async: true,  
  70.         dataType: 'json',    
  71.         success: function(data){  
  72.         var distributionList =  data.distributionList;    
  73.         var dydj =[];  
  74.         var total = [];  
  75.         var add =[];  
  76.         jQuery.each(distributionList, function(i,item){    
  77.             dydj.push(item.dimName);  
  78.             total.push(item.assetTotal);  
  79.             add.push(item.assetNew);  
  80.         });  
  81. option = {  
  82.     title: {  
  83.         text: ((assetTypeName.indexOf("(")!=-1?assetTypeName.substring(0,assetTypeName.indexOf("(")):assetTypeName)+'的资产规模分布'+assetTypeName.substring(assetTypeName.indexOf("("),assetTypeName.indexOf(")")+1))+'('+tjnybm.substr(0,4)+'年'+tjnybm.substr(4,2)+'月)',  
  84.         textStyle: {fontSize:14,fontWeight:'normal'},  
  85.         subtext:'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'+orgName,  
  86.         subtextStyle: {  
  87.             color:'#000'  
  88.         },  
  89.         top:'top',  
  90.         left:'center'  
  91.     },  
  92. //    animation:false,  
  93.     grid:{  
  94.         left:60  
  95.     },      
  96.     tooltip: {  
  97.         trigger: 'axis',  
  98.         axisPointer: {  
  99.             type: 'none'  
  100.         }  
  101.     },  
  102.     xAxis: [  
  103.         {  
  104.             type: 'category',  
  105.             data: dydj,  
  106.             axisTick: {  
  107.                 alignWithLabel: true  
  108.             }  
  109.         }  
  110.     ],  
  111.     yAxis: [  
  112.         {  
  113.             name:'总数',  
  114.             type: 'value',  
  115.             splitNumber:4,  
  116.             axisLabel: {  
  117.                 formatter: '{value} '  
  118.             }  
  119.         },  
  120.         {  
  121.             name:'新增',  
  122.             type: 'value',    
  123.             splitNumber:4,  
  124.             axisLabel: {  
  125.                 formatter: '{value} '  
  126.             }  
  127.         }  
  128.     ],  
  129.     series: [  
  130.         {  
  131.             type:'bar',  
  132.             name:'总数',  
  133.             data:total,  
  134.             barWidth:'20%',  
  135.             itemStyle:{  
  136.               normal :{  
  137.                  color:'#4F94CD'  
  138.               },  
  139.               emphasis: {  
  140.                  color:'#4876FF'  
  141.               }  
  142.             }  
  143.         },  
  144.         {  
  145.             type:'line',  
  146.             name:'新增',  
  147.             yAxisIndex: 1,  
  148.             data:add,  
  149.             itemStyle: {  
  150.                 normal: {color: '#188df0'}  
  151.             }  
  152.         }  
  153.     ]  
  154. };  
  155. myChart.setOption(option);  
  156. myChart.hideLoading();  
  157. }  
  158. });    
  159.   
  160. //构建资产规模趋势  
  161. myChart1.showLoading();  
  162. jQuery.ajax({  
  163.     type: "POST",  
  164.     url: "/web/assetmonitoring/assetScaleChart/queryAssetTrend.bpms",  
  165.     data: {'param':param},  
  166.     traditional:true,  
  167.     async: true,  
  168.     dataType: 'json',    
  169.     success: function(data){  
  170.     var trendList = data.trendList;   
  171.     var tjnybm1 =[];  
  172.     var total = [];  
  173.     var add =[];  
  174.     jQuery.each(trendList, function(i,item){    
  175.         tjnybm1.push(item.tjnybm);  
  176.         total.push(item.assetTotal);  
  177.         add.push(item.assetNew);  
  178.     });  
  179. option1 = {  
  180.     title: {  
  181.         text: ((assetTypeName.indexOf("(")!=-1?assetTypeName.substring(0,assetTypeName.indexOf("(")):assetTypeName)+'的资产规模趋势'+assetTypeName.substring(assetTypeName.indexOf("("),assetTypeName.indexOf(")")+1))+'('+tjnybm.substr(0,4)+'年'+tjnybm.substr(4,2)+'月)',  
  182.         textStyle: {fontSize:14,fontWeight:'normal'},  
  183.         subtext:'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'+orgName,  
  184.         subtextStyle: {  
  185.             color:'#000'  
  186.         },  
  187.         top:'top',  
  188.         left:'center'  
  189.     },  
  190. //    animation:false,  
  191.     grid:{  
  192.         left:60  
  193.     },  
  194.     tooltip: {  
  195.         trigger: 'axis',  
  196.         axisPointer: {  
  197.             type: 'none'  
  198.         }  
  199.     },  
  200.     xAxis: [  
  201.         {  
  202.             type: 'category',  
  203.             data: tjnybm1,  
  204.             axisTick: {  
  205.                 alignWithLabel: true  
  206.             }  
  207.         }  
  208.     ],  
  209.     yAxis: [  
  210.         {  
  211.             name:'总数',  
  212.             type: 'value',  
  213.             splitNumber:4,  
  214.             axisLabel: {  
  215.                 formatter: '{value} '  
  216.             }  
  217.         },  
  218.         {  
  219.             name:'新增',  
  220.             type: 'value',  
  221.             splitNumber:4,  
  222.             axisLabel: {  
  223.                 formatter: '{value} '  
  224.             }  
  225.         }  
  226.     ],  
  227.     series: [  
  228.         {  
  229.             type:'bar',  
  230.             name:'总数',  
  231.             data:total,  
  232.             barWidth:'20%',  
  233.             itemStyle:{  
  234.               normal :{  
  235.                  color:'#4F94CD'  
  236.               },  
  237.               emphasis: {  
  238.                  color:'#4876FF'  
  239.               }  
  240.             }  
  241.         },  
  242.         {  
  243.             type:'line',  
  244.             name:'新增',  
  245.             yAxisIndex: 1,  
  246.             data:add,  
  247.             itemStyle: {  
  248.                 normal: {color: '#188df0'}  
  249.             }  
  250.         }  
  251.     ]  
  252. };  
  253. myChart1.setOption(option1);  
  254. myChart1.hideLoading();  
  255. }  
  256. });    
  257.   
  258.   
  259. /** 构建对比分析地图  */  
  260. if(bureau_code && bureau_code.length==2){  
  261.     provinceCode = bureau_code;  
  262. }  
  263. var param2 = [provinceCode,tjnybm,assetType];  
  264.   
  265. myChart2.showLoading();  
  266. jQuery.ajax({  
  267.     type: "POST",  
  268.     url: "/web/assetmonitoring/assetScaleChart/queryAssetCompare.bpms",  
  269.     data: {'param':param2},  
  270.     traditional:true,  
  271.     async: true,  
  272.     dataType: 'json',  
  273.     success: function(result){  
  274.     var compareList =   result.compareList;   
  275.     var data =[];  
  276.     jQuery.each(compareList, function(i,item){   
  277.         var objdata = {};  
  278.         objdata.name=item.dimName;  
  279.         objdata.value=item.assetTotal;  
  280.         data.push(objdata);  
  281.     });    
  282. var mapJsonName;  
  283. var mapJson = getMapJson(provinceCode);  
  284. mapJsonName =mapJson[0].name;  
  285. geoCoordMap =mapJson[1].geo;  
  286.   
  287. //加载地图  
  288. option3 = {  
  289.     title: {  
  290.         text: ((assetTypeName.indexOf("(")!=-1?assetTypeName.substring(0,assetTypeName.indexOf("(")):assetTypeName)+'的单位对比分析'+assetTypeName.substring(assetTypeName.indexOf("("),assetTypeName.indexOf(")")+1))+'('+tjnybm.substr(0,4)+'年'+tjnybm.substr(4,2)+'月)',  
  291.         textStyle: {fontSize:18,fontWeight:'normal'},  
  292.         top:'top',  
  293.         left:'center'  
  294.     },  
  295. //    animation:false,  
  296.     tooltip : {  
  297.         trigger: 'item'  
  298.     },  
  299.     geo: {  
  300.         map: mapJsonName,  
  301.         selectedMode:'single',  
  302.         label: {  
  303.             normal: {  
  304.                 show: false  
  305.             },  
  306.             emphasis: {  
  307.                 show: false  
  308.             }  
  309.         },          
  310.         itemStyle: {  
  311.             normal: {  
  312.                 areaColor: '#D1EEEE'  
  313.             },  
  314.             emphasis: {  
  315.                 areaColor: '#6495ED'  
  316.             }  
  317.         }  
  318.     },      
  319.     series: [  
  320.              {  
  321.                  type: 'scatter',  
  322.                  coordinateSystem: 'geo',  
  323.                  data: convertData(data),  
  324.                  symbolSize: 20,  
  325.                  hoverAnimation: true,  
  326.                  symbolSize: function (val) {  
  327.                      return (val[2] / (compareList[0].assetTotal) *100)> 30?(val[2] / (compareList[0].assetTotal) *250):(val[2] / (compareList[0].assetTotal) *300);  
  328.                  },  
  329.                  label: {  
  330.                      normal: {  
  331.                          formatter: function (params) {  
  332.                              return params.name + '\n ' + params.value[2];  
  333.                          },  
  334.                          position: 'inside',  
  335.                          show: true,  
  336.                          textStyle:{color:'#000'}  
  337.                      }  
  338.                  },  
  339.                  itemStyle: {  
  340.                      normal: {  
  341.                          color: '#5CACEE'  
  342.                      },  
  343.                      emphasis: {  
  344.                          color: '#FF8C00'  
  345.                      }  
  346.                  },  
  347.                  tooltip : {  
  348.                      formatter: function (params) {  
  349.                          return params.name + ' : ' + params.value[2];  
  350.                      }  
  351.                  },  
  352.                  zlevel: 1  
  353.              },  
  354.              {  
  355.                  type:'map',  
  356.                  geoIndex:0,  
  357.                  data: data,  
  358.                  tooltip : {  
  359.                      formatter: function (params) {  
  360.                          return params.name + (isNaN(params.value)?'':(':'+params.value));  
  361.                      }  
  362.                  }      
  363.              },  
  364.              {  
  365.                  type:'pie',  
  366.                  center: ['90%','10%'],  
  367.                  radius: 45,  
  368.                  label: {  
  369.                      normal: {  
  370.                          show: (mapJsonName=='NW'?false:true),  
  371.                          position: 'center',  
  372.                          formatter: '{b}',  
  373.                          textStyle: {  
  374.                              color:'#4F94CD',  
  375.                              fontSize:14  
  376.                          }  
  377.                      },  
  378.                      emphasis: {  
  379.                          show: (mapJsonName=='NW'?false:true),  
  380.                          position: 'center',  
  381.                          formatter: '{b}',  
  382.                          textStyle: {  
  383.                              color:'#4F94CD',  
  384.                              fontSize:14  
  385.                          }  
  386.                      }  
  387.                  },  
  388.                  itemStyle:{  
  389.                      normal: {  
  390.                          color: '#fff'  
  391.                      }                 
  392.                  },  
  393.                  data:[  
  394.                        {value:0,name:'返回南方电网'}  
  395.                  ],  
  396.                  tooltip: {  
  397.                      formatter:'{b}'  
  398.                  }  
  399.              }     
  400. /*              { 
  401.                  type:'pie', 
  402.                  center: ['10%','90%'], 
  403.                  radius: [35,45], 
  404.                  avoidLabelOverlap: false, 
  405.                  stillShowZeroSum:true, 
  406.                  label: { 
  407.                      normal: { 
  408.                          show: true, 
  409.                          position: 'inside', 
  410.                          formatter: '{c}\n\n\n\n\n{b}', 
  411.                          textStyle: { 
  412.                              color:'#000', 
  413.                              fontWeight:'bold', 
  414.                              fontSize:16 
  415.                          } 
  416.                      }, 
  417.                      emphasis: { 
  418.                          show: true, 
  419.                          position: 'inside', 
  420.                          formatter: '{c}\n\n\n\n\n{b}', 
  421.                          textStyle: { 
  422.                              color:'#000', 
  423.                              fontWeight:'bold', 
  424.                              fontSize:16 
  425.                          } 
  426.                      } 
  427.                  }, 
  428.                  itemStyle:{ 
  429.                      normal: { 
  430.                          color: '#4F94CD' 
  431.                      }                
  432.                  }, 
  433.                  data:[ 
  434.                        {value:compareList[0].assetTotal, name:(compareList[0].dimName.substr(0,6))} 
  435.                  ], 
  436.                  tooltip: { 
  437.                      formatter:'{b}:{c}' 
  438.                  } 
  439.              } */  
  440.      ]  
  441.   }  
  442.     
  443. $.get('geoJson/'+mapJsonName+'.json', function (geoJson) {  
  444.   echarts.registerMap(mapJsonName, geoJson);  
  445.   myChart2.setOption(option3);  
  446.   myChart2.hideLoading();  
  447.     myChart2.dispatchAction({  
  448.         type: 'downplay',  
  449.         seriesIndex: 0  
  450.     });  
  451.     myChart2.dispatchAction({  
  452.         type: 'downplay',  
  453.         seriesIndex: 1  
  454.     });   
  455.   //如果选了地市则高亮  
  456.   if(bureau_code.length>2){  
  457.     myChart2.dispatchAction({  
  458.         type: 'highlight',  
  459.         seriesIndex: 0,  
  460.         name: cui("#childUnit").getText()  
  461.    });  
  462.     myChart2.dispatchAction({  
  463.         type: 'highlight',  
  464.         seriesIndex: 1,  
  465.         name: cui("#childUnit").getText()  
  466.    });  
  467.   }  
  468. });  
  469. }  
  470. });  
  471. }  
  472. /** echarts图表构建结束  */  
  473.   
  474. //地图点击事件  
  475. function mapClick(){  
  476. myChart2.on('click', function (params){  
  477.     if(params.seriesType == 'scatter' || params.seriesType=="map"  || params.seriesType=="pie"){  
  478.     var tjnybm = cui("#censusDate").getValue();   
  479.     var tjnybm2 = cui("#censusDate").getValue();  
  480.     var assetType = cui("#assetTypeInput").getValue();    
  481.     var mapJson = getMapJson(params.name);    
  482.     //点击网省  
  483.     if(mapJson[0].name){  
  484.         mapJsonName =mapJson[0].name;  
  485.         geoCoordMap =mapJson[1].geo;  
  486.       $.get('geoJson/'+mapJsonName+'.json', function (geoJson) {  
  487.           echarts.registerMap(mapJsonName, geoJson);  
  488.           option3.geo.map = mapJsonName;            
  489.           var orgCode = mapJson[2].code;  
  490.           var param3 = [orgCode,tjnybm2,assetType];  
  491.           myChart2.showLoading();  
  492.           jQuery.ajax({  
  493.                 type: "POST",  
  494.                 url: "/web/assetmonitoring/assetScaleChart/queryAssetCompare.bpms",  
  495.                 data: {'param':param3},  
  496.                 traditional:true,  
  497.                 async: true,  
  498.                 dataType: 'json',  
  499.                 success: function(result){  
  500.                 var compareList =   result.compareList;   
  501.                 var data =[];  
  502.                 jQuery.each(compareList, function(i,item){   
  503.                     var objdata = {};  
  504.                     objdata.name=item.dimName;  
  505.                     objdata.value=item.assetTotal;  
  506.                     data.push(objdata);  
  507.                 });    
  508.                 option3.series[0].data = convertData(data);  
  509.                 option3.series[1].data = data;  
  510.                 //设置圆环图表  
  511. /*              var data1 =[]; 
  512.                 var objdata ={}; 
  513.                 objdata.value = compareList[0].assetTotal; 
  514.                 objdata.name = compareList[0].dimName.substr(0,6); 
  515.                 data1.push(objdata); 
  516.                 option3.series[1].data = data1;  */  
  517.                 myChart2.setOption(option3);  
  518.                 myChart2.hideLoading();  
  519.                 }  
  520.           })  
  521.       })  
  522.     }//点击地市局  
  523.     else{  
  524.         //高亮地市局区域和散点  
  525.         myChart2.dispatchAction({  
  526.             type: 'highlight',  
  527.             seriesIndex: 0,  
  528.             name: params.name.substr(0,2)  
  529.         });  
  530.         myChart2.dispatchAction({  
  531.             type: 'highlight',  
  532.             seriesIndex: 1,  
  533.             name: params.name.substr(0,2)  
  534.         });  
  535.     }  
  536.     //刷新分布和趋势图表  
  537.     //查询组织机构ID  
  538.     var dimId;  
  539.     jQuery.ajax({  
  540.         type: "POST",  
  541.         url: "/web/assetmonitoring/assetScaleChart/queryDimIdByName.bpms",  
  542.         data: {'param':params.name.substr(0,2)},  
  543.         async: false,  
  544.         dataType: 'json',    
  545.         success: function(data){  
  546.         var dimIdList = data.dimIdList;   
  547.         if(dimIdList.length>0){  
  548.         jQuery.each(dimIdList, function(i,item){    
  549.             dimId = item;  
  550.         });  
  551.         if(dimId.length>0 && dimId.length<=2){  
  552.             cui("#parentUnit").setValue(dimId);  
  553.         }else if(dimId.length>=4){  
  554.             cui("#childUnit").setValue(dimId);  
  555.         }  
  556.         }else{  
  557.             dimId ='00';  
  558.             cui("#parentUnit").setValue(dimId);  
  559.             cui("#childUnit").setValue('');  
  560.         }  
  561.         }  
  562.     });  
  563.     var param4 = [dimId,tjnybm,assetType];  
  564.     myChart.showLoading();  
  565.     jQuery.ajax({  
  566.         type: "POST",  
  567.         url: "/web/assetmonitoring/assetScaleChart/queryAssetDistribution.bpms",  
  568.         data: {'param':param4},  
  569.         traditional:true,  
  570.         async: true,  
  571.         dataType: 'json',    
  572.         success: function(data){  
  573.         var distributionList =  data.distributionList;    
  574.         var dydj =[];  
  575.         var total = [];  
  576.         var add =[];  
  577.         jQuery.each(distributionList, function(i,item){    
  578.             dydj.push(item.dimName);  
  579.             total.push(item.assetTotal);  
  580.             add.push(item.assetNew);  
  581.         });  
  582.         option.series[0].data = total;  
  583.         option.series[1].data = add;  
  584.         option.xAxis[0].data = dydj;  
  585.         option.title.subtext = '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'+params.name.substr(0,2);  
  586.         myChart.setOption(option);  
  587.         myChart.hideLoading();  
  588.         }  
  589.     });    
  590.     myChart1.showLoading();  
  591.     jQuery.ajax({  
  592.     type: "POST",  
  593.     url: "/web/assetmonitoring/assetScaleChart/queryAssetTrend.bpms",  
  594.     data: {'param':param4},  
  595.     traditional:true,  
  596.     async: true,  
  597.     dataType: 'json',    
  598.     success: function(data){  
  599.     var trendList = data.trendList;   
  600.     var tjnybm3 =[];  
  601.     var total = [];  
  602.     var add =[];  
  603.     jQuery.each(trendList, function(i,item){    
  604.         tjnybm3.push(item.tjnybm);  
  605.         total.push(item.assetTotal);  
  606.         add.push(item.assetNew);  
  607.     });  
  608.     option1.series[0].data = total;  
  609.     option1.series[1].data = add;  
  610.     option1.xAxis[0].data = tjnybm3;  
  611.     option1.title.subtext = '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'+params.name.substr(0,2);  
  612.     myChart1.setOption(option1);  
  613.     myChart1.hideLoading();  
  614.     }  
  615.     })  
  616.       
  617.     //调用列表刷新  
  618.     if(dimId.length>0 && dimId.length<=2){  
  619.         buttonClick()  
  620.     }else{  
  621.        cui("#assetScaleGrid").loadData();  
  622.        sumTypebuttonClick(assetType,true)  
  623.     }    
  624.       
  625. }});  
  626. }  
  627.   
  628.   
  629. //获取Map需加载的mapJSON名,组织编号,散点坐标数据  
  630. function getMapJson(provinceCode){  
  631.     var mapJsonCode ={};  
  632.     var mapJsonName ={};  
  633.     var geoCoordMap1 ={};  
  634.     if(provinceCode == '00'){  
  635.         mapJsonName.name ='NW';  
  636.         mapJsonCode.code = '00';  
  637.         geoCoordMap1.geo = {  
  638.                 '广东':[114.105952,24.004227],  
  639.                 '云南':[102.212251,24.240609],  
  640.                 '贵州':[106.713478,26.578343],  
  641.                 '海南':[109.50119,19.231971],  
  642.                 '广西':[108.720004,23.22402],  
  643.                 '广州':[112.622414,22.519643],  
  644.                 '深圳':[114.085947,22.247],  
  645.                 '超高压':[114.985947,22.747]  
  646.         };  
  647.     }else if(provinceCode == '03' || provinceCode=="广东"){  
  648.             mapJsonCode.code = '03';  
  649.             mapJsonName.name  ='GD';  
  650.             geoCoordMap1.geo = {  
  651.                     '汕头':[116.608463,23.37102],  
  652.                     '佛山':[113.122717,23.028762],  
  653.                     '珠海':[113.553986,22.224979],  
  654.                     '深圳':[114.085947,22.547],  
  655.                     '韶关':[113.591544,24.801322],  
  656.                     '广州':[113.280637,23.125178],  
  657.                     '肇庆':[112.472529,23.451546],  
  658.                     '梅州':[116.117582,24.299112],  
  659.                     '江门':[112.594942,22.090431],  
  660.                     '湛江':[110.364977,21.274898],  
  661.                     '茂名':[110.919229,21.659751],  
  662.                     '惠州':[114.412599,23.079404],  
  663.                     '阳江':[111.975107,21.859222],  
  664.                     '河源':[114.697802,23.746266],  
  665.                     '中山':[113.382391,22.521113],  
  666.                     '潮州':[116.832301,23.861701],  
  667.                     '揭阳':[116.055733,23.443778],  
  668.                     '云浮':[112.044439,22.929801],  
  669.                     '汕尾':[115.364238,22.774485],  
  670.                     '东莞':[113.746262,23.046237],  
  671.                     '清远':[113.051227,23.685022]  
  672.             };    
  673.     }else if(provinceCode == '04' || provinceCode=="广西" ){  
  674.             mapJsonName.name  ='GX';  
  675.             mapJsonCode.code = '04';  
  676.             geoCoordMap1.geo = {  
  677.                     '柳州':[109.411703,24.314617],  
  678.                     '防城港':[108.345478,21.614631],  
  679.                     '梧州':[111.297604,23.474803],  
  680.                     '桂林':[110.299121,25.274215],  
  681.                     '北海':[109.119254,21.473343],  
  682.                     '南宁':[108.320004,22.82402],  
  683.                     '贵港':[109.602146,23.0936],  
  684.                     '贺州':[111.552056,24.414141],  
  685.                     '百色':[106.616285,23.897742],  
  686.                     '钦州':[108.624175,21.967127],  
  687.                     '玉林':[110.154393,22.63136],  
  688.                     '来宾':[109.229772,23.733766],  
  689.                     '崇左':[107.353926,22.404108],  
  690.                     '河池':[108.062105,24.695899]  
  691.             };    
  692.     }else if(provinceCode == '05'  || provinceCode=="云南"){  
  693.             mapJsonName.name  ='YN';  
  694.             mapJsonCode.code = '05' ;  
  695.             geoCoordMap1.geo = {  
  696.                     '保山':[99.167133,25.111802],  
  697.                     '曲靖':[103.797851,25.501557],  
  698.                     '昭通':[103.717216,27.336999],  
  699.                     '昆明':[102.712251,25.040609],  
  700.                     '丽江':[100.233026,26.872108],  
  701.                     '玉溪':[102.543907,24.350461],  
  702.                     '临沧':[100.08697,23.886567],  
  703.                     '楚雄':[101.546046,25.041988],  
  704.                     '文山':[104.24401,23.66951],  
  705.                     '文山电力':[104.24401,23.26951],  
  706.                     '大理':[100.225668,25.589449],  
  707.                     '红河':[103.384182,23.366775],  
  708.                     '普洱':[100.972344,22.777321],  
  709.                     '版纳':[100.797941,22.001724],  
  710.                     '德宏':[98.578363,24.436694],  
  711.                     '怒江':[98.854304,25.850949],  
  712.                     '迪庆':[99.706463,27.826853]  
  713.             };    
  714.     }else if(provinceCode == '06'  || provinceCode=="贵州"){  
  715.             mapJsonName.name  ='GZ';  
  716.             mapJsonCode.code = '06';  
  717.             geoCoordMap1.geo = {  
  718.                     '安顺':[105.932188,26.245544],  
  719.                     '贵阳':[106.713478,26.578343],  
  720.                     '输电运行检修分公司':[106.713478,26.878343],  
  721.                     '六盘水':[104.846743,26.584643],  
  722.                     '铜仁':[109.191555,27.718346],  
  723.                     '毕节':[105.28501,27.301693],  
  724.                     '遵义':[106.937265,27.706626],  
  725.                     '兴义':[104.897971,25.08812],  
  726.                     '凯里':[107.977488,26.583352],  
  727.                     '都匀':[107.517156,26.258219],  
  728.                     '贵安':[106.217156,26.358219]  
  729.             };    
  730.     }else if(provinceCode == '07'  || provinceCode=="海南"){  
  731.             mapJsonName.name  ='HN';  
  732.             mapJsonCode.code = '07';  
  733.             geoCoordMap1.geo = {  
  734.                     '海口':[110.33119,20.031971],  
  735.                     '儋州':[109.576782,19.517486],  
  736.                     '琼海':[110.466785,19.246011],  
  737.                     '三亚':[109.508268,18.247872],  
  738.                     '五指山':[109.516662,18.776921],  
  739.                     '文昌':[110.753975,19.612986],  
  740.                     '东方':[108.653789,19.10198],  
  741.                     '万宁':[110.388793,18.796216],  
  742.                     '定安':[110.349235,19.684966],  
  743.                     '屯昌':[110.102773,19.362916],  
  744.                     '澄迈':[110.007147,19.737095],  
  745.                     '临高':[109.687697,19.908293],  
  746.                     '昌江':[109.053351,19.260968],  
  747.                     '白沙':[109.452606,19.224584],  
  748.                     '陵水':[110.037218,18.505006],  
  749.                     '乐东':[109.175444,18.74758],  
  750.                     '保亭':[109.70245,18.636371],  
  751.                     '琼中':[109.839996,19.03557],  
  752.                     '三沙':[112.34882,16.831039]  
  753.             };    
  754.     }else if(provinceCode == '08'  || provinceCode=="广州"){  
  755.             mapJsonName.name  ='GZS';  
  756.             mapJsonCode.code = '08';  
  757.             geoCoordMap1.geo = {  
  758.                     '荔湾':[113.243038,23.124943],  
  759.                     '越秀':[113.280714,23.125624],  
  760.                     '海珠':[113.262008,23.103131],  
  761.                     '白云':[113.262831,23.162281],  
  762.                     '天河':[113.335367,23.13559],  
  763.                     '黄埔':[113.450761,23.103239],  
  764.                     '南沙':[113.53738,22.794531],  
  765.                     '番禺':[113.364619,22.938582],  
  766.                     '花都':[113.211184,23.39205],  
  767.                     '增城':[113.829579,23.290497],  
  768.                     '从化':[113.587386,23.545283]  
  769.             };    
  770.     }else if(provinceCode == '09'  || provinceCode=="深圳"){  
  771.             mapJsonName.name  ='SZ';  
  772.             mapJsonCode.code = '09';  
  773.             geoCoordMap1.geo = {  
  774.                     '福田':[114.05096,22.541009],  
  775.                     '龙岗':[114.251372,22.721511],  
  776.                     '盐田':[114.235366,22.555069],  
  777.                     '罗湖':[114.123885,22.555341],  
  778.                     '南山':[113.92943,22.531221],  
  779.                     '宝安':[113.828671,22.754741],  
  780.                     '龙华':[114.044346,22.691963],  
  781.                     '坪山':[114.338441,22.69423]  
  782.             };    
  783.     }else if(provinceCode == '01'  || provinceCode=="超高压"){  
  784.         mapJsonName.name  ='NW';  
  785.         mapJsonCode.code = '01';  
  786.         geoCoordMap1.geo = {  
  787.                 '广州局':[112.622414,22.719643],  
  788.                 '贵阳局':[106.713478,26.578343],  
  789.                 '南宁局':[108.320004,22.82402],  
  790.                 '柳州局':[109.411703,24.314617],  
  791.                 '梧州局':[111.297604,23.474803],  
  792.                 '百色局':[106.616285,23.897742],  
  793.                 '天生桥局':[104.897971,25.08812],  
  794.                 '曲靖局':[103.797851,25.501557],  
  795.                 '昆明局':[102.712251,25.040609],  
  796.                 '大理局':[100.225668,25.589449]  
  797.         };    
  798.     }  
  799.         var json=[];  
  800.         json.push(mapJsonName);  
  801.         json.push(geoCoordMap1);  
  802.         json.push(mapJsonCode);  
  803.         return json;  
  804. }  

相关推荐