vue3使用多选框切换echarts

### Vue3 中通过多选框控制 ECharts 的显示与切换 在 Vue3 中实现通过多选框 (checkbox) 控制 ECharts 图表的显示与交互功能，可以通过监听多选框的状态变化来动态更新图表的数据或样式。以下是具体的实现方式： #### 实现逻辑说明 1. 使用 `ref` 或者 `reactive` 定义响应式的图表数据源。 2. 绑定多选框到一个数组变量上，该数组用于存储当前被勾选的选项。 3. 当多选框状态发生变化时，触发事件处理函数重新设置图表配置项并调用 `setOption` 方法刷新图表。 #### 示例代码 以下是一个完整的示例，展示如何利用 Vue3 和 ECharts 来实现这一需求： ```javascript <template> <div class="app"> <!-- 多选框 --> <label v-for="(item, index) in options" :key="index"> <input type="checkbox" :value="item.value" v-model="selectedOptions"> {{ item.label }} </label> <!-- ECharts 图表容器 --> <div ref="chartRef" style="width: 600px; height: 400px;"></div> </div> </template> <script setup> import { ref, onMounted, watch } from 'vue'; import * as echarts from 'echarts'; // 数据定义 const chartRef = ref(null); const myChart = ref(null); const options = [ { label: '类别A', value: 'A' }, { label: '类别B', value: 'B' }, { label: '类别C', value: 'C' } ]; const selectedOptions = ref(['A']); // 默认选中的选项 onMounted(() => { initChart(); }); watch(selectedOptions, () => { updateChart(); }); function initChart() { const chartDom = chartRef.value; if (!chartDom) return; myChart.value = echarts.init(chartDom); updateChart(); // 初始化完成后立即渲染一次图表 } function updateChart() { const dataMap = { A: ['苹果', 5], B: ['香蕉', 8], C: ['橙子', 7] }; const filteredData = Object.keys(dataMap).filter(key => selectedOptions.value.includes(key)) .map(key => dataMap[key]); const option = { tooltip: {}, xAxis: { type: 'category', data: filteredData.map(item => item[0]) }, yAxis: { type: 'value' }, series: [{ data: filteredData.map(item => item[1]), type: 'bar' // 设置为柱状图[^2] }] }; myChart.value.setOption(option); // 更新图表配置 } </script> <style scoped> .app { display: flex; flex-direction: column; align-items: center; } </style> ``` #### 关键点解析 - **多选框绑定**：使用 `v-model` 将多选框的状态同步至 `selectedOptions` 数组中。 - **动态过滤数据**：当多选框状态改变时，根据 `selectedOptions` 动态筛选出需要显示的数据。 - **ECharts 配置更新**：每次修改数据后都需要调用 `myChart.setOption()` 方法刷新图表[^1]。 --- ###