你可以通过监听
echarts 的 `
legendselectchanged` 事件，在事件回调函数中手动设置
选中状态。具体实现代码如下：
```
<template>
<div class="chart-container">
<div ref="chart" class="chart"></div>
</div>
</template>
<script>
import * as
echarts from '
echarts'
export default {
data() {
return {
chartData: {
legendData: ['A', 'B', 'C'],
seriesData: [
{ value: 335, name: 'A' },
{ value: 310, name: 'B' },
{ value: 234, name: 'C' },
],
},
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
this.chart =
echarts.init(this.$refs.chart)
this.chart.setOption({
legend: {
data: this.chartData.
legendData,
},
series: [
{
type: 'pie',
data: this.chartData.seriesData,
},
],
})
// 监听
图例选择事件
this.chart.on('
legendselectchanged', (params) => {
const selected = params.selected
// 遍历所有
图例
for (let i = 0; i < this.chartData.
legendData.length; i++) {
const name = this.chartData.
legendData[i]
// 如果
图例未被
选中，则手动设置
选中状态
if (!selected[name]) {
this.chart.dispatchAction({
type: '
legendSelect',
name: name,
})
}
}
})
},
},
}
</script>
<style>
.chart-container {
width: 500px;
height: 500px;
}
.chart {
width: 100%;
height: 100%;
}
</style>
```
在上述代码中，我们首先在模板中添加了一个 `div` 元素作为
echarts 容器。在 `mounted` 钩子函数中，我们调用 `initChart` 方法初始化
echarts 图表，并通过 `
legendselectchanged` 事件监听
图例选择事件。在事件回调函数中，我们通过 `params.selected` 获取当前被
选中的
图例状态，并遍历所有
图例，如果当前
图例未被
选中，则手动设置
选中状态。这样就可以保证
图例不会失去
选中状态了。
扫一扫
4331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
