<!--
 * @Date: 2024-03-01 09:40:27
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-03-30 06:14:10
 * @FilePath: /custom_dashboard/src/components/DynamicChart.vue
 * @Description: 文件描述
-->
<template>
  <div :ref="chartRef" class="dynamic-chart" :style="{ width: width, height: wrapper_height, marginTop: titleHeight + 'px'}"></div>
</template>

<script>
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart, LineChart, RadarChart, FunnelChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LineChart,
  RadarChart,
  FunnelChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default {
  name: 'DynamicChart',
  props: ['chartOptions', 'chartData', 'width', 'height', 'titleHeight'],
  data() {
    return {
      chartRef: 'chartContainer',
      chartInstance: null,
      wrapper_height: '',
    };
  },
  watch: {
    height (val) {
      if (val) {
        this.wrapper_height = val;
      }
    }
  },
  mounted() {
    this.wrapper_height = this.height;
    setTimeout(() => {
      this.initChart();
    }, 200);
  },
  beforeDestroy() {
    this.destroyChart();
  },
  methods: {
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      if (chartContainer) {
        this.chartInstance = echarts.init(chartContainer);
        this.chartInstance.setOption(this.chartOptions);
      }
    },
    destroyChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    updateChart() {
      this.chartInstance.setOption(this.chartOptions);
    },
  }
};
</script>

<style scoped>
.dynamic-chart {
  padding: 10px;
}
</style>