90c2393ea83bbb891d6229f8314ffecc9cf7b7d0.svn-base 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>demo.html</title>
  5. <meta name="keywords" content="keyword1,keyword2,keyword3">
  6. <meta name="description" content="this is my page">
  7. <meta name="content-type" content="text/html; charset=UTF-8">
  8. <script type="text/javascript" src="/nwyj/page/cockpit/context.js"></script>
  9. <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/jquery.js"></script>
  10. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/echarts-all.js"></script>
  11. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/chart/bar.js"></script>
  12. <script type="text/javascript" src=" /nwyj/page/cockpit/cockpit_echart.js"></script>
  13. <style type="text/css">
  14. html,body{
  15. width: 100%;
  16. height: 100%;
  17. }
  18. ._main{
  19. height: 100%;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  25. <div id="main" class="_main"</div>
  26. <script type="text/javascript">
  27. var leArr=['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'];
  28. var xArr = ['周一','周二','周三','周四','周五','周六','周日']
  29. var sArr = [
  30. {
  31. name:'直接访问',
  32. type:'bar',
  33. data:[320, 332, 301, 334, 390, 330, 320]
  34. },
  35. {
  36. name:'邮件营销',
  37. type:'bar',
  38. stack: '广告',
  39. data:[120, 132, 101, 134, 90, 230, 210]
  40. },
  41. {
  42. name:'联盟广告',
  43. type:'bar',
  44. stack: '广告',
  45. data:[220, 182, 191, 234, 290, 330, 310]
  46. },
  47. {
  48. name:'视频广告',
  49. type:'bar',
  50. stack: '广告',
  51. data:[150, 232, 201, 154, 190, 330, 410]
  52. },
  53. {
  54. name:'搜索引擎',
  55. type:'bar',
  56. data:[862, 1018, 964, 1026, 1679, 1600, 1570],
  57. markLine : {
  58. itemStyle:{
  59. normal:{
  60. lineStyle:{
  61. type: 'dashed'
  62. }
  63. }
  64. },
  65. data : [
  66. [{type : 'min'}, {type : 'max'}]
  67. ]
  68. }
  69. },
  70. {
  71. name:'百度',
  72. type:'bar',
  73. barWidth : 5,
  74. stack: '搜索引擎',
  75. data:[620, 732, 701, 734, 1090, 1130, 1120]
  76. },
  77. {
  78. name:'谷歌',
  79. type:'bar',
  80. stack: '搜索引擎',
  81. data:[120, 132, 101, 134, 290, 230, 220]
  82. },
  83. {
  84. name:'必应',
  85. type:'bar',
  86. stack: '搜索引擎',
  87. data:[60, 72, 71, 74, 190, 130, 110]
  88. },
  89. {
  90. name:'其他',
  91. type:'bar',
  92. stack: '搜索引擎',
  93. data:[62, 82, 91, 84, 109, 110, 120]
  94. }
  95. ]
  96. var aa={"title":"",
  97. "unit":"单位:条",
  98. "leArr":["500kV已恢复线路跳闸","500kV未恢复线路跳闸","220kV已恢复线路跳闸","220kV未恢复线路跳闸",
  99. "110kV已恢复线路跳闸","110kV未恢复线路跳闸","35kV已恢复线路跳闸",
  100. "35kV未恢复线路跳闸","10kV已恢复线路跳闸","10kV未恢复线路跳闸"],
  101. "xArr":["清远供电局","江门供电局","茂名供电局"],
  102. "sArr":[{"name":"500kV已恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局FIVE"},
  103. {"name":"500kV未恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局FIVE"},
  104. {"name":"220kV已恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局FOUR"},
  105. {"name":"220kV未恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局FOUR"},
  106. {"name":"110kV已恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局THREE"},
  107. {"name":"110kV未恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局THREE"},
  108. {"name":"35kV已恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局TWO"},
  109. {"name":"35kV未恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局TWO"},
  110. {"name":"10kV已恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局ONE"},
  111. {"name":"10kV未恢复线路跳闸","type":"bar","data":[0,0,0],"stack":"清远供电局ONE"}]}
  112. $(function(){
  113. var echart=getEchart($("#main"),getOption,{leArr:aa.leArr,xArr:aa.xArr,sArr:aa.sArr});
  114. });
  115. </script>
  116. </body>
  117. </html>