Как иметь несколько диаграмм с данными разных серий в vuejs без повторения кода

Question

Я хочу иметь несколько диаграмм highchart с разными данными на моей странице, без необходимости повторять код highchart.

вот как я определяю свой highchart

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 Я могу повторить высокие диаграммы, но все диаграммы будут получать одни и те же данные. Есть ли способ, которым я мог бы отправить данные на конкретную диаграмму, чтобы она отличалась от других?

Answer 1

Вы передаете chartOptions компоненту highcharts. Если вы определили эти данные в родительском компоненте, Vue сделает их реактивными, поэтому при изменении данных диаграмма обновится автоматически.

Ниже приведен базовый c пример того, как это будет работать:

<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>

EDIT:

Чтобы создать несколько диаграмм с одинаковыми параметрами, вы можете создать пользовательский компонент диаграммы и передать только ряд данных в качестве опоры:

<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>

Обратите внимание на то, что вы должны настроить наблюдатель на 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>