带边框的饼图echarts 饼配置项内容和展示

配置项如下
        var colorList = ['#2859ff', '#3990fd', '#49c988', '#e7b001']
  var data = [
    {
      name: '国家级科研院所',
      value: 5600
    },
    {
      name: '国家级重点实验室',
      value: 3600
    },
    {
      name: '国家级工程技术研究中心',
      value: 1500
    },
    {
      name: '省级技术创新中心',
      value: 2000
    }
  ]
option = {
    backgroundColor:'#f5f5f5',
   tooltip: {
      trigger: 'item',
      show: false
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: '5%',
      top: 'center',
      itemGap: 20,
      selectedMode: true,
      icon: 'circle',
      textStyle: {
        rich: {
          a0: {
            color: colorList[0],
            fontSize: 12,
            fontWeight: 'bolder'
          },
          a1: {
            color: colorList[1],
            fontSize: 12,
            fontWeight: 'bolder'
          },
          a2: {
            color: colorList[2],
            fontSize: 12,
            fontWeight: 'bolder'
          },
          a3: {
            color: colorList[3],
            fontSize: 12,
            fontWeight: 'bolder'
          },
          b: {
            color: '#000',
            fontSize: 12,
            fontWeight: 'bolder'
          }
        }
      },
      formatter: function(name) {
        if (data.length) {
          let title = ''
          var target
          var index
          for (var i = 0, l = data.length; i < l; i++) {
            if (data[i].name == name) {
              target = data[i].value
              title = data[i].label
              index = i < 6 ? i : 5
            }
          }
          return `{a${index}| ${name}}{b| ${target}}家`
        }
      }
    },
    series: [
      {
        type: 'pie',
        center: ['40%', '50%'],
        radius: ['60%', '40%'], //数组的第一项是内半径,第二项是外半径
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 30,
        emphasis: {
          itemStyle: {
            borderColor: '#f3f3f3',
            borderWidth: 10
          }
        },
        itemStyle: {
          normal: {
            borderRadius: 1,
            borderColor: 'rgba(255, 255, 255, 1 )',
            borderWidth: 2,
            color: function(params) {
              return colorList[params.dataIndex]
            }
          }
        },
        label: {
          show: false,
          position: 'outside',
          formatter: '{a|{b}:{d}%}\n{hr|}',
          rich: {
            hr: {
              backgroundColor: 't',
              borderRadius: 1,
              width: 1,
              height: 1,
              padding: [1, 1, 0, -4]
            },
            a: {
              padding: [-15, 7, -10, 7]
            }
          }
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 15,
            lineStyle: {
              width: 1
            }
          }
        },
        data: data
      }
    ]
};

    
截图如下