Dashboard2.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div class="chart" :id="id"></div>
  3. </template>
  4. <script>
  5. import util from "@/helper/util.js";
  6. import partten from "@/helper/partten.js";
  7. import * as echarts from "echarts";
  8. export default {
  9. name: "Dashboard-chart",
  10. componentName: "Dashboard-chart",
  11. props: {
  12. width: {
  13. type: String,
  14. default: "100%",
  15. },
  16. height: {
  17. type: String,
  18. default: "100%",
  19. },
  20. name: {
  21. type: String,
  22. default: "万KWH",
  23. },
  24. value: {
  25. type: Number,
  26. default: 50,
  27. },
  28. },
  29. data() {
  30. return {
  31. id: "",
  32. chart: null,
  33. };
  34. },
  35. computed: {},
  36. methods: {
  37. initChart() {
  38. let themeName = '';
  39. this.$store.state.themeName === "dark" ? themeName = true : themeName = false;
  40. let chart = echarts.init(this.$el);
  41. let value = this.value;
  42. let option = {
  43. grid: {
  44. top: 8,
  45. bottom: -16,
  46. left: 8,
  47. right: 8,
  48. },
  49. series: [
  50. {
  51. type: "gauge", //刻度轴表盘
  52. radius: "115%", //刻度盘的大小
  53. center: ["50%", "75%"],
  54. startAngle: 180, //开始刻度的角度
  55. endAngle: 0, //结束刻度的角度
  56. axisLine: {
  57. show: true,
  58. lineStyle: {
  59. width: 8,
  60. color: [
  61. [0, partten.getColor("gray") + "33"],
  62. [value / 100,themeName ? partten.getColor("green") : partten.getColor("blue")],
  63. [1, partten.getColor("gray") + "33"],
  64. ],
  65. },
  66. },
  67. splitLine: {
  68. show: false,
  69. },
  70. axisLabel: {
  71. show: false,
  72. },
  73. axisTick: {
  74. show: false,
  75. },
  76. pointer: {
  77. show: false,
  78. },
  79. title: {
  80. show: true,
  81. offsetCenter: [0, "-40%"],
  82. textStyle: {
  83. color: partten.getColor("gray"),
  84. fontSize: util.vh(12),
  85. },
  86. },
  87. detail: {
  88. show: true,
  89. offsetCenter: [0, "0%"],
  90. color: "#ffffff",
  91. formatter: function(params) {
  92. return params;
  93. },
  94. textStyle: {
  95. color: themeName ? partten.getColor("green") : partten.getColor("blue"),
  96. fontSize: util.vh(16),
  97. },
  98. },
  99. data: [
  100. {
  101. name: "万KWh",
  102. value: value,
  103. },
  104. ],
  105. },
  106. {
  107. type: "gauge",
  108. radius: "115%",
  109. center: ["50%", "75%"],
  110. startAngle: 180,
  111. endAngle: 0,
  112. axisLine: {
  113. show: true,
  114. lineStyle: {
  115. width: 1,
  116. color: [
  117. [this.value / 100, themeName ? partten.getColor("green") : partten.getColor("blue")],
  118. [1, "#fff5"],
  119. ],
  120. },
  121. },
  122. splitLine: {
  123. show: false,
  124. },
  125. axisLabel: {
  126. show: false,
  127. },
  128. axisTick: {
  129. show: false,
  130. },
  131. detail: { show: false },
  132. },
  133. ],
  134. };
  135. chart.setOption(option);
  136. },
  137. },
  138. created() {
  139. this.id = "pie-chart-" + util.newGUID();
  140. },
  141. mounted() {
  142. this.$nextTick(() => {
  143. this.$el.style.width = this.width;
  144. this.$el.style.height = this.height;
  145. this.initChart();
  146. });
  147. },
  148. updated() {
  149. this.$nextTick(() => {
  150. this.initChart();
  151. });
  152. },
  153. watch: {
  154. "$store.state.themeName"() {
  155. this.initChart();
  156. },
  157. },
  158. };
  159. </script>
  160. <style lang="less">
  161. .chart {
  162. width: 100%;
  163. height: 100%;
  164. display: inline-block;
  165. }
  166. </style>