adweb3-web/src/views/adweb/data/chart/areaChart.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, onMounted, watch } from 'vue';

  import { useECharts } from '/@/hooks/web/useECharts';

  export default defineComponent({
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '350px',
      },
      dataSource:{
        default:{
          x:[],
          pv:[],
          uv:[],
          enquiry: []
        }
    },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);

      const updateChart = () => {
        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                show: true,
                backgroundColor: '#333',
              },
            },
          },
          legend: {
            data: ['访客数(UV)', '浏览量(PV)', '询盘数(EN)'],
            textStyle: {
              color: '#ccc',
            },
          },
          xAxis: {
            data: props.dataSource.x,
            axisLine: {
              lineStyle: {
                color: '#ccc',
              },
            },
          },
          yAxis: {
            splitLine: { show: true },
            axisLine: {
              lineStyle: {
                color: '#ccc',
              },
            },
          },
          series: [
            {
              name: '访客数(UV)',
              type: 'line',
              smooth: false,
              symbol: 'circle',
              showAllSymbol: 'auto',
              symbolSize: 6,
              lineStyle: {
                color: '#53A2D3',
              },
              itemStyle: {
                color: '#53A2D3',
              },
              data: props.dataSource.pv,
            },
            {
              name: '浏览量(PV)',
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#FF951A',
              },
              itemStyle: {
                color: '#FF951A',
              },
              data: props.dataSource.uv,
            },
            {
              name: '询盘数(EN)',
              type: 'line',
              symbol: 'circle',
              z: -12,
              lineStyle: {
                color: '#399C5C',
              },
              itemStyle: {
                color: '#399C5C',
              },
              data: props.dataSource.enquiry,
            }
          ],
        });
      };

      watch(
        () => props.dataSource,
        () => {
          updateChart();
        },
        { deep: true }
      );

      onMounted(() => {
        updateChart();
      });

      return { chartRef };
    },
  });
</script>