プロジェクトのシナリオ:
在做后台管理系统中，数据分析模块必不可少，所以要用到echarts来实现此功能
例: echarts は、el-table 内のデータを選択した後にデータを更新します。echarts データは、初期化中にバックエンドによって返されるデフォルトのデータです。
日常的なデータ操作
提示：在这里记录一下数据实时更新的代码和实现思路
まず、バックエンドから返されたデータをストアに保存します。
// 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 内のストア データを循環させてから、それを echarts 内のデータ データに割り当てる必要があります。
データはリアルタイムで更新されます:
上記の手順を実行すると、テーブルデータを選択した後、echarts データが切り替わっていないことがわかります。このとき、ウォッチを使用して変更されたデータを監視し、再割り当てする必要があります。
watch( () => stroe.list, () => { option.dataset.source = Object.keys(store.list).map ((item) => { ...割り当てコード}) } )
要約する
この問題は、vue3 バックグラウンド システムでの echarts アプリケーションの共有に関するものです。学び、修正することを歓迎します。