evImplementationRate.vue 2.4 KB

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