vent-template/src/components/chart/BarSingle.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { toEchartsData } from '/@/utils/ventutil';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import EchartsUtil from '/@/utils/echartsUtil';

  export default defineComponent({
    name: 'BarAndLine',
    props: {
      chartsColumns: {
        type: Array,
        default: () => [],
      },
      chartsColumnsType: {
        type: String,
      },
      dataSource: {
        type: Object,
        default: () => {},
      },
      xAxisData: {
        type: Array,
        default: () => [],
      },
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: 'calc(100vh - 78px)',
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
      const chartData = getTableHeaderColumns(props.chartsColumnsType) || [];
      const chartsColumns = props.chartsColumns.length > 0 ? props.chartsColumns : chartData;
      const option = reactive({
        name: '',
        color: ['#7B68EE', '#0000CD', '#6495ED', '#00BFFF', '#AFEEEE', '#008080', '#00FA9A', '#2E8B57', '#FAFAD2', '#DAA520'],
        tooltip: null,
        grid: null,
        toolbox: {
          feature: {
            saveAsImage: {
              iconStyle: {
                normal: {
                  borderColor: '#ffffff',
                },
              },
              show: true,
            },
          },
        },
        dataZoom: null,
        legend: null,
        timeline: null,
        xAxis: null,
        yAxis: null,
        series: null,
      });

      watchEffect(() => {
        props.dataSource && option.series && initCharts();
      });

      function initChartsOption() {
        const optionUtil = new EchartsUtil(option);
        optionUtil.initChartOption('listMonitor', chartsColumns);
        console.log('option----------->', option);
      }
      initChartsOption();

      function initCharts() {
        //轴数据
        if (option.series) {
          const xAxisData: string[] = [];
          const seriesData = [];
          props.xAxisData.forEach((item: any) => {
            xAxisData.push(item['key']);
            seriesData.push(props.dataSource[item.valueKey] || '');
          });
          option.series[0].data = seriesData;
          option.xAxis[0].data = xAxisData;
          console.log('option------------->', option);

          setOptions(option, false);
        }
      }
      return { chartRef };
    },
  });
</script>