echarts 饼图修改为圆环,并在中心位置显示标题及数据,示例

echarts 饼图修改为圆环,并在中心位置显示标题及数据,示例代码

this.chart.setOption({
        title: {
          text: this.title
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            selectedMode: 'single',
            radius: ['50%', '70%'],
            clockwise: false,
            label: {
              normal: {
                position: 'outside',
                formatter: '{b}\n{c}GB ({d}%)'
              }
            },
            // 区块间缝隙
            itemStyle: {
              normal: {
                borderWidth: 3, // 间距的宽度
                borderColor: '#fff', //背景色
              }
            },
            data: [
              { value: 65, name: '使用' },
              { value: 15, name: '未使用' }
            ]
          }
        ],
        graphic: { // 添加原生图形元素组件
          elements: [{
            type: 'text', // 组件类型
            left: 'center', //定位
            top: '43%', // 定位
            style: { // 样式
              text: '容量', //文字
              fontSize: 13, //文字大小
              textAlign: 'center', //定位
              width: 30,
              height: 30,
              fill: 'darkgray' // 字体颜色
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '52%',
            style: {
              text: '80GB',
              fontSize: 18,
              textAlign: 'center',
              width: 30,
              height: 25,
              fill: '#3BA5D9'
            }
          }]
        }
      })