dianfei.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. var chart;
  2. var consumptionData = [
  3. {
  4. "date": "2-25",
  5. "value1":12.5,
  6. "value2":0.9,
  7. "value3":9.7,
  8. "total":23.1,
  9. "color1": "#FF6600",
  10. "color2": "#04D215",
  11. "color3": "#0D8ECF"
  12. },
  13. {
  14. "date": "2-26",
  15. "value1": 14.3,
  16. "value2":0.8,
  17. "value3":9.5,
  18. "total":24.6,
  19. "color1": "#FF6600",
  20. "color2": "#04D215",
  21. "color3": "#0D8ECF"
  22. },
  23. {
  24. "date": "2-27",
  25. "value1": 13.4,
  26. "value2": 0.9,
  27. "value3": 9.9,
  28. "total": 24.2,
  29. "color1": "#FF6600",
  30. "color2": "#04D215",
  31. "color3": "#0D8ECF"
  32. },
  33. {
  34. "date": "2-28",
  35. "value1": 12.8,
  36. "value2": 0.7,
  37. "value3": 9.7,
  38. "total": 23.2,
  39. "color1": "#FF6600",
  40. "color2": "#04D215",
  41. "color3": "#0D8ECF"
  42. },
  43. {
  44. "date": "2-29",
  45. "value1":15.0,
  46. "value2": 0.8,
  47. "value3": 9.6,
  48. "total": 25.4,
  49. "color1": "#FF6600",
  50. "color2": "#04D215",
  51. "color3": "#0D8ECF"
  52. },
  53. {
  54. "date": "3-1",
  55. "value1": 14.1,
  56. "value2": 0.8,
  57. "value3": 10.0,
  58. "total":24.9,
  59. "color1": "#FF6600",
  60. "color2": "#04D215",
  61. "color3": "#0D8ECF"
  62. },
  63. {
  64. "date": "3-2",
  65. "value1": 13.5,
  66. "value2":0.8,
  67. "value3":9.8,
  68. "total":24.1,
  69. "color1": "#FF6600",
  70. "color2": "#04D215",
  71. "color3": "#0D8ECF"
  72. },
  73. {
  74. "date": "3-3",
  75. "value1": 12.6,
  76. "value2":0.6,
  77. "value3":9.6,
  78. "total":22.8,
  79. "color1": "#FF6600",
  80. "color2": "#04D215",
  81. "color3": "#0D8ECF"
  82. }
  83. ];
  84. AmCharts.ready(function () {
  85. // SERIAL CHART
  86. chart = new AmCharts.AmSerialChart();
  87. chart.dataProvider = consumptionData;
  88. chart.categoryField = "date";
  89. chart.startDuration = 1;
  90. // AXES
  91. // category
  92. var categoryAxis = chart.categoryAxis;
  93. categoryAxis.labelRotation = 45; // this line makes category values to be rotated
  94. categoryAxis.gridPosition = "start";
  95. // GRAPH
  96. var graph1 = new AmCharts.AmGraph();
  97. graph1.valueField = "value1";
  98. graph1.colorField = "color1";
  99. graph1.balloonText = "<b>主设备: [[value]]</b>";
  100. graph1.type = "column";
  101. graph1.lineAlpha = 0;
  102. graph1.fillAlphas = 1;
  103. chart.addGraph(graph1);
  104. var graph2 = new AmCharts.AmGraph();
  105. graph2.valueField = "value2";
  106. graph2.colorField = "color2";
  107. graph2.balloonText = "<b>照明: [[value]]</b>";
  108. graph2.type = "column";
  109. graph2.lineAlpha = 0;
  110. graph2.fillAlphas = 1;
  111. chart.addGraph(graph2);
  112. var graph3 = new AmCharts.AmGraph();
  113. graph3.valueField = "value3";
  114. graph3.colorField = "color3";
  115. graph3.balloonText = "<b>空调: [[value]]</b>";
  116. graph3.type = "column";
  117. graph3.lineAlpha = 0;
  118. graph3.fillAlphas = 1;
  119. chart.addGraph(graph3);
  120. // line
  121. var graphl = new AmCharts.AmGraph();
  122. graphl.type = "line";
  123. graphl.title = "总能耗";
  124. graphl.lineColor = "#fcd202";
  125. graphl.valueField = "total";
  126. graphl.lineThickness = 3;
  127. graphl.bullet = "round";
  128. graphl.bulletBorderThickness = 3;
  129. graphl.bulletBorderColor = "#fcd202";
  130. graphl.bulletBorderAlpha = 1;
  131. graphl.bulletColor = "#ffffff";
  132. graphl.dashLengthField = "dashLengthLine";
  133. graphl.balloonText = "<span style='font-size:13px;'>总能耗:<b>[[value]]</b> [[additional]]</span>";
  134. chart.addGraph(graphl);
  135. // CURSOR
  136. var chartCursor = new AmCharts.ChartCursor();
  137. chartCursor.cursorAlpha = 0;
  138. chartCursor.zoomable = false;
  139. chartCursor.categoryBalloonEnabled = false;
  140. chart.addChartCursor(chartCursor);
  141. chart.creditsPosition = "top-right";
  142. chart.write("consumptiondiv");
  143. });