eta_chart_front/src/components/chart.vue

<!--  -->
<template>
  <div id="container" class="chart"></div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onMounted, PropType } from 'vue';
import Highcharts from 'highcharts/highstock';
import HighchartszhCN from '@/utils/highcahrts-zh_CN';
import { defaultOpts } from '@/utils/chartOptions';

HighchartszhCN(Highcharts);

export default defineComponent({
  name: '',
  props: {
    chartId: {
      type: Number,
      required: true,
    },
    options: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const chart = ref({});

    /* 设置options */
    const init = (): void => {
      const new_options: any = { ...defaultOpts, ...props.options };

      //stock不支持线形图只支持时间图 画散点图用原始chart
			let is_scatter = props.options.series ? props.options.series.every((_: any) => _.type === 'scatter') : false ;
			chart.value = is_scatter ? Highcharts.chart("container", new_options) : Highcharts.stockChart("container",new_options);
    };

    onMounted((): void => {
      init();
    });

    watch(
      () => props.options,
      (newval) => {
        console.log('reload');
        init();
      }
      // {
      //   immediate: true
      // }
    );

    return {};
  },
});
</script>
<style scoped lang="less">
.chart {
  height: 100%;
}
</style>