Echart饼图图形上的文本标签结构样式调整

option = {
  title: {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      avoidLabelOverlap: true,//防止文本重叠
      label: {
        normal: {
          formatter: function (params) {
            return `{b| ${params.name}}\n{c|${params.value}}`;

          },
          padding: [5, -130, -1, -130],//2020-07-24 新增 控制文本是否在横线上
          rich: {
            b: {
              fontSize: 12,
              lineHeight: 20,
              color: '#41B3DC',
              border: '1px solid #e1e1e1'

            },
            c: {
              fontSize: 20,
              lineHeight: 20,
              color: 'orange'
            }

          }

        }
      },
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {d}%",
    extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
    backgroundColor: "rgba(255,255,255,.8)",
    textStyle: {
      color: "#000",
      fontSize: 12
    }
  },
  color: ["#f66766", "#cf8aff", "#6d87ff", "#31c3b8", "#ffd279"],

  series: [
    {
      name: "商品价格区间占比",
      type: "pie",
      radius: "60%",
      center: ["50%", "50%"],
      avoidLabelOverlap: true,//防止文本重叠
      data: [
        { value: n1, name: "30元以下" },
        { value: n2, name: "30~50元" },
        { value: n3, name: "50~100元" },
        { value: n4, name: "100~500元" },
        { value: n5, name: "500元以上" }
      ],
      label: {
        show: true,
        position: "outside",
        formatter: "{a|{b}：{d}%}\n{hr|}",
        rich: {
          hr: {
            backgroundColor: "t",
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
          },
          a: {
            padding: [-30, 15, -20, 15]
          }
        }
      },
      labelLine: {
        normal: {
          length: 10,
          length2: 10,
          lineStyle: {
            width: 1
          }
        }
      }
    }
  ]
};