Highcharts-vue - Using inheritance. Multiple graphs with common properties

问题

I'm trying to apply DRY principles to may Highcharts Vue implementation.

I have a few highcharts in my Vue component, most of which are the same except for some labelling and the series data. I've been trying to abstract out the common properties without success. Consider the following Vue component;

<template>
    <div>
        <highcharts class="chart" :options="chartOptions" ref="lineChart1"></highcharts>
    </div>
        <highcharts class="chart" :options="chartOptions" ref="lineChart2"></highcharts>
    </div>
</template>

I would like to use common chart options and then try and update the series dynamically.

computed: {
    chartOptions() {
      return {
        chart: {
          type: "spline"
        },
        title: {
          text: "chart1"
        },
        series: [
          {
            data: [10, 0, 8, 2, 6, 4, 5, 5],
            color: "#6fcd98"
          }
        ]
      };
    }
  },
mounted() {
 this.fetchChart1()
 this.fetchChart2()
}
methods: {
   fetchChart1: function () {
      fetch(`${this.serverURL}/chart1`)
        .then(r => r.json())
        .then(json => { 
            const lineChart = this.$refs.lineChart1
            lineChart.chart.series[0] = json.series
            lineChart.title.text = json.title
         })
        .catch(error => console.error('Error))
    },
    fetchChart2: function () {
      fetch(`${this.serverURL}/chart2`)
        .then(r => r.json())
        .then(json => { 
            const lineChart = this.$refs.lineChart2
            lineChart.chart.series[0] = json.series
            lineChart.title.text = json.title
         })
        .catch(error => console.error('Error))
    },

}

I'm not even sure if what I'm attempting is possible but I have managed to get two charts loading using the approach above, the issue is individually accessing and updating some of their properties. The chart referencing comes from the following example which I appreciate does not use the same wrapper but I have utilized this approach to update the charts in realtime.

https://codesandbox.io/s/jjyqvv0k13

(see lineChart example)

来源：https://stackoverflow.com/questions/58084961/highcharts-vue-using-inheritance-multiple-graphs-with-common-properties

标签

Vue.js

Highcharts