Estoy usando Vue 3 y Echart. La función era que cuando se detectaban cambios en las opciones, el gráfico se actualizaba en consecuencia.

 <template> <div ref="theChart" :style="{ height: '400px' }"></div> </template> <script lang="ts"> import { defineComponent } from "vue"; import * as echarts from "echarts"; import * as _ from "lodash"; type EChartsOption = echarts.EChartsOption; export default defineComponent({ name: "LineChart", components: {}, props: { options: { type: Object, required: true, }, }, mounted() { this.drawChart(this.options); }, watch: { options: { handler(newOptions, oldOptions) { if (!_.isEqual(oldOptions, newOptions)) { console.info("hello"); this.drawChart(newOptions); } }, deep: true, }, }, methods: { drawChart(options: EChartsOption) { const chartElement = this.$refs.theChart as HTMLElement; const chart = echarts.init(chartElement, undefined, { renderer: "svg", }); chart.setOption(options, true); }, }, }); </script>

Pero recibí la siguiente "advertencia" pero funciona bien

Por supuesto, traté de poner this.echartsModule.init(XXXX) en un componente de datos. Pero recibí el siguiente error cuando hice clic en la leyenda del gráfico https://github.com/apache/echarts/issues/14198 Es por eso que solía poner this.echartsModule.init(XXXX) en const como dijo zhenghaiyang . ¿Tiene una mejor solución para evitar reescribir echartsModule.init(XXXX)? ¡Gracias por adelantado!