2

我在 vuetify 中有一个下拉列表，我想从中将选定的选项保存为变量。我想将选项保存为变量的原因是因为稍后我将使用它们来填充 highcharts 图表。因此，例如，如果选择了前两个城市，我希望保存两个变量。如果只有一个，那么只有一个被保存。我一直在尝试阅读如何做到这一点，但没有任何成功。我知道我可以{{selected}}用来显示选择的内容，但不能显示如何保存。

编辑：

下面的示例显示了两个组件。第一个是进行选择并填充图表的组件。第二个有将要使用的图表。

正如另一位用户指出的那样，有几种方法可以做到这一点。理想情况下，我希望用户必须选择 1 个城市，按下按钮并生成图表。

<template>
<v-container fluid text-xs-center style="height: 90vh; max-height: 100%; background-color: #F5F5F5">
     <v-layout row wrap>
      <v-flex xs4>
          <v-card flat color='#F5F5F5'>
          <Rose v-bind:options="charttest"/>
      </v-card>
      </v-flex>

      <v-flex xs12 sm6>
        <v-select
          v-model="selected"
          :items="items"
          item-text= "city"
          item-value="value"
          :menu-props="{ maxHeight: '400'}"
          label="Select"
          hint="Pick your favorite states"
          multiple
          persistent-hint
          return-object
          single-line
        ></v-select>
      </v-flex>

      </v-layout>
  </v-container>
</template>

<script>
import Rose from "@/components/Rose";

var originaldata = [
              {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 0,
                pointRange: .5
              },{
                data: [1.99759968],
                type: 'column',
                color: "#1DACE8",
                name: "S_N_AT_Park_tot",

                pointStart: 0,
                pointRange: 25.71
              },
              {
                data: [3.069066148],
                type: 'column',
                color: "#1DACE8",
                name: "S_N_CA_Park_tot",

                pointStart: 25.71,
                pointRange: 25.71,
              },
              {
                data: [4.762283492],
                type: 'column',
                color: "#1DACE8",
                name: "S_N_BTM",

                pointStart: 51.42,
                pointRange: 25.71
              },
               {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 77.13,
                pointRange: .5
              },
              {
                data: [5.472831225],
                type: 'column',
                color: "#AEA8A8",
                name: "S_N_TR",
                pointStart: 77.13,
                pointRange: 25.71
              },{
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 102.84,
                pointRange: .5
              },
              {
                data: [5.089290648],
                type: 'column',
                color: "#F24D29",
                name: "S_P_DE",

                pointStart: 102.84,
                pointRange: 25.71
              },
              {
                data: [8.593398356],
                type: 'column',
                color: "#F24D29",
                name: "S_P_DI",

                pointStart: 128.55,
                pointRange: 25.71
              },
              {
                data: [5.06165564],
                type: 'column',
                color: "#F24D29",
                name: "S_P_DG",

                pointStart: 154.26,
                pointRange: 25.74
              },
              {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 180,
                pointRange: .5
              },
              {
                data: [3.63565202],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_sec",

                pointStart: 180,
                pointRange: 19.2825
              },
              {
                data: [2.033564998],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_tert",

                pointStart: 199.2825,
                pointRange: 19.2825
              },
              {
                data: [1.464012915],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_work",

                pointStart: 218.465,
                pointRange: 19.2825
              },
              {
                data: [1.284840194],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_other",

                pointStart: 237.6475,
                pointRange: 19.2825
              },
               {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 256.83,
                pointRange: .5
              },
              {
                data: [5.840454632],
                type: 'column',
                color: "#C4CFD0",
                name: "S_PP_RID_orig",

                pointStart: 256.83,
                pointRange: 8.57
              },
              {
                data: [1.153663761],
                type: 'column',
                color: "#C4CFD0",
                name: "S_PP_RID_rid",

                pointStart: 265.4,
                pointRange: 8.57
              },
              {
                data: [4.159545368],
                type: 'column',
                color: "#C4CFD0",
                name: "S_PP_RID_dest",

                pointStart: 273.97,
                pointRange: 8.57
              },
              {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 282.54,
                pointRange: .5
              },
              {
                data: [1.283496592],
                type: 'column',
                color: "#76A08A",
                name: "S_PP_EFF_walk",

                pointStart: 282.54,
                pointRange: 25.71
              },
              {
                data: [4.765886288],
                type: 'column',
                color: "#76A08A",
                name: "S_PP_EFF_bike",

                pointStart: 308.25,
                pointRange: 25.71
              },
              {
                data: [4.72029121],
                type: 'column',
                color: "#76A08A",
                name: "S_PP_EFF_far",

                pointStart: 333.96,
                pointRange: 26.04
              }
            ]


var newdata = null


export default {
  components: {
    Rose
  },
  data() {
    return {
            charttest: {
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        legend: {
          enabled: false
        },
        series: originaldata
      },

      selected: [],
      items:[
{city: 'Aalst', value:[ 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 0,
  pointRange: .5
}, 
 {
  data: [1.99759968],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_AT_Park_tot',

  pointStart: 0,
  pointRange: 25.71
},

 {
  data: [3.069066148],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_CA_Park_tot',

  pointStart: 25.71,
  pointRange: 25.71,
},

 {
  data: [4.762283492],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_BTM',

  pointStart: 51.42,
  pointRange: 25.71
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 77.13,
  pointRange: .5
},

 {
  data: [5.472831225],
  type: 'column',
  color: '#AEA8A8',
  name: 'S_N_TR',
  pointStart: 77.13,
  pointRange: 25.71
}, 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 102.84,
  pointRange: .5
},

 {
  data: [5.089290648],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DE',

  pointStart: 102.84,
  pointRange: 25.71
},

 {
  data: [8.593398356],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DI',

  pointStart: 128.55,
  pointRange: 25.71
},

 {
  data: [5.06165564],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DG',

  pointStart: 154.26,
  pointRange: 25.74
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 180,
  pointRange: .5
},

 {
  data: [3.63565202],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_sec',

  pointStart: 180,
  pointRange: 19.2825
},

 {
  data: [2.033564998],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_tert',

  pointStart: 199.2825,
  pointRange: 19.2825
},

 {
  data: [1.464012915],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_work',

  pointStart: 218.465,
  pointRange: 19.2825
},

 {
  data: [1.284840194],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_other',

  pointStart: 237.6475,
  pointRange: 19.2825
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 256.83,
  pointRange: .5
},

 {
  data: [5.840454632],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_orig',

  pointStart: 256.83,
  pointRange: 8.57
},

 {
  data: [1.153663761],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_rid',

  pointStart: 265.4,
  pointRange: 8.57
},

 {
  data: [4.159545368],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_dest',

  pointStart: 273.97,
  pointRange: 8.57
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 282.54,
  pointRange: .5
},

 {
  data: [1.283496592],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_walk',

  pointStart: 282.54,
  pointRange: 25.71
},

 {
  data: [4.765886288],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_bike',

  pointStart: 308.25,
  pointRange: 25.71
},

 {
  data: [4.72029121],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_far',

  pointStart: 333.96,
  pointRange: 26.04
} 
 ]},
 {city: 'Aalst_Kerrebroek', value:[ 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 0,
  pointRange: .5
}, 
 {
  data: [0.018669156],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_AT_Park_tot',

  pointStart: 0,
  pointRange: 25.71
},

 {
  data: [0.034046693],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_CA_Park_tot',

  pointStart: 25.71,
  pointRange: 25.71,
},

 {
  data: [0],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_BTM',

  pointStart: 51.42,
  pointRange: 25.71
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 77.13,
  pointRange: .5
},

 {
  data: [2.093152671],
  type: 'column',
  color: '#AEA8A8',
  name: 'S_N_TR',
  pointStart: 77.13,
  pointRange: 25.71
}, 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 102.84,
  pointRange: .5
},

 {
  data: [3.552506153],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DE',

  pointStart: 102.84,
  pointRange: 25.71
},

 {
  data: [5.948761261],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DI',

  pointStart: 128.55,
  pointRange: 25.71
},

 {
  data: [2.559114242],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DG',

  pointStart: 154.26,
  pointRange: 25.74
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 180,
  pointRange: .5
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_sec',

  pointStart: 180,
  pointRange: 19.2825
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_tert',

  pointStart: 199.2825,
  pointRange: 19.2825
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_work',

  pointStart: 218.465,
  pointRange: 19.2825
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_other',

  pointStart: 237.6475,
  pointRange: 19.2825
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 256.83,
  pointRange: .5
},

 {
  data: [5.356539789],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_orig',

  pointStart: 256.83,
  pointRange: 8.57
},

 {
  data: [0],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_rid',

  pointStart: 265.4,
  pointRange: 8.57
},

 {
  data: [4.643460211],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_dest',

  pointStart: 273.97,
  pointRange: 8.57
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 282.54,
  pointRange: .5
},

 {
  data: [NaN],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_walk',

  pointStart: 282.54,
  pointRange: 25.71
},

 {
  data: [NaN],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_bike',

  pointStart: 308.25,
  pointRange: 25.71
},

 {
  data: [NaN],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_far',

  pointStart: 333.96,
  pointRange: 26.04
} 
 ]},
 {city: 'Aalter', value:[ 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 0,
  pointRange: .5
}, 
 {
  data: [0.800106681],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_AT_Park_tot',

  pointStart: 0,
  pointRange: 25.71
},

 {
  data: [1.707198444],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_CA_Park_tot',

  pointStart: 25.71,
  pointRange: 25.71,
},

 {
  data: [0.250426257],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_BTM',

  pointStart: 51.42,
  pointRange: 25.71
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 77.13,
  pointRange: .5
},

 {
  data: [5.731866775],
  type: 'column',
  color: '#AEA8A8',
  name: 'S_N_TR',
  pointStart: 77.13,
  pointRange: 25.71
}, 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 102.84,
  pointRange: .5
},

 {
  data: [2.11484936],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DE',

  pointStart: 102.84,
  pointRange: 25.71
},

 {
  data: [6.085789364],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DI',

  pointStart: 128.55,
  pointRange: 25.71
},

 {
  data: [2.484591493],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DG',

  pointStart: 154.26,
  pointRange: 25.74
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 180,
  pointRange: .5
},

 {
  data: [2.148048192],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_sec',

  pointStart: 180,
  pointRange: 19.2825
},

 {
  data: [0.150099573],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_tert',

  pointStart: 199.2825,
  pointRange: 19.2825
},

 {
  data: [0.510468416],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_work',

  pointStart: 218.465,
  pointRange: 19.2825
},

 {
  data: [0.928293708],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_other',

  pointStart: 237.6475,
  pointRange: 19.2825
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 256.83,
  pointRange: .5
},

 {
  data: [8.19394395],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_orig',

  pointStart: 256.83,
  pointRange: 8.57
},

 {
  data: [0.334243618],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_rid',

  pointStart: 265.4,
  pointRange: 8.57
},

 {
  data: [1.80605605],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_dest',

  pointStart: 273.97,
  pointRange: 8.57
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 282.54,
  pointRange: .5
},

 {
  data: [1.916363636],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_walk',

  pointStart: 282.54,
  pointRange: 25.71
},

 {
  data: [3.451923077],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_bike',

  pointStart: 308.25,
  pointRange: 25.71
},

 {
  data: [5.360663082],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_far',

  pointStart: 333.96,
  pointRange: 26.04
} 
 ]}
  ]
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

图表代码

<template>
  <div>
    <Rose :options="chartOptions" ref="lineCharts" :constructor-type="'chart'"></Rose>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";

HighchartsMore(Highcharts);

export default {
  props: ["options"],
  components: {
    Rose: Chart
  },
  data() {
    return {
      chartOptions: Highcharts.merge(this.options, {
        chart: {
          polar: true,
          backgroundColor: "#F5F5F5"
        },
        credits: {
          enabled: false
        },
        exporting: {
          buttons: {
            contextButton: {
              theme: {
                fill: "#F5F5F5"
              }
            }
          }
        },
        pane: {
          startAngle: -90
        },
        xAxis: {
          tickPositions:[0, 25.71, 51.42, 77.13, 102.84, 128.55, 154.26, 180, 199.2825,
          218.465, 237.6475, 256.83, 265.4, 273.97, 282.54, 308.25, 333.96],
          lineWidth: 0,
          min: 0,
          max: 360,
          labels: false
        },
        yAxis:{
          max: 10,
          tickInterval:2,
          labels: false
        },
        plotOptions: {
          series: {
                grouping: true,
                groupPadding:0,
                pointPadding:0,
                borderColor: '#000',
                borderWidth: '0',
                stacking: 'normal',
                pointPlacement: 'between',
                showInLegend: true
          },
          pane: {
            size: '100%'
        },
          column: {
            pointPadding: 0,
            groupPadding: 0          }
        }
      })
    };
  }
};
</script>
4

1 回答 1

1

您的示例没有显示图表在哪里，因此很难提供具体的解决方案。

如果图表是所列组件的子级，则通过属性传递所选值。

如果图表连接到父组件，您将发出一个带有选定值的事件。

如果图表是选择组件的同级，您将使用选定值创建计算属性。计算属性将用于配置图表。

否则你使用状态管理（Vuex），并且选择的值会改变状态。图表的数据将使用附加到 store 的计算属性进行绑定。

更新的解决方案

您的更新显示您的图表与选择位于同一组件中，您可以使用charttest它来配置它。

所以选项#3 是最好的方法。

我们会将您的图表测试移动到计算属性，以使其根据所选值进行反应。我添加了另一个名为的计算属性filteredData，现在由 charttest 计算使用，但您也可以将它们组合在同一个计算中。

您不需要按钮来触发更改，因为计算值会自动触发。 

function itemIsFiltered(selection, item){

   // If selection is not set or empty, do not show any items.
   if (selection === null || selection === undefined || selection.length === 0){
   {
      return false;
   }


   // CHOOSE ONE of these 

   // Show if item is in any selected city.
   return selection.some(theCity=>itemIsInCity(theCity, item);

   // Show if item is in every selected city.
   return selection.every(theCity=>itemIsInCity(theCity, item);
}

function itemIsInCity(city, item){
{
  // You need to determine if the item is in the city.
  // From your data, it looks like this would be pointStart and pointRange in the item.
  // It not clear how your cities store their location though...
  // You might need some trigonometry here.
}

const vueOptions = {
  computed: {

    filteredData() {
      return this.originaldata
      .filter(item => itemIsFiltered(this.selection, item))
    },

    charttest() {
      return {
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        legend: {
          enabled: false
        },
        series: this.filteredData
      }
    }
  }
}
于 2019-08-20T08:56:51.467 回答