点击按钮切换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>
