daimp-front/sub-operation-service/src/components/custom-echart-mixin/index.vue

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<script>
import { ref, reactive, watchEffect } from 'vue';
import { cloneDeep } from 'lodash';
import { useEcharts } from '@/hooks/useEcharts';

export default {
  name: 'CustomEchartMixin',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: 'calc(100vh - 78px)',
    },
  },
  setup(props) {
    const chartRef = ref(null);
    const { setOptions, startAutoPlay } = useEcharts(chartRef);
    const option = reactive({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true,
            backgroundColor: '#333',
          },
        },
      },
      xAxis: {
        show: false,
        type: 'category',
        data: [],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'bar',
          type: 'bar',
          data: [],
          itemStyle: {
            barWidth: 10,
          },
        },
      ],
    });

    watchEffect(() => {
      props.chartData && initCharts();
    });

    function initCharts() {
      console.log(props.option);
      if (props.option.series) {
        Object.assign(option, cloneDeep(props.option));
      } else {
        if (props.option) {
          Object.assign(option, cloneDeep(props.option));
        }
        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
        let seriesData = [];
        typeArr.forEach((type, index) => {
          const barStyle = props.option?.barStyle ?? {};
          let obj = { name: type, ...barStyle };
          let chartArr = props.chartData.filter((item) => type === item.type);
          obj['data'] = chartArr.map((item) => item.value);
          obj['type'] = chartArr[0].seriesType;
          obj['stack'] = chartArr[0].stack;
          obj['itemStyle'] = chartArr[0].itemStyle;
          seriesData.push(obj);
        });
        option.series = seriesData;
        option.xAxis.data = xAxisData;
      }

      setOptions(option);
      startAutoPlay({
        interval: 2000,
        seriesIndex: 0,
        showTooltip: true,
      });
    }
    return { chartRef };
  },
};
</script>