当前位置：首页 > news >正文

vue3+echarts实现tab切换多个图表

news 2025/6/25 8:12:50

在多个图表切换情况下，可能存在的问题有：

可能会出现首个图表加载不出来，图表DOM未加载。
可能会出现数据混淆，图表数据不准确。

所以这里我就把图表单独弄出来做成了组件，然后在tab切换时给组件赋值不一样的option。

效果如图所示：
在这里插入图片描述

具体代码如下：

图表组件 ChartComponent.vue：

<template><div ref="chartContainer" :style="{ width: '100%', height: props.height + 'px' }"></div>
</template><script setup>
import { onMounted, onUnmounted, watch, ref, shallowRef } from 'vue';
import * as echarts from 'echarts';const props = defineProps({options: Object, // 图表配置项visible: Boolean, // 控制图表是否显示height: Number,
});const chartInstance = shallowRef(null);
const chartContainer = ref(null);onMounted(() => {if (props.visible) {chartInstance.value = echarts.init(chartContainer.value);chartInstance.value.setOption(props.options);}
});watch(() => props.options,(newOptions) => {if (chartInstance.value) {chartInstance.value.setOption(newOptions, true);}}
);watch(() => props.visible,(newVisible) => {if (newVisible) {if (!chartInstance.value) {chartInstance.value = echarts.init(chartContainer.value);}chartInstance.value.setOption(props.options);} else {if (chartInstance.value) {chartInstance.value.dispose();chartInstance.value = null;}}}
);onUnmounted(() => {if (chartInstance.value) {chartInstance.value.dispose();}
});
</script>

tab切换HTML内容：

<template><div class="hoursMonthPrice w-full p-8"><!-- tab切换部分 --><div class="tabsBox"><buttonclass="normalBtn":class="stationType === item.key ? 'activeBtn' : ''"v-for="(item, index) in stationTypeOptions":key="index"@click="changeBtn(item.key)">{{ item.value }}</button></div><div class="echartsBox"><ChartComponent v-if="stationType === 0" :options="firstChartOptions" :visible="true" :height="400" /><ChartComponent v-else-if="stationType === 1" :options="secondChartOptions" :visible="true" :height="400" /><ChartComponent v-else-if="stationType === 2" :options="thirdChartOptions" :visible="true" :height="400" /></div></div>
</template>

ts部分：主要代码在于firstChartOptions、secondChartOptions、thirdChartOptions三个图表option内容

<script setup lang="ts">
import { ref } from 'vue';
import ChartComponent from './ChartComponent.vue';
import * as echarts from 'echarts';
const stationType = ref(0);
const stationTypeOptions = [{ key: 0, value: '分时电价图' },{ key: 1, value: '分月电价图' },{ key: 2, value: '峰谷价差图' },
];const tooltipObj = ref({trigger: 'axis',backgroundColor: '#fff',borderWidth: 0,textStyle: {color: '#7F7F7F',fontSize: 14,align: 'left',},axisPointer: {lineStyle: {color: '#7F7F7F',},},
});const gridObj = ref({left: '1%',right: '2%',top: '15%',bottom: '3%',containLabel: true,
});const changeBtn = (key: any) => {stationType.value = key;
};// 分时电价图
const firstChartOptions = {tooltip: tooltipObj.value,grid: gridObj.value,xAxis: {type: 'category',boundaryGap: false,data: ['01', '02', '03', '04', '05', '06', '07', '08'],},yAxis: {type: 'value',},visualMap: [{show: false,dimension: 0,pieces: [{lte: 7,color: '#F53F3F',colorAlpha: '0.4',},{gt: 7,lte: 9,color: '#FF7D00',colorAlpha: '0.4',},{gt: 9,lte: 11,color: '#FFE929',colorAlpha: '0.4',},{gt: 11,lte: 13,color: '#50B142',colorAlpha: '0.4',},{gt: 13,lte: 19,color: '#26bec9',colorAlpha: '0.4',},{gt: 19,color: '#99A0B0',colorAlpha: '0.4',},],},],series: [{name: '电价',type: 'line',smooth: true,areaStyle: {},data: [12, 50, 30, 21, 14, 15, 62, 43],},],
};// 分月电价图
const secondChartOptions = {tooltip: tooltipObj.value,grid: gridObj.value,// 图例legend: {icon: 'circle',show: true,data: ['尖峰', '高峰', '平时', '低谷', '度电套利'],itemWidth: 10,itemHeight: 10,itemGap: 20,left: '1%',top: '5%',textStyle: {fontSize: 14,color: '#575757',},},xAxis: {type: 'category',boundaryGap: false,data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],},yAxis: {type: 'value',},series: [{name: '尖峰',data: [12, 14, 15, 21, 21, 23, 29, 34],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(245,63,63,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#f53f3f',borderWidth: 1,},},{name: '高峰',data: [20, 41, 21, 51, 30, 24, 26, 15],// legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 1,},symbol: 'circle',symbolSize: 5,showSymbol: false,color: '#FF7D00',itemStyle: {color: '#FF7D00',borderColor: 'rgba(255,125,0, 0.4)',borderWidth: 5,},areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(255,125,0,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},},{name: '平时',data: [10, 24, 32, 15, 42, 62, 30, 10],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(255,233,41,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#FFE929',borderWidth: 1,},},{name: '低谷',data: [14, 15, 21, 35, 14, 26, 15, 34],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(80,177,66,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#50B142',borderWidth: 1,},},{name: '度电套利',data: [31, 20, 14, 12, 35, 24, 14, 21],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(153,160,176,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#99A0B0',borderWidth: 1,},},],
};// 峰谷价差图
const thirdChartOptions = {tooltip: tooltipObj.value,grid: gridObj.value,// 图例legend: {icon: 'circle',show: true,data: ['尖峰低谷', '高峰低谷', '尖峰平时', '高峰平时'],itemWidth: 10,itemHeight: 10,itemGap: 20,left: '1%',top: '5%',textStyle: {fontSize: 14,color: '#575757',},},xAxis: {type: 'category',boundaryGap: false,data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],},yAxis: {type: 'value',},series: [{name: '尖峰低谷',data: [30, 21, 42, 51, 23, 14, 12, 15],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(245,63,63,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#f53f3f',borderWidth: 1,},},{name: '高峰低谷',data: [42, 51, 26, 24, 35, 15, 45, 23],// legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 1,},symbol: 'circle',symbolSize: 5,showSymbol: false,color: '#FF7D00',itemStyle: {color: '#FF7D00',borderColor: 'rgba(255,125,0, 0.4)',borderWidth: 5,},areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(255,125,0,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},},{name: '尖峰平时',data: [32, 10, 25, 65, 42, 31, 42, 12],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(255,233,41,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#FFE929',borderWidth: 1,},},{name: '高峰平时',data: [14, 21, 51, 24, 32, 14, 52, 32],legendShape: 'circle',type: 'line',smooth: true,lineStyle: {width: 2,},symbol: 'circle',symbolSize: 5,showSymbol: false,areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(80,177,66,0.6)',},{offset: 0.8,color: 'rgba(7,18,26,0.1)',},],false),},itemStyle: {color: '#50B142',borderWidth: 1,},},],
};
</script>

查看全文

http://www.lryc.cn/news/574506.html