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