Echartsadd.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. var myChart;
  2. var myChart2
  3. function addEcharts(DomID)
  4. {
  5. var dom = document.getElementById(DomID);
  6. myChart = echarts.init(dom);
  7. var app = {};
  8. option = null;
  9. var uploadedDataURL = "data/echartsdata.xml";
  10. //myChart.showLoading();
  11. $.get(uploadedDataURL, function (xml) {
  12. //myChart.hideLoading();
  13. var graph = echarts.dataTool.gexf.parse(xml);
  14. /* console.log(graph.nodes);
  15. console.log(graph.links);*/
  16. var categories = [];
  17. for (var i = 0; i < 7; i++) {
  18. categories[i] = {
  19. name: '类目' + i
  20. };
  21. }
  22. graph.nodes.forEach(function (node) {
  23. node.itemStyle = null;
  24. node.value = node.symbolSize;
  25. node.symbolSize /= 1.5;
  26. node.label = {
  27. normal: {
  28. show: node.symbolSize > 0
  29. }
  30. };
  31. node.category = node.attributes.modularity_class;
  32. });
  33. option = {
  34. /* title: {
  35. text: 'Les Miserables',
  36. subtext: 'Circular layout',
  37. top: 'bottom',
  38. left: 'right'
  39. },*/
  40. tooltip: {},
  41. grid:{
  42. bottom:'0',
  43. top:'0'
  44. },
  45. /* legend:
  46. [{
  47. //selectedMode: 'single',
  48. selectedMode: false,
  49. data: categories.map(function (a) {
  50. return a.name;
  51. })
  52. }],*/
  53. animationDurationUpdate: 1500,
  54. animationEasingUpdate: 'quinticInOut',
  55. series : [
  56. {
  57. name: '',
  58. type: 'graph',
  59. layout: 'circular',
  60. circular: {
  61. rotateLabel: true
  62. },
  63. data: graph.nodes,
  64. links: graph.links,
  65. categories: categories,
  66. roam: true,
  67. label: {
  68. normal: {
  69. position: 'right',
  70. formatter: '{b}'
  71. }
  72. },
  73. lineStyle: {
  74. normal: {
  75. color: 'source',
  76. curveness: 0.3
  77. }
  78. }
  79. }
  80. ]
  81. };
  82. myChart.setOption(option);
  83. /* myChart.on('legendselectchanged',function(obj){
  84. //alert(obj);
  85. //var tt=myChart.getOption().series;
  86. //myChart.getOption().series[0].data[0].value=200;
  87. var option = myChart.getOption();
  88. option.series[0].data[0].value=200;
  89. myChart.setOption(option);
  90. //var selected = obj.selected;
  91. //var legend = obj.name;
  92. }); */
  93. }, 'xml');
  94. }
  95. function grabuttonOnclick(value)
  96. {
  97. var option = myChart.getOption();
  98. if(value==20)
  99. {
  100. for(var i=0;i<60;i++)
  101. {
  102. if(i<20)
  103. {
  104. option.series[0].data[i].value=100;
  105. }
  106. else
  107. {
  108. option.series[0].data[i].value=15;
  109. }
  110. }
  111. //myChart.clear();
  112. //var tt=myChart.getOption();
  113. myChart.setOption(option,true);
  114. }
  115. if(value==40)
  116. {
  117. for(var i=0;i<60;i++)
  118. {
  119. if(i>=20&&i<40)
  120. {
  121. option.series[0].data[i].value=100;
  122. }
  123. else
  124. {
  125. option.series[0].data[i].value=15;
  126. }
  127. }
  128. //myChart.clear();
  129. //var tt=myChart.getOption();
  130. myChart.setOption(option,true);
  131. }
  132. if(value==60)
  133. {
  134. for(var i=0;i<60;i++)
  135. {
  136. if(i>40)
  137. {
  138. option.series[0].data[i].value=100;
  139. }
  140. else
  141. {
  142. option.series[0].data[i].value=15;
  143. }
  144. }
  145. //myChart.clear();
  146. //var tt=myChart.getOption();
  147. myChart.setOption(option,true);
  148. }
  149. }
  150. function addEcharts2()
  151. {
  152. var dom = document.getElementById('echarts2');
  153. myChart2 = echarts.init(dom);
  154. var option;
  155. // Generate data
  156. var category = ['首尔-济州岛','札幌-羽田','羽田-福冈','墨尔本-悉尼','桃园-香港','孟买-新德里','冲绳-羽田','北京-虹桥','大阪-东京','里约-圣保罗'];
  157. var barData2 = [700,610,580,500,420,390,385,385,370,365];
  158. var lineData = [53.9,91.6,86.3,76.1,100,46.3,90,100,100,99.8];
  159. //var barData2= [46.1,8.4,13.7,23.9,0,53.7,10,0,0,0.2];
  160. var barData = [377.3,558.76,500.54,319.62,420,180.57,346.5,385,370,357.7];
  161. var barData3= [322.7,51.24, 79.46, 180.38,0, 209.43,38.5,0,0,7.3];
  162. /* for (var i = 0; i < 20; i++) {
  163. var date = new Date(dottedBase += 1000 * 3600 * 24);
  164. category.push([
  165. date.getFullYear(),
  166. date.getMonth() + 1,
  167. date.getDate()
  168. ].join('-'));
  169. var b = Math.random() * 200;
  170. var d = Math.random() * 200;
  171. barData.push(b)
  172. lineData.push(d);
  173. }*/
  174. // option
  175. option = {
  176. /* backgroundColor: '#0f375f',*/
  177. tooltip: {
  178. trigger: 'axis',
  179. axisPointer: {
  180. type: 'shadow',
  181. label: {
  182. show: true,
  183. backgroundColor: '#333'
  184. }
  185. }
  186. },
  187. legend: {
  188. data: ['全服务','总计','全服务百分比'],
  189. bottom: '0',
  190. textStyle: {
  191. color: '#ccc'
  192. }
  193. },
  194. xAxis: {
  195. data: category,
  196. axisLine: {
  197. lineStyle: {
  198. color: '#ccc'
  199. }
  200. },
  201. axisLabel: {
  202. interval:0,
  203. rotate:40
  204. }
  205. },
  206. yAxis: {
  207. splitLine: {show: false},
  208. axisLine: {
  209. lineStyle: {
  210. color: '#ccc'
  211. }
  212. }
  213. },
  214. grid:{
  215. bottom:'20%'
  216. },
  217. series: [
  218. {
  219. name: '全服务百分比',
  220. type: 'line',
  221. smooth: true,
  222. showAllSymbol: true,
  223. symbol: 'emptyCircle',
  224. symbolSize: 15,
  225. data: lineData
  226. },
  227. {
  228. name: '全服务',
  229. type: 'bar',
  230. barWidth: 14,
  231. itemStyle: {
  232. normal: {
  233. barBorderRadius: 5,
  234. color: new echarts.graphic.LinearGradient(
  235. 0, 0, 0, 1,
  236. [
  237. {offset: 0, color: '#14c8d4'},
  238. {offset: 1, color: '#43eec6'}
  239. ]
  240. )
  241. }
  242. },
  243. data: barData,
  244. stack: 'test'
  245. },
  246. /* {
  247. name: '底成本',
  248. barGap: '-100%',
  249. type: 'bar',
  250. barWidth: 14,
  251. itemStyle: {
  252. normal: {
  253. barBorderRadius: 5,
  254. color:'rgba(204,255,255,0.7)'
  255. }
  256. },
  257. data: barData3,
  258. stack: 'test'
  259. },*/
  260. {
  261. name: '总计',
  262. type: 'pictorialBar',
  263. symbol: 'rect',
  264. //type: 'bar',
  265. barWidth: 12,
  266. itemStyle: {
  267. normal: {
  268. color: new echarts.graphic.LinearGradient(
  269. 0, 0, 0, 1,
  270. [
  271. {offset: 0, color: 'rgba(0,255,255,1)'},
  272. {offset: 0.5, color: 'rgba(0,255,255,0.4)'},
  273. {offset: 1, color: 'rgba(0,255,255,0)'}
  274. ]
  275. )
  276. }
  277. },
  278. symbolRepeat: true,
  279. symbolSize: [12, 4],
  280. symbolMargin: 1,
  281. z: -10,
  282. data: barData2
  283. }
  284. ]
  285. };
  286. myChart2.setOption(option);
  287. }
  288. function EchartsDiVChange(chlickDIV)
  289. {
  290. if(chlickDIV.id='echarts')
  291. {
  292. if(chlickDIV.style.width>50)
  293. {
  294. chlickDIV.style.width=00+'px';
  295. chlickDIV.style.hight=20+'px';
  296. }
  297. else
  298. {
  299. chlickDIV.style.width=500+'px';
  300. chlickDIV.style.hight=500+'px';
  301. }
  302. }
  303. else
  304. {
  305. if(chlickDIV.style.width>50)
  306. {
  307. chlickDIV.style.width=20+'px';
  308. chlickDIV.style.hight=20+'px';
  309. }
  310. else
  311. {
  312. chlickDIV.style.width=500+'px';
  313. chlickDIV.style.hight=300+'px';
  314. }
  315. }
  316. }