从v-for生成高图，而不是用数据填充所有的图形。

Question

我正在使用highcharts来生成一些极地图。https:/codesandbox.iosvue-template-nibjp?file=srcApp.vue。

我们的想法是，一旦用户按下更新键，就会拉出一个新的数组，并在此基础上生成n个数量的图表。

这是图表的代码。

<template>
  <div>
    <highcharts :options="chartOptions" ref="lineCharts" :constructor-type="'chart'"></highcharts>
  </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: {
    highcharts: Chart 
  },
   watch: {
    options: {
      handler(newOpt) {
        this.chartOptions.series = newOpt.series
      },
      deep: true
    }
  },
  data() {
    return {
    chartOptions: Highcharts.merge(this.options, {
      chart: {
          polar: true,

        },
        tooltip: {
          }, 
        title: {
          text: null
            },
        subtitle: {
          text:null
        },
        legend: {
          enabled: false
        },
        credits: {
          enabled: false
        },
        lang: {
        noData: null
        },
        exporting: {
          buttons: {
            contextButton: {
              theme: {
                fill: "#F5F5F5"
              }
            }
          }
        },

    pane: {
        startAngle: -60,
            size: '100%'
    },

    xAxis: {
        tickPositions:[0,120,240],
        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
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },

    series: [
      {
        data: [],
        type: 'column',
        name: 'On-time',
        color: "#1DACE8",
        pointStart: 0,
        pointRange: 120
    },
    {
        data: [],
        type: 'column',
        name: 'Fare',
        color: "#EDCB64",
        pointStart: 120,
        pointRange: 120
    },
    {
        data: [],
        type: 'column',
        name: 'Route Share',
        color: "#F24D29",
        pointStart: 240,
        pointRange: 120
    }
    ]
})
  }}
    }
</script>

还有页面的代码

<template>
  <div id="app">
    <button @click="updateChart">Update</button>
    <v-item-group>
      <v-container>
        <v-row>
          <v-col v-for="(chart, index) in chartSet" :key="index" cols="2">
            <highcharts v-bind:options="chart"/>
          </v-col>
        </v-row>
      </v-container>
    </v-item-group>
  </div>
</template>

<script>
import Chart from "./components/Chart";

var newSet = [
  { series: [{ data: [8] }, { data: [2] }, { data: [10] }] },
  { series: [{ data: [4] }, { data: [6] }, { data: [3] }] },
  { series: [{ data: [2] }, { data: [3] }, { data: [1] }] }
];

export default {
  name: "App",
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartSet: [
        { series: [{ data: [] }, { data: [] }, { data: [] }] },
        { series: [{ data: [] }, { data: [] }, { data: [] }] },
        { series: [{ data: [] }, { data: [] }, { data: [] }] }
      ]
    };
  },
  methods: {
    updateChart() {
      this.chartSet = newSet;
    }
  }
};
</script>

<style>
</style>

我遇到的问题是： 如果chartSet比newSet大，而且newSet（有3个图表的数据），一切都能正常工作，图表也能如期填充。

 chartSet: [
        { series: [{ data: [] }, { data: [] }, { data: [] }] },
        { series: [{ data: [] }, { data: [] }, { data: [] }] },
        { series: [{ data: [] }, { data: [] }, { data: [] }] },
        { series: [{ data: [] }, { data: [] }, { data: [] }] }
      ]

newSet = [
  { series: [{ data: [8] }, { data: [2] }, { data: [10] }] },
  { series: [{ data: [4] }, { data: [6] }, { data: [3] }] },
  { series: [{ data: [2] }, { data: [3] }, { data: [1] }] }
];

如果chartSet比newSet小，那么只有第一个图表被填充。

 chartSet: [
        { series: [{ data: [] }, { data: [] }, { data: [] }] }
      ]

newSet = [
  { series: [{ data: [8] }, { data: [2] }, { data: [10] }] },
  { series: [{ data: [4] }, { data: [6] }, { data: [3] }] },
  { series: [{ data: [2] }, { data: [3] }, { data: [1] }] }
];

问题是，我无法预先知道newSet会有多大，因为这取决于用户的输入。因此，我可以创建一个有20个条目的chartSet，但是我的页面将被填充为空图，直到用户按下更新键，这看起来并不确定。我怎样才能只从一个图形开始，然后根据需求填充所有其余的图形？

Answer 1

要实现这个功能，你必须只更新系列数据，而不是整个系列对象。

  watch: {
    options: {
      handler(newOpt) {
        const newChartSeries = [];

        this.chartOptions.series.forEach(function(series, i) {
          newChartSeries.push(Highcharts.merge(
            series,
            newOpt.series[i]
          ));
        });

        this.chartOptions.series = newChartSeries;
      },
      deep: true
    }
  },
  created: function() {
    const newChartSeries = [];
    const options = this.options;

    this.plotOptions.series.forEach(function(series, i) {
      newChartSeries.push(Highcharts.merge(
        series,
        options.series[i]
      ));
    });

    this.chartOptions = Highcharts.merge(this.plotOptions, {
      series: newChartSeries
    });
  },
  data() {
    return {
      plotOptions: {
        ...
        plotOptions: {
          series: {
            grouping: true,
            groupPadding: 0,
            pointPadding: 0,
            borderColor: '#000',
            borderWidth: '0',
            stacking: 'normal',
            pointPlacement: 'between',
            showInLegend: true
          },
          column: {
            pointPadding: 0,
            groupPadding: 0
          }
        },
        series: [{
          data: [],
          type: 'column',
          name: 'On-time',
          color: "#1DACE8",
          pointStart: 0,
          pointRange: 120
        }, {
          data: [],
          type: 'column',
          name: 'Fare',
          color: "#EDCB64",
          pointStart: 120,
          pointRange: 120
        }, {
          data: [],
          type: 'column',
          name: 'Route Share',
          color: "#F24D29",
          pointStart: 240,
          pointRange: 120
        }]
      },
      chartOptions: null
    }
  }

演示： https:/codesandbox.iosvue-template-1gyhw。