el-table选中数据后echarts数据更新

项目场景：

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

例如：在el-table中选中某条数据后echarts会更新数据，初始化的时候echarts数据是后端返回的默认数据。

---

常规数据操作

提示：在这里记录一下数据实时更新的代码和实现思路
首先要把后端返回的数据存在store里面。
// const gethuResourData = async () => {
const res = await gethuResourList()
…
关键性代码： store.taskChange(ProjectData.list)

然后需要在点击选中的表格行数据后把值重新赋值给store.taskChange(ProjectData.list)这个函数…
如:
let handleSelectionChange = (selection) => {
if(selection.length > 1) {
…逻辑代码
}
store.taskChange(xxx)
}
—

数据引用：

引入echarts：
import * as echarts from ‘echarts’;。
然后就是赋值操作
需要在echarts里面循环store数据然后赋值给echarts里面的data数据

数据实时更新：

如果做到以上步骤在选中表格数据后会发现echarts数据并没有切换，此时需要用watch去监听变化后的数据 重新赋值 。
watch( () => stroe.list, () => {
option.dataset.source = Object.keys(store.list).map ((item) => {
…赋值代码
})
} )

总结

本期分享的是echarts在vue3后台系统中的应用，欢迎借鉴和指正。