echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例

echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例，亲测有效；

代码如下：

// 初始化ecahrts
let echartsWrapper = this.$echarts.init(document.getElementById('echarts-wrapper'));
let option = {...};  //echarts图的一些配置项
echartsWrapper.clear();
// 设置配置项
echartsWrapper.setOption(option);// 当选择图例的时候做处理
echartsWrapper.on('legendselectchanged', function (params) { console.log(params) // 可以打印看下参数var optionLegend = echartsWrapper.getOption(); var selectValue = Object.values(params.selected); var n = 0; selectValue.map(function (res) {if (!res) { n++; } });if (n == selectValue.length) {optionLegend.legend[0].selected[params.name] = true;}echartsWrapper.setOption(optionLegend)；
});

效果如下：

打印的params里面的参数如下：

echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例相关推荐

ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放
文章目录 echarts中设置x轴和y轴均随滚轮进行缩放当数据实时渲染时,也可进行区域缩放 echarts中设置x轴和y轴均随滚轮进行缩放 dataZoom 组件用于区域缩放,从而能自由关注细节的 ...
python绘图时如何添加图例_【Python】matplotlib 双y轴绘制及合并图例
1.双y轴绘制关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...
Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）...
导读如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
（2）Echarts图表绑定特殊事件-图表元素绑定选中事件
在上篇文章中,介绍了Echarts关于元素绑定特殊事件需要做的处理和操作.而本文手把手教大家如何在源码中添加自己定义的事件. 需求介绍 :假设有个需求,一个图表有多根y轴,当用户点击某根轴的范围时,需 ...
【云周刊】第127期：数据可视化最强CP登场！DataV接入ECharts图表库
原文链接本期头条 DataV接入ECharts图表库可视化利器强强联手 DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化从业者推崇的开源图表库.从今天 ...
echarts地图设置legend_echarts中关于自定义legend图例文字
formatter有两种形式: - 模板 - 回调函数模板使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...

echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例

echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例

echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例相关推荐

最新文章

热门文章