点击按钮切换echarts图标样式:
renderChart
函数来初始化 ECharts 图表,需要在 switchTable
函数中修改图表的 option
并重新设置给图表实例。
<template>
<BasicModal @register="registerModal">
<div id="chart" style="width: 100%; height: 400px"></div>
<button @click="switchChartType">切换</button>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '/@/components/Modal';
import * as echarts from 'echarts';
let myChart: echarts.ECharts | null = null;
const [registerModal] = useModalInner((data) => {
if (!myChart) {
const chartDom = document.getElementById('chart')!;
myChart = echarts.init(chartDom);
initialChart(data.chartData);
} else {
// 如果需要基于新数据重新渲染图表,可以在这里调用 updateChart(data.chartData);
// 但在这个场景中,我们假设只在首次加载时设置图表数据
}
});
function initialChart(chartData) {
const option = {
xAxis: {
type: 'category',
data: chartData.dateList,
name: '推送时间', // 设置x轴名称
},
yAxis: {
type: 'value',
name: '推送数据量', // 设置y轴名称
},
series: [
{
data: chartData.amountList,
type: 'bar', // 初始类型设置为柱状图
},
],
};
myChart.setOption(option);
}
let currentChartType = 'bar'; // 当前图表类型
function switchChartType() {
currentChartType = currentChartType === 'bar' ? 'line' : 'bar';
if (myChart) {
myChart.setOption({
series: [
{
data: myChart.getOption().series[0].data, // 使用当前的数据
type: currentChartType, // 更新图表类型
},
],
});
}
}
</script>
标签:bar,数据,myChart,图表,点击,切换,chartData,data,echarts
From: https://www.cnblogs.com/lm02/p/18404967