点击切换数据

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