bing.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <div ref="chartDom" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script>
  5. import * as echarts from "echarts";
  6. export default {
  7. name: "EChartsComponent",
  8. props: {
  9. result: {
  10. type: Object,
  11. default: () => ({
  12. normal: 0,
  13. danger: 0,
  14. }),
  15. },
  16. },
  17. data() {
  18. return {
  19. myChart: null,
  20. };
  21. },
  22. mounted() {
  23. console.log(this.result, "this.result");
  24. this.initChart(); // 初始化图表
  25. },
  26. watch: {
  27. // 监听 result 的变化
  28. result(newValue) {
  29. console.log("result changed", newValue);
  30. this.updateChart(newValue); // 更新图表
  31. },
  32. },
  33. methods: {
  34. initChart() {
  35. const chartDom = this.$refs.chartDom;
  36. this.myChart = echarts.init(chartDom);
  37. const option = {
  38. title: {
  39. text: "状态统计图",
  40. left: "center",
  41. textStyle: {
  42. fontSize: 14, // 设置字体大小
  43. fontWeight: "600", // 可选,设置字体粗细
  44. color: "#333", // 可选,设置字体颜色
  45. },
  46. },
  47. tooltip: {
  48. trigger: "item",
  49. formatter: "{b}: {c} 次 ({d}%)", // 显示次数和百分比
  50. },
  51. series: [
  52. {
  53. name: "状态次数",
  54. type: "pie",
  55. radius: ["40%", "60%"], // 设置内外半径来形成圆环
  56. data: [
  57. { value: 0, name: "正常", itemStyle: { color: "#8AE359" } },
  58. { value: 0, name: "危险", itemStyle: { color: "#EECB5F" } },
  59. ],
  60. emphasis: {
  61. itemStyle: {
  62. shadowBlur: 10,
  63. shadowOffsetX: 0,
  64. shadowColor: "rgba(0, 0, 0, 0.5)",
  65. },
  66. },
  67. label: {
  68. // formatter: "{b}: {c} 次", // 在图表中显示次数
  69. },
  70. },
  71. ],
  72. };
  73. this.myChart.setOption(option);
  74. },
  75. // 更新图表方法
  76. updateChart(newResult) {
  77. console.log(newResult, "111111111111111111");
  78. const option = {
  79. title: {
  80. text: "状态统计图",
  81. left: "center",
  82. textStyle: {
  83. fontSize: 14, // 设置字体大小
  84. fontWeight: "600", // 可选,设置字体粗细
  85. color: "#333", // 可选,设置字体颜色
  86. },
  87. },
  88. tooltip: {
  89. trigger: "item",
  90. // formatter: "{b}: {c} 次 ({d}%)", // 显示次数和百分比
  91. },
  92. series: [
  93. {
  94. name: "状态次数",
  95. type: "pie",
  96. radius: ["40%", "60%"], // 设置内外半径来形成圆环
  97. data: [
  98. {
  99. value: this.result.normal || 0,
  100. name: "正常",
  101. itemStyle: { color: "#8AE359" },
  102. },
  103. {
  104. value: this.result.danger || 0,
  105. name: "危险",
  106. itemStyle: { color: "#EECB5F" },
  107. },
  108. ],
  109. emphasis: {
  110. itemStyle: {
  111. shadowBlur: 10,
  112. shadowOffsetX: 0,
  113. shadowColor: "rgba(0, 0, 0, 0.5)",
  114. },
  115. },
  116. label: {
  117. // formatter: "{b}: {c} 次", // 在图表中显示次数
  118. },
  119. },
  120. ],
  121. };
  122. // 更新图表
  123. this.myChart.setOption(option);
  124. },
  125. },
  126. };
  127. </script>
  128. <style scoped>
  129. /* 可根据需求添加样式 */
  130. </style>