项目场景:
在做后台管理系统中,数据分析模块必不可少,所以要用到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后台系统中的应用,欢迎借鉴和指正。