evEnergySavingRate.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div id="box3" style="width:100%;height:100%;"></div>
  3. </template>
  4. <script>
  5. import echarts from "echarts";
  6. export default {
  7. data() {
  8. return {};
  9. },
  10. mounted() {
  11. this.$nextTick(function() {
  12. this.pie(this.energySavingRate, "#box3", ["#00D6B9", "#D5F6F2"]);
  13. });
  14. },
  15. props: ["energySavingRate"],
  16. methods: {
  17. pie(pieData, box, colors) {
  18. const that = this;
  19. const myChart = echarts.init(document.querySelector(box));
  20. const data = pieData;
  21. const option = {
  22. grid: {
  23. top: 5,
  24. bottom: 5
  25. },
  26. color: colors,
  27. series: [
  28. {
  29. name: "valueOfMarket",
  30. type: "pie",
  31. center: ["50%", "50%"],
  32. radius: ["60%", "70%"],
  33. avoidLabelOverlap: false,
  34. hoverAnimation: false,
  35. label: {
  36. normal: {
  37. show: true,
  38. position: "center",
  39. color: "#000000",
  40. fontSize: 20,
  41. lineHeight: 0,
  42. formatter: "{b}\n{c}%"
  43. }
  44. },
  45. data: [
  46. {
  47. value: data,
  48. label: {
  49. normal: {
  50. show: true
  51. }
  52. }
  53. },
  54. {
  55. value: 100 - data,
  56. name: "",
  57. label: {
  58. normal: {
  59. show: false
  60. }
  61. }
  62. }
  63. ]
  64. }
  65. ]
  66. };
  67. myChart.setOption(option);
  68. }
  69. }
  70. };
  71. </script>