vue3 + echarts（5.6.0）实现渐变漏斗图

/**
 * 图表
 */
type EChartsOption = echarts.EChartsOption;
let chartDom;
let trendAnalysisChart: echarts.ECharts;
// 监听窗口变化
const resizeHandler = () => trendAnalysisChart.resize();
window.addEventListener('resize', resizeHandler);
function getChart() {
  chartDom = document.getElementById('chartFEquipOtherDom')!;
  trendAnalysisChart = echarts.init(chartDom, 'dark');
  let option: {
    color: ({ x: number; y: number; y2: number; globalCoord: boolean; x2: number; colorStops: ({ offset: number; color: string } | { offset: number; color: string })[]; type: string } | { x: number; y: number; y2: number; globalCoord: boolean; x2: number; colorStops: ({ offset: number; color: string } | { offset: number; color: string })[]; type: string } | { x: number; y: number; y2: number; globalCoord: boolean; x2: number; colorStops: ({ offset: number; color: string } | { offset: number; color: string })[]; type: string } | { x: number; y: number; y2: number; globalCoord: boolean; x2: number; colorStops: ({ offset: number; color: string } | { offset: number; color: string })[]; type: string } | { x: number; y: number; y2: number; globalCoord: boolean; x2: number; colorStops: ({ offset: number; color: string } | { offset: number; color: string })[]; type: string })[]; series: { top: number; data: any[]; left: string; bottom: number; gap: number; width: string; itemStyle: { normal: { borderWidth: number; opacity: number } }; sort: string; label: { formatter: string; position: string }; labelLine: { normal: { show: boolean; position: string }; emphasis: { textStyle: { background: string; fontSize: number } } }; type: string }[]; tooltip: { formatter: string; trigger: string }
  };
  let colors = [
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: 'rgba(44,226,217,0.8)'
      }, {
        offset: 1, color: 'rgba(44,226,217,0.2)'
      }],
      globalCoord: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: 'rgba(66,164,255,0.8)' // 0% 处的颜色
      }, {
        offset: 1, color: 'rgba(66,164,255,0.2)' // 0% 处的颜色
      }],
      globalCoord: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: 'rgba(251,226,81,0.8)' // 0% 处的颜色
      }, {
        offset: 1, color: 'rgba(251,226,81,0.2)' // 0% 处的颜色
      }],
      globalCoord: false // 缺省为 false
    }, {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: 'rgba(255,178,85,0.8)' // 0% 处的颜色
      }, {
        offset: 1, color: 'rgba(255,178,85,0.2)' // 100% 处的颜色
      }],
      globalCoord: false // 缺省为 false
    }, {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: 'rgba(255,64,64,0.8)' // 0% 处的颜色
      }, {
        offset: 1, color: 'rgba(255,64,64,0.2)' // 100% 处的颜色
      }],
      globalCoord: false // 缺省为 false
    }
  ];
  let lineargroup = [
  {
    "name": "一般火灾",
    "value": 4
  },
  {
    "name": "较大火灾",
    "value": 11
  },
  {
    "name": "重大火灾",
    "value": 1
  },
  {
    "name": "特别重大火灾",
    "value": 1
  },
  {
    "name": "其他火灾等级",
    "value": 0
  }
];
  option = {
    color: colors,
    tooltip: {
      trigger: 'item',
      formatter: "{b}:{c}"
    },
    series: [
      {
        type: 'funnel',
        left: '0',
        top: 30,
        bottom: 30,
        width: '70%',
        sort: 'descending',
        gap: 2,
        label: {
          position: '',
          formatter: '{b}-----{d}'
        },
        labelLine: {
          normal: {
            show: true,
            position: ''
          },
          emphasis: {
            textStyle: {
              fontSize: 12,
              background: 'regb(0,0,0,0)'
            }
          }
        },
        itemStyle: {
          normal: {
            opacity: 1,
            borderWidth:0
          }
        },
        data: lineargroup
      },
    ]
  };
  option && trendAnalysisChart.setOption(option);
}