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

javascript 复制代码

<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

html 复制代码

<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博客