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

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

代码片段：

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

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

代码片段：

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

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

  1. 饼图、柱形图、堆积柱、折线图、散点图，到底应该怎么选？

    "随着数字经济的发展,各行业的数据都出现了爆炸式的增长,如何快速从海量数据中提取出有效信息,最大化地挖掘数据价值,是所有转型的企业都在面临的问题." 想要快速直观地以易于理解.内容 ...

  2. label mpchart 饼图_运用matplotlib绘制折线图、散点图、饼图、柱形图的定义代码以及案例详解...

    从导入数据开始 这里我们有一个现成的数据表包,现在我们所处环境是pycharm,安装环境是annaconda3环境,我们将通过这个数据表包来进行数据分析,运用matplotlib绘制折线图.散点图.饼 ...

  3. Python dataframe绘制饼图_运用matplotlib绘制折线图、散点图、饼图、柱形图的定义代码以及案例详解...

    从导入数据开始 这里我们有一个现成的数据表包,现在我们所处环境是pycharm,安装环境是annaconda3环境,我们将通过这个数据表包来进行数据分析,运用matplotlib绘制折线图.散点图.饼 ...

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

    用Jfree实现条形柱状图表,java代码实现.可经常用于报表的制作,代码自动生成后可以自由查看.可以自由配置图表的各个属性,用来达到自己的要求和目的.本文给大家介绍使用java实现各种数据统计图(柱 ...

  5. Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）

    项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...

  6. Matplotlib常见图形绘制（折线图、散点图、柱状图、直方图、饼图）

    Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义 折线图:以折线的上升或下降来表示 ...

  7. python简单代码画曲线图教程-Python绘制折线图和散点图的详细方法介绍（代码示例）...

    本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...

  8. 可视化框架、Axure原型、大屏可视化、图表组件、图表元件库、统计图表、数据可视化模板、条形图、折线图、散点图、时间轴、仪表盘、饼图、散点图、雷达图、高山图、登录模板、弹窗、弹幕、预警、散点图

    可视化框架.数据可视化综合管理平台.大屏可视化.图表组件.图表元件库.统计图表.数据可视化模板.条形图.折线图.散点图.时间轴.仪表盘.饼图.散点图.雷达图.高山图.登录模板.弹窗.弹幕.预警.散点图 ...

  9. 【数据挖掘】2022数据挖掘之Matplotlib完整使用（折线图、散点图、柱状图、直方图、饼图）

    数据挖掘之Matplotlib 一.数据挖掘基础环境安装与使用 1.库的安装 2.软件推荐(Jupyter Notebook) 3.Jupyter常用快捷键 4.Jupyter中的cell操作 二.数 ...

最新文章

  1. python画直方图代码-python plotly画柱状图代码实例
  2. [Git] 001 初识 Git 与 GitHub 之新建仓库
  3. jap和java有关系吗_hibernate与jpa有什么区别和联系？
  4. 专属微信二维码python制作_如何利用Python制作简单的公众号二维码关注图
  5. [渝粤教育] 盐城师范学院 光学 参考 资料
  6. 深入浅出oracle锁原理篇
  7. linux英伟达显卡偶尔加载失败,Ubuntu 8.10环境下出现NVIDIA显卡无法正常工作的解决方法...
  8. 力扣669. 修剪二叉搜索树（JavaScript）
  9. colormap保存 matlab_matlab中自定义colormap的保存与调用
  10. litepal更好的操作sqlite3，配置与基本操作
  11. Atitit 互联网行业如何提升收入 经济学概论读后感 attilax总结 1. 收入“四 位一体”的理论（工资、利润、利息、地租） 1 2. 提升收入，就要提升这4个象限的收入 1 3. 如
  12. Rust：FFI 编程中的 CStr 和 CString
  13. Java + OpenCV 实现图片合成(JavaCV)
  14. USACO 2021-2022 December Contest Bronze 题解
  15. 国密双证书签发及国密数据信封解析
  16. 微信支付 postman_微信收款商业版有什么功能？微信智慧经营2.0原来可以这么玩！...
  17. Charles介绍与使用
  18. MacBook上有哪些适合运营人用的高效的软件工具和使用技巧
  19. C++：二维数组参数传递
  20. Modifiers should be declared in the correct order 修饰符应按正确的顺序声明

热门文章

  1. hostapd的分析
  2. .\venv\Scripts\activate : 无法加载文件 venv\Scripts\activate.ps1，因为在此系统上禁止运行脚本。 win10启动venv报错
  3. MAC安装了mumu安卓模拟器，但无法检测到该模拟器
  4. c语言iq测试,标准iq测试题答案
  5. 深航协国际物流商会2020年第三季度理事会顺利召开
  6. TOEFL资源帖（一）gter
  7. Tainted: G O 分析（Tainted kernels）
  8. python手机中文版下载_Python编程下载_Python中文版下载v2.7.18_360手机助手专区
  9. EHCI和OHCI,UHCI的比较和区别
  10. 时间复杂度到底怎么算