Vue Highcharts 在路由后为每个用户显示图表

Question

我正在使用 Vue cli 和 Highcharts。我有一个用户个人资料，其中显示了一些关于用户的信息，如下所示：

<div class="top"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
  
       <div>  <p class="p"> {{ item.name }}</p> </div>

<div class="box" @click="route()">Rate</div>

在 vuex 中显示数组中的数据：

export default new Vuex.Store({
  state: {
  arrays: [
      {
         name: 'Bethany',
         rate: [60, 75, 70, 85, 65],
         Temp: [35, 37, 38, 26], 
      },
      {
         name: 'Sam',
         rate: [70, 95, 60, 65, 83],
         Temp: [36, 35.8, 37, 36]
      },
     ]

我正在使用 Highcharts 来显示速率和温度，并使用路由功能路由到图表。

route: function () {   

     this.$router.replace({ name: "Charts" });    
},

我的图表是这样的：

 this.target = Highcharts.stockChart(this.$el, {
        Chart: {
                renderTo: 'container'
            },
        
       xAxis: [{
         format: '{value}',
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    }],
    yAxis: [{
        labels: {
            format: '{value}',
        },
    }],
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
    },
    series: [ {
        name: 'Rate',
        type: 'spline',
        data: this.rate,
    }],

    });
  },

现在我只是像这样显示数据：

data : function() {
      return {
        target: undefined,
        rate: this.$store.state.arrays[0]['rate'],
      }
    },

但我需要一种方法来对数组中的所有速率执行此操作。我正在寻找一种方法来 显示每个用户评分 的系列数据。因此，当我单击 Bethany 费率框时，我将转到图表页面，其中包含显示 Bethany 费率的系列数据。

谢谢！

Answer 1

您可以将当前人名作为查询参数添加到您的路线中：

route: function () {
    const name = "Bethany"; // TODO: use actual person name...
    this.$router.replace({ name: "Charts", query: { person: name } });    
},

然后更改：

this.$store.state.arrays[0]['rate'];

类似于：

this.$store.state.arrays.find(x => x.name === this.$route.query.person).rate;

Vue Highcharts 在路由后为每个用户显示图表

Vue Highcharts display graph for each user after routing

series

highcharts

vue-router

vuex

vue-cli