vue+ts+echarts 使用

<template>
  <div id="sales" ref="sales" class="sales"></div>
</template>

<script setup lang="ts">
  import * as Charts from 'echarts/core';
  import { GridComponent, GridComponentOption, TransformComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  import { BarChart, BarSeriesOption, PictorialBarSeriesOption, LineSeriesOption } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import { ref, Ref, onMounted } from 'vue';

  Charts.use([GridComponent, TransformComponent, BarChart, CanvasRenderer, TooltipComponent, LegendComponent]);

  type EChartsOption = Charts.ComposeOption<GridComponentOption | BarSeriesOption | LineSeriesOption | PictorialBarSeriesOption>;

  type List = {
    name: string;
    list: Array<string | any>;
    dataX: Array<string>;
    dataY: Array<number>;
    dataZ?: Array<number>;
    month?: string; // 月份：1月，2月
    year?: string; // 年份
    gsgyzcz?: string; // 工业开票销售
  };

  const sales: Ref<HTMLElement | null> = ref(null);

  let chart: Charts.EChartsType;

  let objArr = reactive<List>({
    name: '工业开票销售',
    list: [],
    dataX: ['7月', '8月', '9月', '10月', '11月', '12月'], //名称,
    dataY: [30, 54, 50, 60, 36, 54],
    dataZ: [40.3, 64.5, 70.5, 80.7, 86.8, 74.9],
  });
  onMounted(() => {
    chart = Charts.init(sales.value as HTMLElement);
    initChart();
  });
  const initChart = () => {
    const option: EChartsOption = {
      grid: {
        top: '15%',
      },
      tooltip: {
        // trigger: 'axis',
        // axisPointer: {
        //   type: 'cross',
        // },
        show: true,
      },
      legend: {
        right: '4%',
        data: ['同比增长（%）'],
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: objArr.dataX,
          axisLabel: {
            interval: 0,
            margin: 10,
            color: '#fff',
            rotate: 0,
            fontSize: 11,
          },
          axisTick: {
            //刻度
            show: false,
          },
        },
      ],
      yAxis: [
        {
          name: '亿元',
          //name的样式设计
          nameTextStyle: {
            align: 'left',
            padding: [0, 0, 0, -30],
            color: '#fff',
          },
          axisLabel: {
            padding: [3, 0, 0, 0],
            formatter: '{value}',
            color: '#fff',
            fontSize: 11,
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(204, 204, 204, 0.2)',
            },
          },
        },
        {
          type: 'value',
          nameTextStyle: {
            color: '#666666',
          },
          position: 'right',
          axisLine: {
            lineStyle: {
              color: '#cdd5e2',
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            formatter: '{value} ', //右侧Y轴文字显示
            color: 'rgba(0, 0, 0, 1)',
          },
        },
      ],
      series: [
        {
          name: '',
          type: 'bar',
          data: objArr.dataY,
          barWidth: '13',
          itemStyle: {
            color: new Charts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 1,
                  color: 'rgba(234,150,52,1)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(234,150,52,0.8)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(234,150,52,0.5)',
                },
                {
                  offset: 0.09,
                  color: 'rgba(234,150,52,0.1111)',
                },
              ],
              false,
            ),
          },
          label: {
            show: true,
            position: 'top',
            color: '#fff',
            formatter: (params) => {
              let str = `{value|${params.value}}`;
              return str;
            },
            rich: {
              value: {
                color: '#fff',
                textBorderWidth: 2,
                textBorderColor: 'rgba(234,150,52,0.7)',
              },
            },
          },
        },
        //顶部横线
        {
          type: 'pictorialBar',
          z: 3,
          symbolPosition: 'end',
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [13, 1],
          itemStyle: {
            color: 'rgba(234,150,52,1)',
          },
          data: objArr.dataY,
        },
        {
          name: '同比增长（%）',
          type: 'line',
          data: objArr.dataZ,
          symbolSize: 8,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 0,
          label: {
            show: true,
            formatter: (params) => {
              let str = `{value|${params.value}}`;
              return str;
            },
            rich: {
              value: {
                color: '#fff',
                textBorderWidth: 2,
                textBorderColor: 'rgba(20, 219, 255, 0.7)',
              },
            },
          },
          lineStyle: {
            // width:1 ,
            color: new Charts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(20, 219, 255, 0.5)',
              },
              {
                offset: 1,
                color: 'rgba(20, 219, 255, 0.6)',
              },
            ]),
            shadowColor: 'rgba(20, 219, 255, 0.4)',
          },
          itemStyle: {
            color: '#fff',
            borderColor: 'rgba(20, 219, 255, 1)',
            borderWidth: 1,
            shadowColor: 'rgba(20, 219, 255, 0.7)',
            shadowBlur: 1,
          },
        },
      ],
    };
    chart.setOption(option);
  };
</script>