【曹操】echarts图例legend选中状态动态设置

简介: 曹操项目语音质量分析功能前端页面展示,需要对所有指标的图例默认选中状态只显示前两个,其他指标的图例状态默认为灰色。
曹操项目语音质量分析功能前端页面展示,需要对所有指标的图例默认选中状态只显示前两个,其他指标的图例状态默认为灰色。
1、因为所有的指标为动态加载的,因此图例legend选中状态也要通过js进行动态加载,从官方的文档里可以查询到legend.selected配置项可以设置图例的默认状态。
官方示例,true为选中展示系列,false为灰色默认不展示该系列:
selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}

2、js代码
//图例配置项
legend: {
x: 'center',
y: 'bottom',
data: $scope.key_value,
selected:{}
},

//js动态加载
var selected_item = {};
for(i =0; i < $scope.key_value.length; i++){
var key_name = $scope.key_value[i];
if(i >1){
selected_item[key_name] = false;
}else{
selected_item[key_name] = true;
}
};
option.legend.selected = selected_item; f28528903129e6442e7496e6a566f5d445364e02

目录
相关文章
echarts设置单位的偏移
echarts设置单位的偏移
|
21天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
28 0
|
21天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
108 0
|
21天前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
21天前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
211 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts设置暂无数据
echarts设置暂无数据
|
21天前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
6月前
Echarts 设置数据条颜色 宽度
Echarts 设置数据条颜色 宽度