内容概览
需求： 折线图上有 一个产品的目标值和实际值 ，通过点击其中一个legend，同时隐
藏该产品的实际值和目标值（指折线图上的线）
当我觉得这个需求很 easy 的时候，居然发现 动态设置 legend 属性无效 ……
通过本文来记录这个解决过程，前端真是太难了 哈哈
在 v-charts 中， 折线图的写法如下：
<ve-line :extend="chartExtend" :data="chartData" :events="chartEvents" height="58vh" ></ve-line>。
而 v-charts 是对 echart 的包装，很多事件都可以从 echart 官网找到，所以这里也是回
到官网来查找这个点击 legend 事件 （主要还是因为在 v-charts 上没看到 哈哈）
点击 legend 事件：[echart官方文档 legendselectchanged]
(echarts.apache.org/zh/api.html…)
事件如图：
网络异常，图片无法展示
|
注意红框和画线的内容，我们对代码进行修改~
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 } } 复制代码
接下来这个才是重点，当我配置好代码后，发现动态设置 legend 属性一直无效，心态崩了~
真的百思不得其解，求助了前端大佬后，后面两个人忙活了大半天，发现把这个
selected 加上去就可以解决问题了，如果不写的话，即使 debug 过程中看到有值出来，
但是也一直没效果（过分啊）👇 切记！
chartExtend:{ legend: { type: 'scroll', textStyle: { color: 'white' }, pageIconColor: '#4bc8c8', data: [], // 这个是最重要的，如果不写这个selected，点击时会无法看到渲染的效果，但是debug看到数据的值是更改了的！ selected: { } } }
