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