the main problem is that the title is the same.
< hr >this is my highchats wrapper, and the test attribute is what I use to test and listen.
<template>
<div :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import { debounce } from "@/utils";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
props: {
className: {
type: String,
default: "chart"
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "350px"
},
test: {
type: String,
default: ""
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object
}
},
name: "highcharts",
data() {
return {
chart: null,
options: Object
};
},
mounted() {
this.initChart();
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.reflow();
}
}, 100);
window.addEventListener("resize", this.__resizeHanlder);
}
//
const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
},
beforeDestroy() {
if (!this.chart) {
return;
}
if (this.autoResize) {
window.removeEventListener("resize", this.__resizeHanlder);
}
const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);
this.chart.destroy();
this.chart = null;
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
console.log(val)
}
},
test:{
handler(val){
console.log(val)
}
}
},
methods: {
setOptions(expectedData) {
this.options = expectedData
},
initChart() {
this.setOptions(this.chartData);
this.chart = new Highcharts.Chart(this.$el, this.options);
}
}
};
</script>
the following is the page call
<Highchats :chart-data="temp_data.Highchats_linedata"></Highchats>
I define the entire configuration object of highchats in the data of the parent component. When the page is loaded for the first time, it will render normally.
but when I change the data of this configuration object through the method, the monitor in highchats cannot hear it. Please give me some advice.
I read a lot of answers on the Internet, all of which are to create a chart, get an instance of the chart, and then update the chart by calling the function of highchats.
but I don"t see that in the component, it is not feasible to let highchats update itself through monitoring.