el-table 的单元格 + 图表 + 排序

news2024/11/14 13:52:19

<el-table border :data="tableDataThree" height="370px" style="width: 100%">
   <el-table-column :key="activeName + '8'" width="50" type="index" label="序号" align="center"></el-table-column>
      <el-table-column :key="activeName + '9'" width="100" prop="cityName" label="市" align="center"></el-table-column>
      <el-table-column :key="activeName + '10'" label="数据" align="center">
            <el-table-column sortable prop="totalCenterMoney" label="总额(万元)" align="center">
                <template slot-scope="scope">
                    <FormCharts :tableDataThree="tableDataThree" :list="scope.row" type="totalCenterMoney" :value="scope.row.totalCenterMoney" />
                </template>
          </el-table-column>
     </el-table-column>
</el-table>

表格中的图标 echarts 

<template>
  <div class="echart-box" ref="echartBoxRef"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";

export default {
  props: ["tableDataThree","value","type","color"],
  data() {
    return {
      echartBoxRef: "",
      dataList: [],
      dataNumber: [],
      myChart: "",
      maxTotalCenterMoney:0
    };
  },
  mounted() {
    this.init();
  },
  watch:{
    value: {
      handler(newval, oldval) {
        this.$nextTick(() => {
          this.init()
        })
      },
      immediate:true,
      deep:true
    }
  },
  methods: {
    init() {
      let typpe = this.type
      this.tableDataThree.forEach((e,i) => {  
        // 初始化最大值为数组中的第一个元素(或更小的值以避免未定义错误)  
        this.maxTotalCenterMoney = this.tableDataThree[0] ? this.tableDataThree[0].typpe : 0;  
    
        // 遍历数组以找到每个字段的最大值  
        this.tableDataThree.forEach(item => {  
            if (item.typpe > this.maxTotalCenterMoney) {  
              this.maxTotalCenterMoney = item.typpe;  
            }  
        }); 
      })

      this.myChart = echarts.init(this.$refs.echartBoxRef); // 图标初始化
        if(this.color == '1'){
          this.myChart.setOption({  
              xAxis: {
                  type: "value",
                  show: false,
                  max: this.maxTotalCenterMoney
              },
              yAxis: {
                  type: "category",
                  show: false
              },
              series: [{
                  data: [this.value],
                  type: "bar",
                  barWidth: "10%",
                  showBackground: true,
                  backgroundStyle: {
                      color: '#dce0ee',
                      borderRadius:5
                  },
                  label: {
                    show: true,
                    position: [0, -10],   //value的位置
                    color: '#000', //值的颜色
                    fontSize: 10,
                  },
                  itemStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          { offset: 1, color: "#6d9cd5" },
                          { offset: 0, color: "#a8c9e6" }
                      ]),
                      barBorderRadius: [2, 2, 2, 2],
                  }
              }]
          });  
          window.addEventListener('resize', () => {  
              this.myChart.resize();  
          }); 
        }else{
          this.myChart.setOption({  
              xAxis: {
                  type: "value",
                  show: false,
                  max: this.maxTotalCenterMoney
              },
              yAxis: {
                  type: "category",
                  show: false
              },
              series: [{
                  data: [this.value],
                  type: "bar",
                  barWidth: "10%",
                  showBackground: true,
                  backgroundStyle: {
                      color: '#dee2ef',
                      borderRadius:5
                  },
                  label: {
                      normal: {
                          show: true,
                          position: [0, -10],   //value的位置
                          color: '#000', //值的颜色
                          fontSize: 10,
                      }
                  },
                  itemStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          { offset: 1, color: "#8894c4" },
                          { offset: 0, color: "#bfc6e4" }
                      ]),
                      barBorderRadius: [2, 2, 2, 2],
                  }
              }]
          });  
          window.addEventListener('resize', () => {  
              this.myChart.resize();  
          });  
        }
    },
  }
};
</script>
<style lang="scss" scoped>
.echart-box {
  width: 180px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: -15px;
}
</style>

参考文档:

实现el-table中嵌套echarts图表以及柱条渐变_el-table-v2+echarts-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2139798.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

macOS系统Homebrew工具安装及使用

1.打开Homebrew — The Missing Package Manager for macOS (or Linux) 2.复制安装命令到终端执行 复制 执行 3. 开始自动安装过程 4.安装成功 5.使用brew安装wget工具

第L6周:机器学习-随机森林(RF)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标&#xff1a; 1.什么是随机森林&#xff08;RF&#xff09; 随机森林&#xff08;Random Forest, RF&#xff09;是一种由 决策树 构成的 集成算法 &#…

WebSocket vs. Server-Sent Events:选择最适合你的实时数据流技术

引言&#xff1a; 在当今这个信息爆炸的时代&#xff0c;用户对于网页应用的实时性要求越来越高。从即时通讯到在线游戏&#xff0c;再到实时数据监控&#xff0c;WebSocket技术因其能够实现浏览器与服务器之间的全双工通信而受到开发者的青睐。 WebSocket技术为现代Web应用…

java计算机毕设课设—电子政务网系统(附源码、文章、相关截图、部署视频)

这是什么系统&#xff1f; 资源获取方式在最下方 java计算机毕设课设—电子政务网系统(附源码、文章、相关截图、部署视频) 电子政务网系统主要用于提升政府机关的政务管理效率&#xff0c;核心功能包括前台网站展示、留言板管理、后台登录与密码修改、网站公告发布、政府部…

高级Java程序员必备的技术点:你准备好了吗?

在Java编程的世界里&#xff0c;成为一名高级程序员不仅需要深厚的基础知识&#xff0c;还需要掌握一系列高级技术和最佳实践。这些技术点是通向技术专家之路的敲门砖&#xff0c;也是应对复杂项目挑战的利器。本文将探讨高级Java程序员必备的技术点&#xff0c;帮助你自我提升…

VS code 安装使用配置 Continue

Continue 插件介绍 Continue 是一款高效的 VS Code 插件&#xff0c;提供类似 GitHub Copilot 的功能&#xff0c;旨在提升开发者的编程效率。其配置简单&#xff0c;使用体验流畅&#xff0c;深受开发者喜爱。 主要功能特点 智能代码补全 Continue 能够基于当前代码上下文生…

MATLAB 可视化基础:绘图命令与应用

目录 1. 绘制子图1.1基本绘图命令1.2. 使用 subplot 函数1.3. 绘图类型 2.MATLAB 可视化进阶(以下代码均居于以上代码的数据定义上实现)2.1. 极坐标图2.3. 隐函数的绘制 3.总结 在数据分析和科学计算中&#xff0c;数据可视化是理解和解释结果的关键工具。今天&#xff0c;我将…

Javaの运算符 Day5

1. 算数运算符 1.1 二元运算符&#xff08;两个操作数&#xff09;的算数运算符 操作符描述求和-求差*求积/求商%求余 代码举例 public class TestOperator {public static void main(String[] args) {int a 20;int b 12;System.out.println(a b);System.out.println(a …

【算法】队列与BFS

【ps】本篇有 4 道 leetcode OJ。 目录 一、算法简介 二、相关例题 1&#xff09;N 叉树的层序遍历 .1- 题目解析 .2- 代码编写 2&#xff09;二叉树的锯齿形层序遍历 .1- 题目解析 .2- 代码编写 3&#xff09;二叉树最大宽度 .1- 题目解析 .2- 代码编写 4&#xf…

UART协议

目录 一、概述二、帧格式起始位数据位奇偶校验位停止位 三、数据传输过程四、串行通信接口RS232RS422RS485 五、UART环回程序设计 参考&#xff1a;正点原子FPGA开发指南 一、概述 UART&#xff08;通用异步收发器&#xff09;是一种异步、全双工的串行通信总线&#xff0c;在…

CGAL 从DSM到DTM holefilling remeshing

CGAL 从DSM到DTM holefilling & remeshing 上一节简单地删除被建筑物覆盖的大片区域中的顶点会导致大的Delaunay三角面&#xff0c;从而得到了较差的DTM&#xff0c;所以一个额外的步骤可以帮助产生更好的形状网格:删除大于阈值的面&#xff0c;并用孔洞填充算法进行三角化…

C++速通LeetCode简单第17题-爬楼梯

思路要点&#xff1a;将问题转化为求斐波那契数列的第n项&#xff0c;然后迭代。 思路分析&#xff1a;最后一次爬的阶数不是1就是2&#xff0c;假设爬n阶的方法数是f(n)&#xff0c;假设最后一次爬1阶&#xff0c;那么爬前面的 n-1阶的方法数是f(n-1)&#xff1b;假设最后一次…

力扣题解2848

大家好&#xff0c;欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述&#xff08;简单&#xff09;&#xff1a; 与车相交的点 给你一个下标从 0 开始的二维整数数组 nums 表示汽车停放在数轴上的坐标。对于任意下标 i&#xff0c;nums[i] [starti, endi] &…

熵权法详细讲解+Python代码实现

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

大数据新视界 --大数据大厂之 Cassandra 分布式数据库:高可用数据存储的新选择

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

基于单片机的超声波液位检测系统(论文+源码)

1总体设计 本课题为基于单片机的超声波液位检测系统的设计&#xff0c;系统的结构框图如图2.1所示。其中包括了按键模块&#xff0c;温度检测模块&#xff0c;超声波液位检测模块&#xff0c;显示模块&#xff0c;蜂鸣器等器件设备。其中&#xff0c;采用STC89C52单片机作为主…

2.5 Trigger源码分析 -- ant-design-vue系列

Trigger源码分析 – ant-design-vue系列 1 概述 源码地址&#xff1a; https://github.com/vueComponent/ant-design-vue/blob/main/components/vc-trigger/Trigger.tsx 在源码的实现中&#xff0c;Trigger组件主要有两个作用&#xff1a; 使用Portal组件&#xff0c;把Pop…

构建响应式 Web 应用:Vue.js 基础指南

构建响应式 Web 应用&#xff1a;Vue.js 基础指南 一 . Vue 的介绍1.1 介绍1.2 好处1.3 特点 二 . Vue 的快速入门2.1 案例 1 : 快速搭建 Vue 的运行环境 , 在 div 视图中获取 Vue 中的数据2.2 案例 2 : 点击按钮执行 vue 中的函数输出 vue 中 data 的数据2.3 小结 三 . Vue 常…

Leetcode3282. 到达数组末尾的最大得分

Every day a Leetcode 题目来源&#xff1a;3282. 到达数组末尾的最大得分 解法1&#xff1a;动态规划 代码&#xff1a; class Solution { public:long long findMaximumScore(vector<int>& nums) {if (nums.size() < 1) return 0LL;int n nums.size();vect…

JavaScript高级——循环遍历加监听

本文分享到这里&#xff0c;欢迎大家评论区相互讨论学习&#xff0c;下一篇继续分享JavaScript高级学习中的闭包的内容。