Echarts圆环图设置title及其背景色和边框颜色

需求：

圆环的legend设置在圆环左侧，垂直显示。

问题：最初才用的方法是使用title中的padding属性设置title的背景宽度，但是发现位置不能自适应居中。

解决办法：使用3个pie实现想要的效果：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical', //设置图例的方向
    right: 20,
    top: 'center'
  },
  title: {
    text: '我 是',
    top: '45%',
    textAlign: 'center',
    left: '29%',
    textStyle: {
      color: '#fff',
      fontSize: 30,
      fontWeight: '400'
    },
    subtext: '标 题',
    subtextStyle: {
      color: '#fff',
      fontSize: 30,
      fontWeight: '400'
    }
  },
  series: [
    {
      // 主圆环
      name: '',
      type: 'pie',
      center: ['30%', '50%'],
      radius: ['60%', '70%'],
      hoverAnimation: false,
      clockWise: false, // 默认逆时针
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          // 圆环段中间的间隙,实际是borderColor,
          // itemStyle内的borderColor和backgroundColor一致,便可营造间隙效果
          borderRadius: 10,
          borderColor: '#000',
          borderWidth: 5
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    },
    {
      // title边框层
      name: '背景圆环',
      z: 5,
      backgroundColor: '#0a214b',
      type: 'pie',
      cursor: 'default',
      center: ['30%', '50%'],
      radius: ['46%', '47%'],
      hoverAnimation: false,
      legendHoverLink: false,
      silent: true, //不响应和触发鼠标事件
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 0,
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: '#6E7079'
            }
          }
        }
      ]
    },
    {
      // title背景层
      name: '背景圆环',
      z: 5,
      backgroundColor: '#8C8D8E',
      type: 'pie',
      cursor: 'default',
      center: ['30%', '50%'],
      radius: '45%',
      hoverAnimation: false,
      legendHoverLink: false,
      silent: true, //不响应和触发鼠标事件
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 0,
          itemStyle: {
            normal: {
              color: '#4C505840'
            }
          }
        }
      ]
    }
  ]
};复制

效果：