图表的使用（3）-柱状图

在完成项目图表的时候，通过更改css样式，不借助echarts可以页面绘制出柱状图
页面详细代码如下所示

<template>
  <div>
    <div class="charts" >
     <el-card>
       <div style="font-weight: bold;margin-bottom: 15px;">Top10</div>
       <div class="service-progress" v-for="(item,index) in chartData06" :key="index"
            :value="item"  style="position: relative">
         <el-progress :percentage="(parseInt(item.value)/topNumber)*100"
                      :stroke-width="25"
                      :show-text=false
                      class="progress-bar">
         </el-progress>
         <el-row type="flex" justify="center" align="middle" class="progress-info">
           <div class="info-c-1">
             <el-tooltip class="item" effect="dark" :content="item.name" placement="top" :enterable="false">
               <span class="dataNameTxt" style="color: white">{{item.name}}</span>
             </el-tooltip>
           </div>
         </el-row>
         <div class="statistics" >
             <span style="margin-left:20px;">{{ item.value}}</span>
         </div>
       </div>
     </el-card>
    </div>
  </div>
</template>

<script>
import monitor from "../../../api/monitor";
import {countDateFn} from '@/views/utils/editTime'
export default {
  name: "topNCpmDatabase",
  props:["datetime"],
  data(){
    return{
      showTopNCpmData: true,
      chartData06:[],
      topNumber:1,
    }
  },
  methods:{
    topSlow(data){
      let arr=[]
      for(let i of data){
        arr.push(parseInt(i.value))
      }
      let max = Math.max.apply(1, arr);
      this.topNumber=max
    },

   // 请求数排行（CPM) Top10
   async getTopNCpmDatabase(start,end){
     let {step, startDate, endDate} = countDateFn(start, end);
     let params={
       end:endDate,
       start:startDate,
       step:step,
     }
     await monitor.queryTopNCpmDatabase(params).then(res => {
       if (res.data && res.status === 200) {
         if(res.data.success){
           this.chartData06 = res.data;
           this.topSlow(this.chartData06)
         }else{
           this.chartData06=[];
         }
       } else {
         this.$popError(res.data.message);
        }
      })
    },

  },
  watch:{
    datetime(){
        const {startTime,endTime}=this.datetime;
        this.getTopNCpmDatabase(startTime,endTime)
    }
  }
}
</script>

<style lang="scss" scoped>
  .charts .el-card{
    height: 310px;
  }

/*进度条样式*/
.progress-box {
  width: 100%;
  overflow: hidden;
}
.service-progress {
  padding: 1px 80px 6px 5px;
  cursor: pointer;
}
/deep/ .el-progress-bar__outer {
  border-radius: 3px !important;
  background-color: rgb(206,230,236);
}
/deep/ .el-progress-bar__inner {
  border-radius: 3px;
  background-color: rgb(36,161,193);
}
/deep/ .progress-info.el-row.is-justify-center.is-align-middle.el-row--flex{
  border-radius: 3px;
}
.progress-info {
  width: 100%;
  margin-top: -25px;
  height: 25px;
  display: flex;
  justify-content: flex-start;
}
.info-c-1 {
  width: 40%;
  text-align: left;
  padding-left: 10px;
  font-size: 10px;
  color: #495060;
}
.dataNameTxt {
  display: inline-block;
  max-width: calc(100% - 5px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.statistics {
  font-size: 10px;
  position: absolute;
  top: 4px;
  width: 120px;
  right: -45px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .el-card__body {
  position: relative;
}
.changeChart {
  cursor: pointer;
  position: absolute;
  z-index: 100;
  right: 30px;
}
</style>

页面展示效果如下所示