BJ_web_developers / dyitoc

Blame view

src/components/halfPieChart.vue 2.99 KB
Edit Raw Normal View History
78a3ba7b   liuqimichale   泊位 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
  <template>
    <div :class="className" :style="{height:height,width:width}"></div>
  </template>
  
  <script>
  import echarts from 'echarts'
  
  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '../utils/debounce'
  
  export default {
    name: 'halfPieChart',
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
961bdd27   liuqimichale   道闸 
24
 
        default: '100%'
78a3ba7b   liuqimichale   泊位 
25
26
27
28
29
30
31
32
33
34
35
36
 
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
961bdd27   liuqimichale   道闸 
37
 
        chart: null
78a3ba7b   liuqimichale   泊位 
38
39
40
 
      }
    },
    watch: {
adf82b69   liuqimichale   调取接口 
41
42
43
44
 
      chartData: function () {
        this.$nextTick(()=>{
          this.initChart()
        })
78a3ba7b   liuqimichale   泊位 
45
46
47
 
      }
    },
    mounted() {
adf82b69   liuqimichale   调取接口 
48
 
      // this.initChart()
78a3ba7b   liuqimichale   泊位 
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
  
      this.chart.dispose()
      this.chart = null
    },
    methods: {
adf82b69   liuqimichale   调取接口 
70
71
 
      setOptions({yData} = {}) {
        console.log(yData[0])
78a3ba7b   liuqimichale   泊位 
72
73
74
75
76
77
78
79
 
        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },
          series: [
  
            {
78a3ba7b   liuqimichale   泊位 
80
 
              type: 'pie',
961bdd27   liuqimichale   道闸 
81
 
              radius: ['60%', '75%'],
78a3ba7b   liuqimichale   泊位 
82
 
              center: ['50%', '50%'],
961bdd27   liuqimichale   道闸 
83
 
              hoverAnimation:false,
78a3ba7b   liuqimichale   泊位 
84
85
86
87
88
89
90
91
 
              label: {
                show: false
              },
              lableLine: {
                show: false
              },
              data: [
                {
adf82b69   liuqimichale   调取接口 
92
 
                  value: yData[0],
be79dd15   liuqimichale   道闸 
93
 
                  name: '空闲',
78a3ba7b   liuqimichale   泊位 
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                          offset: 0,
                          color: '#FFBA00' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#FF8100' // 100% 处的颜色
                        }]
                      },
                    }
                  }
                },
                {
adf82b69   liuqimichale   调取接口 
109
 
                  value: yData[1],
be79dd15   liuqimichale   道闸 
110
 
                  name: '占有',
78a3ba7b   liuqimichale   泊位 
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                          offset: 0,
                          color: '#00CAFE' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#2772F4' // 100% 处的颜色
                        }]
                      },
                    }
                  }
                },
  
              ],
              animationType: 'scale',
961bdd27   liuqimichale   道闸 
128
 
              animationEasing: 'elasticOut'
78a3ba7b   liuqimichale   泊位 
129
130
131
132
133
134
 
            }
  
          ]
        })
      },
      initChart() {
adf82b69   liuqimichale   调取接口 
135
 
        this.chart = echarts.init(this.$el)
78a3ba7b   liuqimichale   泊位 
136
137
138
139
140
 
        this.setOptions(this.chartData)
      }
    }
  }
  </script>