关于在script中使用vuex的state数据的问题

• Z时代
• 2024-02-06
• 分类：IT

需求描述：

1.使用vuex获取后台数据并存储在state中
2.通过mapState,获取到state中的值
3.调用echarts setOption()进行重新绘制

问题：

读取到的state可以在template中通过{{scatterData}}显示，而不能在echarts的配置option中识别。

代码：
store:main.js

export default {
    namespaced: true,
    state: {
        lineData1: [], //折现图数据源1
        lineData2: [], //折线图数据源2
        scatterData: [], //散点图数据源
        gkmszs: 0, //工况模式指数
        yjsj: 0, //预警指数
        wdzs: 0, //稳定指数
        tableData: [], //表格数据
    },
    mutations: {
        set_scatterData(state, data) {
            state.scatterData = data;
        },
    },
    actions: {
        scatterHis(context, params) {
            let n = params.n
            let numMax
            if (params.time[1] === params.time[0]) {
                numMax = 1
            } else {
                numMax = (params.time[1] - params.time[0]) / 1000 / n
            }
            //计算该段时间的点数，n为取样频率单位n/s
            axios({
                method: "POST",
                url: "/api/DbComm/GetHisData",
                data: {
                    tags: ["data\\tag1", "data\\tag2"],
                    stime: params.time[0],
                    etime: params.time[1],
                    count: numMax,
                },
            }).then((res) => {
                context.commit("set_scatterData", res);
            });
        },

store:index.js

import Vue from 'vue';
import Vuex from 'vuex'
import main from './main';
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
        main,
    }
})

入口文件：main.js

import Vue from 'vue'
import App from './App.vue'
import './assets/style/reset.css' //清除默认样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/style/main.css';
import store from './store/index'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

读取scatterData

computed: {
    ...mapState("main", ["scatterData"]),
  },

echarts的option

      var option = {
        xAxis: {
          min: 0,
          max: 100,
          show: false,
        },
        yAxis: {
          min: 0,
          max: 100,
          show: false,
        },
        series: [
          {
            symbolSize: this.size,
            data: ？？？？？？？？？？,
            type: "scatter",
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = that.color;
                  if (
                    params.dataIndex >
                    that.dataArr.length - colorList.length
                  ) {
                    return colorList[that.dataArr.length - params.dataIndex];
                  }
                  return colorList[0];
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);

怎样将scatterData赋值给option的series下的data

回答：

在watch里监听scatterData 有值后setOption

例子:

demo.vue文件中
computed: {
...mapState("scatterData"),
}
watch: {

scatterData: {
    immediate: true,
    handler(val) {
        if(val && val.length) {
            初始化echarts
        }
    }
}

}

以上是 关于在script中使用vuex的state数据的问题 的全部内容， 来源链接： utcz.com/p/936422.html