pieChart.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <div ref="distion" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script>
  5. import * as echarts from "echarts";
  6. export default {
  7. props: {
  8. // className: {
  9. // type: String,
  10. // default: "chart",
  11. // },
  12. // width: {
  13. // type: String,
  14. // default: "100%",
  15. // },
  16. // height: {
  17. // type: String,
  18. // default: "400px",
  19. // },
  20. // perData: {
  21. // type: Array,
  22. // default: () => [
  23. // {
  24. // color: "#01ACFF",
  25. // name: "摄像头",
  26. // value: [39],
  27. // // nAmount: 566557.14,
  28. // },
  29. // ],
  30. // },
  31. },
  32. data() {
  33. return {};
  34. },
  35. mounted() {
  36. this.$nextTick(() => {
  37. this.initChart();
  38. });
  39. },
  40. beforeUnmount() {
  41. window.removeEventListener("resize", this.chart);
  42. },
  43. methods: {
  44. //次数分布折线图
  45. initChart() {
  46. var chart = echarts.init(this.$refs.distion);
  47. var option;
  48. var pie = [
  49. {
  50. value: 50,
  51. name: "正常",
  52. },
  53. {
  54. value: 150,
  55. name: "故障",
  56. },
  57. {
  58. value: 100,
  59. name: "离线",
  60. },
  61. {
  62. value: 100,
  63. name: "预警",
  64. },
  65. {
  66. value: 100,
  67. name: "其他",
  68. },
  69. ];
  70. var totalNum = 0;
  71. pie.forEach(function (value) {
  72. totalNum += value.value;
  73. });
  74. option = {
  75. grid: {
  76. },
  77. title: [
  78. {
  79. text: "{name|" + totalNum + "}\n{val|设备总数}",
  80. top: "center",
  81. left: "center",
  82. textStyle: {
  83. rich: {
  84. name: {
  85. fontSize: 30,
  86. fontWeight: "normal",
  87. color: "#FFFFFF",
  88. fontFamily:"impact",
  89. padding: [0, 0,3,0]
  90. },
  91. val: {
  92. fontSize: 14,
  93. fontWeight: "normal",
  94. color: "#FFFFFF",
  95. padding: [3,0,0, 0]
  96. },
  97. },
  98. },
  99. },
  100. ],
  101. tooltip: {
  102. trigger: "item",
  103. formatter: function (params) {
  104. return (
  105. params.name +
  106. ":" +
  107. params.value +
  108. "<br>占比:" +
  109. params.percent.toFixed(2) +
  110. "%"
  111. );
  112. },
  113. },
  114. // itemStyle:{
  115. // normal: {
  116. // label: {
  117. // show: true,
  118. // position: 'outside',
  119. // color: 'green',
  120. // }
  121. // }
  122. // },
  123. series: [
  124. {
  125. label: {
  126. normal: {
  127. show: true,
  128. formatter: " {b}:{c} ",
  129. },
  130. emphasis: {
  131. show: true,
  132. },
  133. },
  134. name: "访问来源",
  135. radius: ["45%", "67%"],
  136. type: "pie",
  137. data: pie,
  138. },
  139. ],
  140. color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
  141. };
  142. chart.setOption(option);
  143. window.addEventListener("resize", () => {
  144. chart.resize();
  145. });
  146. this.chart = chart;
  147. },
  148. },
  149. };
  150. </script>