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

最新推荐文章于 2024-04-16 10:19:02 发布
最新推荐文章于 2024-04-16 10:19:02 发布
阅读量592 收藏 1
点赞数
分类专栏： 日常解决方案保存 文章标签： javascript css vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47873669/article/details/124295338
版权

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>
weixin_47873669
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-calendar日历的各种样式及事件
m0_67403240的博客
03-03 3693
效果图 班和休互相修改功能 el-calendar HTML代码段 可以根据自己的需要显示内容，样式 <template> <div class="la-container"> <div class="la-info-main"> <!-- 关于日历控件 --> <el-calendar class="lar-el-calendar" v-model="value"
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
修改element-ui中el-calendar（日历）的样式
最新发布
想好了再写！
04-16 678
* 可根据需要调整间距 */// 上个月、下个月按钮样式。// 自定义选中、悬浮颜色。
element el-calendar日历自定义样式
weixin_42500464的博客
03-08 1022
element el-calendar日历自定义样式
element-ui ＜el-calendar＞＜/el-calendar＞ 样式设置
m0_52200287的博客
09-27 1585
element-ui 事件及样式。
elementUI-使用el-table自定义transfer组件
08-14
在elementUI中使用el-table自定义完成transfer组件功能。内有注释使用说明
Vue的el-scrollbar实现自定义滚动
09-20
本篇文章给大家分享了Vue的el-scrollbar实现自定义滚动实现的过程和实例代码，对此有需要的朋友可以参考下。
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形...element组件样式 <el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
el-calendar自定义样式、标记、事件
WhatMOMO5477的博客
03-19 1万+
目录1.前言2.标准样式3.自定义日期块内容4.自定义点击日期块的事件5.自定义右上角月份按钮6.其它自定义 1.前言 el-calendar是elementUI的日历组件，可以非常便捷的加载一个日历视图，也可做某些自定义，稍微有点麻烦，主要是官方提供的功能较少，文档也全，大部分需要自己定义。 2.标准样式 最基本的样式只需要几行代码实现~ <el-calendar v-model="value"> </el-calendar> <script> export
element日历calendar组件上月、今天、下月、日历块点击事件及模板
10-15
主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
日历插件中样式
09-12
通过编写javaScript开发日历插件
Calendar一个自定义灵活的日历选择器
08-10
Calendar 自定义日历选择器，时间范围精确到日，可精准自定义设置每个日期的初始样式和点击后的回调，提供 "弹层模式" 和 "普通排列" 的两种模式。
CSS 修改el-calendar的样式，自定义样式
qq_58340302的博客
09-14 1194
JS： css： 在这里小记一下，主要也是为了保留一下这次的修改成果，方便以后使用 有个没改好的地方就是，右上角的选择上下月的按钮不好修改为左右箭头，所以那块就没做优化，大家要是有好方法可以让我借鉴借鉴，ui如下：
Element-UI使用篇——el-calendar的使用+样式修改集锦
热门推荐
happy81997的博客
09-03 1万+
el-calendar日历组件 写在开头： el-calendar日历组件现在git上很很多别人封装好的组件，可以通过npm install 直接安装使用，效果很好，各种事件响应、样式都很炫，对这个要求功能较多的可以百度下使用。功能需求不复杂的，可以用el-calendar组件即可。 一、样式修改 1、修改整个日历的高度 整日历的高度只能修改到日历列表的单元格大小，才能起作用。 .el-calendar-table .el-calendar-day { height: 30.
element calendar 自定义显示（例如：通知事项日历）vue+element自定义日历
一往直“前”，直上云“端”
04-24 1万+
element calendar 自定义显示（例如：通知事项日历）vue+element自定义日历； 最近帮一个后端朋友处理一个前端问题，elementUI 中calendar日历组件内容进行自定义显示，实现类似通知事项的日历效果，感觉还挺有意思，在这做简单的分享 问题描述 提示：elementUI组件中针对calendar日历组件其实可以实现自定义内容的效果。下图，官网自定义效果。 前端自定义日历...
element ui中el-calendar日历自定义样式
DZQ1223的博客
05-17 1727
1、效果图2、具体实现。
Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）
qq_45754931的博客
05-18 1万+
项目场景： 以日历形式展现当前页面。其中，年月可进行下拉选择，默认选中当天日期，用户可以自由点选日期，被选中后日期以紫色显示，鼠标在日历上移动时，日期显示出橙色。有数据的日期显示出灰色。 实现思路：删除现存在左上角年月元素，写一个下拉选框，通过css定位到正确位置，通过vue计算属性进行数据绑定 代码实现： <div class="Calendarselect"> <el-date-picker v-model="monthValue" type="month" size
el-calendar 自定义日程
03-29
el-calendar 是一个基于 Element UI 的日历组件，可以方便地在网页上显示和管理日程安排。它支持自定义日程，可以在日历上展示已有的日程，也可以通过交互式操作添加、修改和删除日程。 使用 el-calendar 组件，需要先引入 Element UI 库，并在 HTML 中添加 el-calendar 组件的标签。然后，在 JavaScript 中配置 el-calendar 组件的属性，如日历的显示范围、显示的日期格式、已有的日程数据等等。可以使用 Element UI 提供的 API 来操作 el-calendar 组件，实现自定义日程的功能。 el-calendar 组件具有丰富的功能，如支持多种日期选择模式、支持国际化、支持自定义样式等等。它可以应用于各种场景，如会议日程安排、个人日程管理等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值