sl-sfy-safety/src/views/datamanager/platformdata/charts/LineChart.vue

<template>
  <div id="line-chart" ref="lineChart" class="chart" :style="{ height: props.height }"></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts/core';
  import {
    GridComponent,
    GridComponentOption,
    DataZoomComponent,
    DataZoomComponentOption,
    TooltipComponent,
  } from 'echarts/components';
  import { LineChart, LineSeriesOption } from 'echarts/charts';
  import { UniversalTransition } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';
  import { onMounted, watch } from 'vue';

  echarts.use([
    GridComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
    DataZoomComponent,
    TooltipComponent,
  ]);
  type EChartsOption = echarts.ComposeOption<
    GridComponentOption | LineSeriesOption | DataZoomComponentOption
  >;
  const props = withDefaults(
    defineProps<{
      chartData: any[];
      chartLable: string[];
      height?: string;
    }>(),
    {
      height: '372px',
    },
  );

  let lineOption: EChartsOption = {} as EChartsOption;

  onMounted(() => {
    const line: echarts.ECharts = echarts.init(document.getElementById('line-chart')!);

    initLineChart(line);
  });

  watch(
    () => props.chartData,
    () => {
      const line: echarts.ECharts = echarts.init(document.getElementById('line-chart')!);
      drawLineChart(line);
    },
    {
      deep: true,
    },
  );

  const initLineChart = (line: echarts.ECharts) => {
    lineOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      dataZoom: [
        {
          startValue: 0,
          endValue: 13,
          type: 'inside',
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: props.chartLable,
          axisLabel: {
            rotate: 45,
          },
        },
      ],
      yAxis: [
        {
          name: '访问次数',
          type: 'value',
        },
      ],
      series: props.chartData.map((item) => {
        return {
          name: item.workshopName,
          type: 'line',
          showSymbol: false,
          data: item.counts,
        };
      }),
    };
    console.log(lineOption);

    line.setOption(lineOption);
  };

  const drawLineChart = (line: echarts.ECharts) => {
    line.clear();
    lineOption.xAxis = [
      {
        type: 'category',
        data: props.chartLable,
        axisLabel: {
          rotate: 45,
        },
      },
    ];
    lineOption.series = props.chartData.map((item) => {
      return {
        name: item.workshopName,
        type: 'line',
        showSymbol: false,
        data: item.counts,
      };
    });
    line.setOption(lineOption);
  };
</script>

<style scoped lang="scss">
  #line-chart {
    width: 968px;
    height: 372px;
  }
</style>