Echarts环形图引线设置

直接上图吧

直接上代码吧

let labelArr = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
let valueArr = [
  { value: 335, name: '直接访问' },
  { value: 310, name: '邮件营销' },
  { value: 234, name: '联盟广告' },
  { value: 135, name: '视频广告' },
  { value: 154, name: '搜索引擎' }
];
let colorArr = [
  '#c23531',
  '#2f4554',
  '#61a0a8',
  '#d48265',
  '#91c7ae',
  '#749f83',
  '#ca8622',
  '#bda29a',
  '#6e7074',
  '#6e7074',
  '#c4ccd3'
]; //注册组件;
option = {
  title: {
    text: '图例显示值',
    x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
    y: '20px', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
    textAlign: 'center' //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
  },
  graphic: [
    //为环形图中间添加文字
    {
      type: 'text',
      left: 'center',
      top: '50%',
      style: {
        text: '总量',
        textAlign: 'center',
        fill: '#666666',
        fontSize: '30'
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '55%',
      style: {
        text: '340',
        textAlign: 'center',
        fill: '#91c7ae',
        fontSize: '38'
      }
    }
  ],
  tooltip: {
    backgroundColor: '#FFFFFF',
    borderWidth: '1',
    borderColor: '#E5E5E5',
    padding: 10,
    extraCssText: 'box-shadow: 0 0 7px 0 rgba(0,0,0,0.10);',
    textStyle: {
      color: '#333333',
      fontSize: '12px'
    },
    formatter: function (params) {
      let name = params.name;
      return (
        name +
        '<br/>' +
        '<span style="color:#3894FF;font-size: 14px;" >' +
        params.value +
        '</span>&emsp;' +
        '件' +
        '(' +
        params.percent +
        '%)'
      );
    }
  },
  legend: {
    orient: 'vertical',
    icon: 'circle',
    top: '50px',
    left: '20px',
    itemWidth: 9,
    itemHeight: 9,
    formatter: function (name) {
      let value = 0;
      for (let i = 0; i < valueArr.length; i++) {
        if (valueArr[i].name === name) {
          value = valueArr[i].value;
        }
      }
      return name + '(' + value + ')';
    },
    textStyle: {
      color: '#666666',
      fontSize: '14'
    }
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: true,
      label: {
        formatter: '{a|{b}}\n {b|{c} 件} \n  {per|{d}%}  ',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: 'red',
            fontSize: '80%',
            lineHeight: 22,
            align: 'center',
            padding: [2, 4]
          },

          b: {
            fontSize: '100%',
            align: 'center',
            fontWeight: 'bold',
            lineHeight: 22
          },
          per: {
            fontSize: '80%',
            color: '#666666',
            align: 'center',
            padding: [2, 4],
            borderRadius: 4
          }
        }
      },
      labelLine: {
        length: 35,
        length2: 20,
        maxSurfaceAngle: 80
      },
      center: ['50%', '55%'],
      data: valueArr,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    {
      name: '内边框',
      type: 'pie',
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      center: ['50%', '55%'],
      radius: ['26%', '27%'],
      label: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 9,
          name: '',
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#61bad3'
            }
          }
        }
      ]
    }
  ],
  color: colorArr
};