博主的公众号:Java4y
《《《《《《《《《
一个努力提高工作效率(增加摸鱼时间)的小白博主
》》》》》》》》》》
关注有惊喜哦
《《《《《《《《《
2021一起好好加油! (ง •_•)ง
内容概览
需求: 折线图上有 一个产品的目标值和实际值 ,通过点击其中一个legend,同时隐藏该产品的实际值和目标值(指折线图上的线)
动态设置legend属性 无效 解决办法
折线图:
<ve-line :extend="chartExtend" :data="chartData" :events="chartEvents" height="58vh" ></ve-line>
。
点击legend事件:[echart官方文档 legendselectchanged]
(https://echarts.apache.org/zh/api.html#events.legendselectchanged)
chartEvents: {
//
legendselectchanged: (item) => {
// 获取点击的legend名字
const currSelectName = item.name
// 获取extend配置中的legend项
const legend = this.chartExtend.legend
// 所有图例的选中状态表
const selectedObj = item.selected
// 获取选中的值
const val = selectedObj[currSelectName]
const name = String(currSelectName)
// 获取产品的名称
const filterName = name.substring(0, name.length - 2)
// 从所有图例中过滤出包含这个产品名字的图例
const filterNames = Object.keys(selectedObj).filter(element => {
return element.includes(filterName)
})
// 更改同产品的值
filterNames.forEach(e => {
selectedObj[e] = val
})
// 设置到legend中
legend.selected = selectedObj
}
}
chartExtend:{
legend: {
type: 'scroll',
textStyle: {
color: 'white'
},
pageIconColor: '#4bc8c8',
data: [],
// 这个是最重要的,如果不写这个selected,点击时会无法看到渲染的效果,但是debug看到数据的值是更改了的!
selected: {
}
}
}