This is the 16th day of my participation in Gwen Challenge

Content Overview Requirements: There is a target value and actual value for a product on the line chart. Hide both the actual value and the target value for the product by clicking on one of legend (referring to the lines on the line chart)

When I thought this requirement was easy, I found that the dynamic setting of the legend attribute was invalid…

To document this solution in this article, the front end is really hard lol

In V-Charts, the line chart is written as follows:

< VE-line :extend=”chartExtend” :data=”chartData” :events=”chartEvents” height=”58vh” >

V-charts is the packaging of Echart, many events can be found from the official website of Echart, so here I also go back to the official website to find the event of clicking legend (mainly because I can’t see it on V-Charts).

Click on the legend: [every official documentation legendselectchanged] (echarts.apache.org/zh/api.html…).

The event is shown as follows:

Notice the red box and the underlined content, let’s modify the code ~

chartEvents: { // legendselectchanged: (item) => {// Get the clicked legend name const currSelectName = item.name // Get the legend item from extend const legend = This.chartextend. Legend // Select status table for all legends const selectedObj = item.selected // Get the selected value const val = SelectedObj [currSelectName] const name = String(currSelectName) const filterName = name. Const filterNames = object.keys (selectedObj).filter(Element => {return) const filterNames = object.keys (selectedObj) Element.includes (filterName)}) // Change the value of the same product filternames. forEach(e => {selectedObj[e] = val}) // set it to legend legend.selected = selectedObj } }Copy the code

After I configured the code, I found that the dynamic setting of the legend attribute had been invalid. My mind was broken

If you don’t write it, even if you see a value in the debug process, but there has been no effect (too much ah) ๐Ÿ‘‡ remember!

chartExtend:{ legend: { type: 'scroll', textStyle: { color: 'white' }, pageIconColor: '#4bc8c8', data: [], // This is the most important. If you do not write "selected", you will not see the rendered effect, but debug will see that the value of the data is changed! selected: { } } }Copy the code

The last

This front end is really hard lol ๐Ÿ˜„

If you think this article is good, please give it a thumbs-up ๐Ÿ˜

Let’s start this unexpected meeting! ~

Welcome to leave a message! Thanks for your support! ใƒพ(โ‰งโ–ฝโ‰ฆ*)o go!!

I’m 4ye and I’ll see you soon next time!!