echarts多图例时增加批量减选、加选

CSDN话题挑战赛第1期
活动详情地址：CSDN

参赛话题：前端学习记录
话题描述：记录前端学习过程中的某个知识点、解决方案等等

文章目录

问题

解决方案

实践

实现效果

问题

当图片中的图例非常多时，我们想只看某一个需要点击取消多个，非常麻烦。

解决方案

在legend和series都增加图例内容，如果只在legend增加不显示，之后通过

.on('legendselectchanged', function (params) {})

监听图例点击事件，来修改legend属性中的selected控制图表显示内容；

参考文档

Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/option.html#legend.selected

实践

//初始化
this.chart = this.$echarts.init(this.$refs.chart);

//监听图例点击事件
this.chart.on('legendselectchanged', function (params) {
    console.log(params);
	/*
        params中内容为
		{
			name: "a0" //点击图例的key
			selected: {
				a0: false //每一个的状态
				a1: true
				a2: true
				a3: true
				a4: true
				a5: true
				a6: true
				a7: true
				a8: true
				a9: true
				a10: true
				a11: true
				a12: true
				a13: true
				a14: true
				a15: true
				a16: true
				a17: true
				a18: true
				a19: true
			}
		}
	*/
    // 例如我们需要a16显示时a0、a1、a2显示，a16隐藏时a0、a1、a2隐藏；
    if(params.name == 'a16'){
        this.legend_selected.a0 = this.legend_selected.a1 = this.legend_selected.a2 = params.selected[params.name];

        // 这里注意如果我们没有要修改的内容就不要setOption了，legend_selected没有变化的话，我们setOption会使点击没有效果
        this.chart.setOption(this.charts_option);
    }
    
})

// 请求数据代码，并处理成我们需要的格式

// 增加我们需要的图例，series中只增加名称没有data是不会在图表中显示的
this.series = this.series.concat([{
			name: 'a16',
			type: "line",
		},
		{
			name: 'a17',
			type: "line",
		},
		{
			name: 'a18',
			type: "line",
		},
		{
			name: 'a19',
			type: "line",
		}]);
this.legendData = this.legendData.concat(['a16', 'a17', 'a18', 'a19']);

// 这里只列出了部分配置项其他的根据自己需求增加
this.charts_option = {
    legend: {
	    data: this.legendData,
	    selected: this.legend_selected, // 默认为空对象
    },
    series: this.series,
}

// 设置图表配置项
this.chart.setOption(this.charts_option);

实现效果

echarts多图例时增加批量减选、加选效果

CSDN话题挑战赛第1期
活动详情地址：CSDN