echarts漏斗图自定义label左右位置设置

import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Input, message, Button, Select, DatePicker, Row, Col } from 'antd';
import * as echarts from 'echarts';
import Icon from '@/components/Icon';
import style from '../../index.less';
const colors = ['#30E3E5', '#5AA4FC', '#BE3EF2 ', '#F0C219', '#1B4BFE'];
export default (props) => {
  useEffect(() => {
    charts(...props.data);
  }, [props.data]);
  const charts = (sourceData) => {
    const { data, text } = sourceData;
    if (!document.getElementById(props.id ? props.id : 'funnel')) {
      return;
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(props.id ? props.id : 'funnel'));
    // 绘制图表
    myChart.setOption({
      // 整个图例
      grid: {
        left: '3%',
        right: '3%',
        bottom: '7%',
        containLabel: true,
      },
      legend: { left: 10 },
      title: {
        text: text, //主标题文本，'\n'指定换行
        x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        y: '10', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        textStyle: {
          //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          // fontFamily: 'Arial, Verdana, sans...',
          fontSize: 16,
          fontStyle: 'normal',
          fontWeight: 'bold',
        },
      },
      tooltip: {
        show: false,
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}',
      },
      legend: {
        // data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
        show: false,
      },
      series: [
        {
          name: 'Funnel',
          type: 'funnel',
          left: '5%',
          right: '5%',
          top: '15%',
          // x2: 80,
          bottom: '10%',
          width: '80%',
          // height: {totalHeight} - y - y2,
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          // sort: 'ascending',
          gap: 0,
          funnelAlign: 'center',
          /*   markLine: {
            symbol: 'none',
            zlevel: 0,
            data: [
              [
                { x: '45%', y: '28%' },
                {
                  x: '90%',
                  y: '28%',
                  value: 20,
                  lineStyle: { color: 'rgba(255, 255, 255, 0)' },
                },
              ],
              [
                { x: '45%', y: '54%' },
                {
                  x: '90%',
                  y: '54%',
                  value: 40,
                  lineStyle: { color: 'rgba(255, 255, 255, 0)' },
                },
              ],
              [
                { x: '45%', y: '80%' },
                {
                  x: '90%',
                  y: '80%',
                  value: 60,

                  lineStyle: { color: 'rgba(255, 255, 255, 0)' },
                },
              ],
            ],
          }, */

          label: {
            show: true,
            position: 'center',
            color: '#000',
            textBorderColor: '#000',
            formatter: function (params) {
              return `{title|${params.name}}{value|${params.value}} `;
            },
            textStyle: {
              rich: {
                title: {
                  width: 100,
                  textAlign: 'left',
                  fontSize: 16,
                  padding: [0, 320, 0, 0],
                },
                value: {
                  width: 100,
                  textAlign: 'right',
                  fontSize: 14,
                  padding: [0, 0, 0, 320],
                },
              },
            },
          },
          labelLine: {
            show: false,
            length: 20,
            lineStyle: {
              width: 1,
              type: 'solid',
            },
          },

          emphasis: {
            label: {
              fontSize: 20,
            },
          },
          data: data,
        },
      ],
    });
  };
  return (
    <div>
      <div
        style={{ width: props.width, height: props.height }}
        id={props.id ? props.id : 'funnel'}
      />
    </div>
  );
};