echarts data update after el-table selects data

Project scenario:

在做后台管理系统中，数据分析模块必不可少，所以要用到echarts来实现此功能

For example: echarts will update the data after selecting a piece of data in the el-table, and the echarts data is the default data returned by the backend during initialization.

---

routine data manipulation

提示：在这里记录一下数据实时更新的代码和实现思路
First, store the data returned by the backend in the store.
// const gethuResourData = async () => { const res = await gethuResourList() ... key code: store.taskChange(ProjectData.list)

Then you need to reassign the value to the store.taskChange(ProjectData.list) function after clicking the selected table row data...
for example:
let handleSelectionChange = (selection) => { if(selection.length > 1) { ...logic code } store.taskChange(xxx) } —

Data reference:

Introduce echarts:
import * as echarts from 'echarts';.
Then there is the assignment operation
, which needs to cycle the store data in echarts and then assign it to the data data in echarts

Data updated in real time:

If you do the above steps, you will find that the echarts data has not been switched after selecting the table data. At this time, you need to use a watch to monitor the changed data and reassign it.
watch( () => stroe.list, () => { option.dataset.source = Object.keys(store.list).map ((item) => { ...assignment code }) } )

Summarize

This issue is sharing the application of echarts in the vue3 background system. Welcome to learn from and correct.