el-calendar 自定义样式 带百分比动画效果

图片效果， 颜色根据百分比使用动态填充，底层div根据百分比形成柱状图效果

全部代码

<template>
  <div class="app-container home">
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>欢迎使用碳中和管理平台</h2>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-calendar v-model="valueData" class="calendar_class" id="calendar">
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template
          slot="dateCell"
          slot-scope="{date, data}">
          <!--自定义内容-->
          <div @click="clickDate(data.day)" style="width: 100%;height: 100%;text-align: center;">
              <div v-if="brightDate.indexOf(data.day) != -1" style="height: 100%">
                  <div class="progressbar-wrapper" style="height: 100%">
                    <div class="paddingTopDivNum">
                      <span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span>
                    </div>
                      <div>
                        <div class="textDiv" v-html="content(data.day,'num1')"></div>
                      </div>
                      <div :class="data.day" :style="{background:content(data.day,'color')}" style="" class="progressbar">
                      </div>
                </div>
              </div>
              <div v-else class="paddingTopDivNum">
                <div style="padding-top: 3px">
                  <span>{{ data.day.split('-').slice(2).join('-') }}</span>
                </div>
              </div>
            </div>
        </template>
      </el-calendar>
    </el-row>
  </div>
    <el-dialog title="详情信息" :visible.sync="open" append-to-body width="70%" @open="openDialog()" @close='nodeDataOpenCancel'>
      <div style="padding: 10px">
        <el-row>
          <div style="width: 100%;height: 400px" id="main"></div>
        </el-row>
        <el-table
          :data="allData"
          border
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="工序" align="center" prop="process" />
          <el-table-column label="产量(万吨)" align="center" prop="prodTotal">
            <template v-slot="scope">
              {{ (scope.row.prodTotal/10000).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            label="排放量(万吨)"
            align="center"
            prop="emissionWg"
          >
            <template v-slot="scope">
              {{ (scope.row.emissionWg/10000/1000).toFixed(2) }}
            </template>
          </el-table-column>
          <!-- 排放量/产量 -->
          <el-table-column
            label="排放强度(kgCO2/t)"
            align="center"
            prop="emissionIntensity"
            width="150"
          >
            <template v-slot="scope">
              {{ scope.row.emissionIntensity.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import leftCharts from "./components/homeCharts/headerLeft.vue";
import rightCharts from "./components/homeCharts/headerRight.vue";
import dischareCharts from "./components/homeCharts/dischare.vue";
import emissionCharts from "./components/homeCharts/emissionCharts.vue";
import excessive from "./components/homeCharts/excessive.vue";

import * as echarts from 'echarts';
// excessive
export default {
  name: "Index",
  components: {
    leftCharts,
    rightCharts,
    dischareCharts,
    emissionCharts,
    excessive
  },
  data() {
    return {
      //刷新标识
      refresh : false,
      //选中日期
      selectDay:undefined,
      //控制弹出框开关
      open : false,
      valueData : new Date(),
      calendarData: [
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-01',
          'judgeId': '00109',
          'num1' : '10%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-02',
          'judgeId': '00109',
          'num1' : '20.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-03',
          'judgeId': '00109',
          'num1' : '30.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-04',
          'judgeId': '00109',
          'num1' : '40.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-05',
          'judgeId': '00109',
          'num1' : '50.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-06',
          'judgeId': '00109',
          'num1' : '60.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-07',
          'judgeId': '00109',
          'num1' : '70.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-08',
          'judgeId': '00109',
          'num1' : '80.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-09',
          'judgeId': '00109',
          'num1' : '90.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第一审判法庭',
          'startDate': '2022-04-10',
          'judgeId': '00109',
          'num1' : '100%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        },
        {
          'tribunalName': '第二审判法庭',
          'startDate': '2022-04-23',
          'judgeId': '00109',
          'num1' : '35.1%',
          'num2' : '33.1%',
          'num3' : '32.1%',
          'limitingPercentage':'50%'
        }
      ],
      allData:[
        {
          process:'石灰',
          prodTotal:120,
          emissionWg:556,
          emissionIntensity: 115.5
        },
        {
          process:'烧结',
          prodTotal:200,
          emissionWg:556,
          emissionIntensity: 115.5
        },
        {
          process:'球团',
          prodTotal:150,
          emissionWg:556,
          emissionIntensity: 115.5
        },
        {
          process:'炼铁',
          prodTotal:80,
          emissionWg:556,
          emissionIntensity: 115.5
        },
        {
          process:'炼钢',
          prodTotal:70,
          emissionWg:556,
          emissionIntensity: 115.5
        },
        {
          process:'电炉',
          prodTotal:110,
          emissionWg:556,
          emissionIntensity: 115.5
        },
        {
          process:'轧钢',
          prodTotal:130,
          emissionWg:556,
          emissionIntensity: 115.5
        },
      ],
      value: new Date()
    }
  },
  created(){
  	//按钮点击事件
    this.$nextTick(() => {
      //修改“今天”为“当月”
      let span1 = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)");
      span1.innerText = '当月';
      // 点击上个月
      let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
      prevBtn.addEventListener('click', () => {
        console.info(this.valueData)
        console.log(this.dateFormat('YYYY-mm-dd', this.valueData));;
      })
      // 点击今天
      let currBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
      currBtn.addEventListener('click', () => {
        console.info(this.valueData)
        console.log(this.dateFormat('YYYY-mm-dd', this.valueData));
      })
      // 点击下个月
      let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
      nextBtn.addEventListener('click', () => {
        console.info(this.valueData)
        console.log(this.dateFormat('YYYY-mm-dd', this.valueData));
      })
    })
  },
  computed: {
    // 时间高亮的数组
    brightDate () {
      let ary = []
      for (let i in this.calendarData) {
        ary.push(this.calendarData[i].startDate)
      }
      return ary
    }
  },
  activated() {
    this.dynamicFillingHeight();
  },
  mounted(){
    this.dynamicFillingHeight();
  },
  methods: {
    //打开弹窗初始化图表
    openDialog(){
      this.$nextTick(() => {
        //  执行echarts方法
        this.getEchart()
      })
    },
    getEchart(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: this.selectDay,
        },
        xAxis: {
          type: 'category',
          data: ['石灰', '烧结', '球团', '炼铁', '炼钢', '电炉', '轧钢']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                // itemStyle: {
                //   color: '#a90000'
                // }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,		//开启显示
                  position: 'top',	//在上方显示
                  textStyle: {	    //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);

      // option && myChart.setOption(option);
    },
    //按钮取消事件
    nodeDataOpenCancel(){

    },
    clickDate(day){
      this.open = true;
      this.selectDay = day;
      console.log(day);
    },
    /**
     * @param {Object} fmt 需要的时间格式 例如：'YYYY-mm-dd'
     * @param {Object} date  格林尼治时间
     */
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    },
    // 动态获取对象信息
    content (date,type) {
      let content = ''
      for (let i in this.calendarData) {
        if (date === this.calendarData[i].startDate) {
          switch (type) {
            case 'color' :
              let num = this.calendarData[i].num1
              num = num.substring(0, num.length - 1);
              num = parseInt(num)/100
              if (num === 1){
                return "rgba(255,14,18,"+num+')'
              }else {
                return "rgba(50, 205, 50,"+num+')'
              }
            default :
              content = this.calendarData[i][type]
          }
        }
      }
      return content
    },
    dynamicFillingHeight(){

      //为了每次进入首页都重置动画
      for (let i in this.calendarData) {
        let thisData = this.calendarData[i]
        let dateClass = document.getElementsByClassName(thisData.startDate);
        dateClass[0].style.height = 0;
      }
      setTimeout(()=>{
        for (let i in this.calendarData) {
          let thisData = this.calendarData[i]
          let dateClass = document.getElementsByClassName(thisData.startDate);
          dateClass[0].style.height = thisData.num1;
        }
      },500)

    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;
    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.everyDay {
  display: inline-block;
  padding-top: 7px;
  width:  40px;
  height: 40px;
  background-color: #409eff;
  color: #fff;
  border-radius: 50%;
}
</style>

<style scoped>
  /*calendar_class 是el-calendar所在父标签的css 去除灰色表格的点击事件*/
  .calendar_class >>>.el-calendar-table:not(.is-range)
    td.next{
      pointer-events: none;
    }
  .calendar_class >>>.el-calendar-table:not(.is-range)
    td.prev{
      pointer-events: none;
    }
    /*去除表格外padding*/ 
  .calendar_class >>>.el-calendar-table .el-calendar-day{
    padding: 0px;
  }
  .paddingTopDiv{
    padding-top: 1px;
    text-align: right;
  }
  .paddingTopDivNum{
    font-size: 25px;
    padding-top: 8px;
  }
  .textDiv{
    color: black;
    padding-left: 8px;
    font-size: 20px;
    font-weight: bold;
    padding-top: 10px;
    text-align: center;
  }
  /*浮动外框*/
  .progressbar-wrapper {
    position: relative;
    height: 100%;
    z-index: 1;
  }
  /*浮动内框*/
  .progressbar {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 0;
    -webkit-transition:height 2s; /*动画效果*/
  }
  .beyond{
    background-color: #ef9a9a;
  }
  .below{
    background-color: #00e676;
  }
</style>