知识点5:

效果图：

html

            <div class="pie_progress">
              <div id="power_cut"></div>
              <div class="power_des">
                停电原因
                <!-- {{tfname1}} -->
              </div>
              <div class="power_value">
                <counter :data="progress1" :config="config6"></counter>
              </div>
            </div>

 js

 //传入数据
　　　　　　this.$http.indi.get(`${this.url}`, {}, (res) => {
            if (res.data.data && res.data.data.length > 0) {
              try {
                this.tfname1 = res.data.data[0].KPI_NAME1
                this.tfname2 = res.data.data[0].KPI_NAME2
                this.tfname3 = res.data.data[0].KPI_NAME3
                this.tfname4 = res.data.data[0].KPI_NAME4
                this.progress1 = res.data.data[0].KPI_VALUE1
                this.progress2 = res.data.data[0].KPI_VALUE2
                this.progress3 = res.data.data[0].KPI_VALUE3
                this.progress4 = res.data.data[0].KPI_VALUE4
              } catch (error){
                console.log('**** indicator has error', error);
              } finally {
                this.progressCalculator('power_cut',this.chart1,this.progress1,this.options1,'rgba(0,214,255,0.8)');
                this.progressCalculator('transition',this.chart2,this.progress2,this.options2,'rgb(227,162,70)');
                this.progressCalculator('other',this.chart3,this.progress3,this.options3,'rgb(0,246,87)');
                this.progressCalculator('transition2',this.chart4,this.progress4,this.options4,'rgb(147,110,213)');
              }
            }
          })