After reading this article, you will gain the following skill points

  • Modify the Echarts data view
  • Get to the usage of the echarts event function
  • Sort sort an array object
  • Html5’s contenteditable property
  • Then there is this article, a requirement you may encounter later
  • Then, when learning a new technology, be sure to read through the documentation!!

In the fast off work when suddenly received a demand, good, wages are not free to take 👍

The original function modules are shown in the figure. The echarts map is on the left, and the table on the right is generated by the for loop

New requirement: After the user modifies the data in the data view in the upper right corner of the map, the table on the right is updated

It seems pretty simple, and it is, if you’ve seen the ECharts API,

I’ve been using Echarts for a while now, but I haven’t read all of its documents because there are too many.

After this incident, I was ready to go through the official Echarts documentation

Implementation approach

After the user edits the data view, click Refresh, get the data edited by the user, sort it, and then assign the value to the table on the right

After the user clicks the reset button, get the raw data and assign it to the table on the right (the raw data is sorted).

The two keys to implementing this requirement are to get the refresh and reset event callbacks

The final implementation code is presented first, and the bumps in the road will be explained later

The implementation code

this.ECH = echarts.init(this.$refs['chart'])
this.ECH.setOption(option, true)
this.ECH.on('dataviewchanged'.(e) = > {
    const data = e.newOption.series[0].data
    this.webRegion = data.sort((a, b) = > b.value - a.value)
    const option = this.ECH.getOption()
    option.visualMap = { max: data[0].value }
    this.ECH.setOption(option)
})
this.ECH.on('restore'.() = > {
    const option = this.ECH.getOption()
    const data = option.series[0].data
    this.webRegion = data
})
Copy the code

Here, two echarts event callbacks are called,

The first is the dataview update callback dataViewChanged,

Where you can get the updated data, then sort the data and assign it to the table on the right.

Update the Echart map. It will automatically update the map after modifying the data.

I have here the maximum value of the updated visual mapping component component

The second is restore, the callback of the echart instance reset,

No instance data is returned in this callback,

You need to fetch it from the instance and restore the table on the right

Ok, done

Yeah, that’s a dozen lines of code, and instantly I felt like AN S13

The official documentation describes these two methods as follows:

I have several degrees of doubt that I see the document has a problem, how can so concise

Now, let’s talk about my missteps

When I received this demand, I briefly thought about the realization idea:

So the question is how do I get the callback for the refresh event

The contentToOption method of the data view tool is used to retrieve the latest data and the dom, but optionToContent is required to use the contentToOption method, otherwise the event will not be emitted. With optionToContent, you rewrite the view content

This this this… Give it a try!

feature: {
    dataView: {
        readOnly: false.optionToContent: (opt) = > {
                console.log('opt', opt)
                const series = opt.series[0].data
                
                let tdBody = ' '
                series.forEach((item) = > {
                    tdBody += `<tr>
                               <td style="padding: 0 5px">${item.name}</td>
                 <td style="padding: 0 30px" contenteditable="true">${item.value}</td></tr>`
                })
                const table = `<table border="1" style="margin:20px;
                      border-collapse:collapse;font-size:16px;text-align:center">
                      <tbody><tr><th style="padding:0 5px">地区</th>
                      <th style="padding: 0 30px">声量</th></tr>
                      <tr>${tdBody}</tr></tbody></table>`
                      
                return table
            },
            
            contentToOption: (dom, opts) = > {
                  console.log('dom', dom)
                  console.log('opts', opts)
             },
    }
}
Copy the code

And when I wrote it, it was great that I could actually get the data,

The rewritten table view cannot be edited

This is not a problem that can be solved with a new property called ContentedItable

In a nutshell, what this property does is make elements editable, such as div

Specific can see MDN point I jump introduction 1, point I jump introduction 2

I then added the contenteditable property to the TD element and it was ready to edit

The value in the DOM structure is updated, but the data in options is not updated

I can’t just walk through the DOM and get the data, go too far, go too far

So I changed my mind and implemented a data view tool myself (actually far 😅).

Data view DOM, here only shows the DOM structure, layout and style are not important

Here, I will directly use input to carry the value, which is convenient for bidirectional binding of value.

When editing on the left, the values of the right table change simultaneously, but there is no ordering

Sort and update the map data only after you hit the Refresh button, and then hide the data view DOM

If you’re asking me why didn’t I just edit and update the map at the same time

All I can say is, that’s a good question. Don’t ask it again

The refresh event handler

The function of this method is to sort the modified data

Extract the maximum value for updating the visual mapping component

Get the configuration item getOption() from the map instance (this.ech),

Modify the configuration item to be updated, and then update the configuration item and data setOption()

Data view tool code

feature: {
    myDataView: {
        show: true.title: 'Data view'.icon: 'SVG code is too long'.onclick: () = >  this.showDataTable = true ,
        // Just one function to display data view DOM,
    }
Copy the code

Currently through their own implementation of the data view to modify the data, the left map and the right table can be updated

You think this is where it ends? That’s impossible.

Because the modification data in the requirement is not really modifying the background data, it’s just modifying the data locally to see what the view looks like,

Therefore, data needs to be restored to the original real data after modification.

Map is ok, directly use reset tool can restore, then my table how to do?

And implement a reset tool button yourself?

You can but you don’t have to, so the question goes back to where it started,

How to get reset button event??

Reluctantly, he opened the official file,

Found that it had come full circle, had gone wrong from the beginning,

At first I was thinking about how to get the refresh button event callback,

Then update the table with the latest data in the callback,

Restore the table by retrieving the original data in the reset event callback.

But when I was trying to figure out how to get the refresh,

I think the refresh event should be on the refresh button,

The actual callback to the refresh event is on this instance,

The rest of the code starts around the tool button;

I don’t know if it’s a callback to the refresh event,

Because the official documentation says it’s a data view modification event,

In reality, the data changes are not triggered immediately, but only when the refresh button is hit

If the above content is inappropriate, welcome to correct ~