vue3根据按钮切换更新echarts对应的数据

效果图

在这里插入图片描述

初始化注意

setOption的函数定义，option是指图表的配置项和数据，notMerge是指是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新option 创建所有新组件

//  setOption(option, notMerge, lazyUpdate)
myChart.value.setOption(option.value, true);

代码

const myChart = ref(null);
// 指定图表的配置项和数据
let option = ref({color: ["rgba(252, 219, 110, 1)"],tooltip: {trigger: "axis",backgroundColor: "rgba(88, 104, 121, 1)", // 提示框浮层的背景颜色。borderColor: "rgba(88, 104, 121, 1)", // 提示框浮层的边框颜色。borderWidth: 1, // 提示框浮层的边框宽。padding: 6, // 提示框浮层内边距，textStyle: {// 提示框浮层的文本样式。color: "#fff",fontStyle: "normal",fontWeight: "normal",fontFamily: "sans-serif",fontSize: 14},axisPointer: {type: "cross",animation: false,label: {backgroundColor: "rgba(60, 72, 85, 0.7)"}}},grid: {left: "2%",right: "4%",bottom: "10%",top: "20%",containLabel: true},legend: {con: "circle",itemWidth: 5,itemHeight: 5,orient: "horizontal",top: "5%",right: "auto",textStyle: { color: "#fff", fontSize: 14 }},xAxis: {type: "category",data: [],axisLine: {show: false},axisLabel: {fontSize: 12,color: "#9E9E9E"},axisTick: {show: false}},yAxis: [{type: "value",min: 0,minInterval: 1,splitArea: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {lineStyle: {color: "#676767",type: "dashed" // dotted 虚线}},axisLabel: {fontSize: 12,color: "#9E9E9E",fontFamily: "Bebas"}},{type: "value",axisLine: {show: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {fontSize: 12,formatter: "{value}%", // 右侧Y轴文字显示fontFamily: "Bebas",color: "#6A93B9"},splitArea: {show: false}}],series: [{type: "bar",barWidth: 8,itemStyle: { barBorderRadius: [8, 8, 8, 8] },data: []}]
});
// 获取对应的x轴 y轴的值
const getBarData = async () => {//  发送接口let res = await workNumApi({ code: activeIndex.value });console.log(res, "柱状图数据");option.value.xAxis.data = res.data.xAxis;option.value.series[0].data = res.data.yAxis;// 因为会进行切换  所以要判断是不是初始进来if (myChart.value) {myChart.value.setOption(option.value, true);}
};
const init = () => {myChart.value = echarts.init(numberOfFlights.value);// 使用刚指定的配置项和数据显示图表。myChart.value.setOption(option.value, true);
};