如何在vuejs中使用不同系列数据创建多个图表，而无需重复代码

Question

我想在我的页面中有多个带有不同数据的图表，而无需重复代码图表。

这是我如何定义我的图表

chartOptions: {
    chart: {
      type: "pie"
    },
    title: {
      text: ""
    },

    credits: {
      enabled: false
    },

    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %'
        }
      }
    },
    series: [
      { 
        name: 'Comparison',
        data: [],
      },
    ]
  },

我这样称呼它为html-

<highcharts :options="chartOptions"  id="chart1"></highcharts>

我使用事件总线侦听器将数据发送到highchart系列

 EventBus.$on("btn-clicked", data => {
  this.chartOptions.series[0].data = data.newData;
});

因为我使用highchart-vuejs包装器，所以我可以重复highcharts，但是所有图表都将获得相同的数据。有没有一种方法可以将数据发送到特定图表，因此与其他图表不同？

Answer 1

您正在将chartOptions传递到highcharts组件中。如果您在父组件上定义了此数据，则Vue将使其具有反应性，因此，当您更改数据时，图表将自动更新。

下面是如何工作的基本示例：

<template>
  <div>
    <highcharts :options="chartOptions[0]"></highcharts>
    <highcharts :options="chartOptions[1]"></highcharts>
    <button @click="changeData">Change data for first chart</button>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions: [
        {
          series: [
            {
              data: [1, 2, 3]
            }
          ]
        },
        {
          series: [
            {
              data: [4, 5, 6]
            }
          ]
        },
      ]
    }
  },
  methods: {
    changeData() {
      this.chartOptions[0].series[0].data = [4, 8, 1];
    }
  }
};
</script>

编辑：

要创建具有相同选项的多个图表，您可以创建一个自定义图表组件，并仅将数据系列作为参数传递：

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  name: 'CustomPie',
  components: {
    highcharts: Chart
  },
  props: ['data'],
  data() {
    return {
      chartOptions: {
        chart: {
          type: "pie"
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
          }
        },
        series: [
          { 
            name: 'Comparison',
            data: this.data,
          },
        ]
      },
    }
  },
  watch: {
    data(newVal) {
      this.chartOptions.series[0].data = newVal;
    }
  }
};
</script>

[Note必须在data道具上设置观察者，以便在数据更改时更新组件chartOptions。

并且您的父组件（您要在其中显示图表）看起来像这样：

<template>
  <div>
    <CustomPie :data="chartData1" />
    <CustomPie :data="chartData2" />
    <button @click="changeData">Change data for first chart</button>
  </div>
</template>

<script>
import CustomPie from "./CustomPie";

export default {
  components: {
    CustomPie
  },
  data() {
    return {
      chartData1: [1,2,3],
      chartData2: [4,5,6]
    }
  },
  methods: {
    changeData() {
      this.chartData1 = [4, 8, 1];
    }
  }
};
</script>