知识点8: 进度条制作，进度条宽度随数据变动

情况一：

• 效果图：

 

• html（动态设置样式style为item.style）

            
<div class="content_item" v-for="item in datasets" :key="item.index">
    <div class="progress_blue">
         <div class="progress_item" :style="item.style"></div>
     </div>
</div>

 

• js:（loadData()里，加载相关数据，赋值给width）

mounted: {
     this.loadData();
}
methods: {
      loadData() {
            this.$http.post('indi/data', {
        'indiDsService': 1,
        'indiId': '10052',
        'indiType': 10,
        'parameter': {}
      }).then((res) => {
        if (res.data.data && res.data.data.length > 0) {
          res.data.data.forEach((ele, index) => {
            // console.log(res.data.data[index].KPI_NAME);
            this.datasets[index].country = res.data.data[index].KPI_NAME;
            this.datasets[index].nums = res.data.data[index].KPI_VALUE;
　　　　　　//宽度随数据变动
            this.datasets[index].style.width = `${res.data.data[index].KPI_VALUE}‰`;    
          });
        }
      }).catch((error) => {
        console.error(`10052 indicator has error`, error);
      });            
    }
}    

 情况二：

 效果图：（进度条根据旁边的数据联动）

 

 关键html:

 (动态设置样式style。其中num1需要在data中赋值，值是右侧的22)