1.配置legend icon 根据点击事件动态更换样式

<template><div ref="chart" style="width: 600px; height: 400px;"></div></template><script>import * as echarts from 'echarts';export default {name: 'EchartsExample',data() {return {chart: null,legendIcons: {selected: 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m299.264 382.208L481.28 712.192a51.2 51.2 0 0 1-70.656 0L212.992 514.56a51.2 51.2 0 0 1 70.656-69.888l162.048 162.048 294.656-295.168a49.664 49.664 0 0 1 48.384-13.056 51.2 51.2 0 0 1 22.528 83.712z',unselected: 'path://M512 64c60.5 0 119.2 11.8 174.4 35.2 53.3 22.6 101.3 54.9 142.4 96 41.2 41.2 73.5 89.1 96 142.4C948.2 392.8 960 451.5 960 512s-11.8 119.2-35.2 174.4c-22.6 53.3-54.9 101.3-96 142.4-41.2 41.2-89.1 73.5-142.4 96C631.2 948.2 572.5 960 512 960s-119.2-11.8-174.4-35.2c-53.3-22.6-101.3-54.9-142.4-96-41.2-41.2-73.5-89.1-96-142.4C75.8 631.2 64 572.5 64 512s11.8-119.2 35.2-174.4c22.6-53.3 54.9-101.3 96-142.4s89.1-73.5 142.4-96C392.8 75.8 451.5 64 512 64m0-64C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z',},legendSelected: {'Category1': true,'Category2': false,}};},mounted() {this.initChart();},methods: {initChart() {this.chart = echarts.init(this.$refs.chart);this.setOption();this.chart.on('legendselectchanged', this.updateLegendIcons);},setOption() {const option = {title: {text: 'ECharts Example'},tooltip: {trigger: 'axis'},legend: {bottom:0,data: [{name: 'Category1',icon: this.legendIcons.selected},{name: 'Category2',icon: this.legendIcons.unselected}],selected: this.legendSelected,},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Category1',type: 'bar',data: [120, 200, 150, 80, 70, 110, 130]}, {name: 'Category2',type: 'bar',data: [60, 100, 90, 130, 140, 120, 160]}]};this.chart.setOption(option);},updateLegendIcons(params) {this.legendSelected = params.selected;const legendData = [{name: 'Category1',icon: this.legendSelected['Category1'] ? this.legendIcons.selected : this.legendIcons.unselected},{name: 'Category2',icon: this.legendSelected['Category2'] ? this.legendIcons.selected : this.legendIcons.unselected}];this.chart.setOption({legend: {data: legendData}});}}};</script><style scoped></style>

效果展示