echarts 饼图中间自定义显示内容

做驾驶舱时，使用到空心饼图中间显示自定义内容，两种方式实现

1. title 进行定位(效果差点)

 2. graphic 

查询 api后，最为符合的使用 graphic

代码如下，完美实现上图效果

{
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          textStyle: {
            color: '#fff'
          },
          left: 'center'
        },
        // 设置环形中间的数据
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: '45%',
              z: 2,
              zlevel: 100,
              style: {
                text: '29887',
                font: '32px Microsoft YaHei',
                fill: '#fff'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: '53%',
              z: 2,
              zlevel: 100,
              style: {
                text: '今日总供水量',

                fill: '#D1D5DD',
                font: '14px Microsoft YaHei'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: '58%',
              z: 2,
              zlevel: 100,
              style: {
                text: '(/吨)',
                fill: '#D1D5DD'
              }
            }
          ]
        },
        series: [
          {
            name: '今日供水',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter (param) {
                // correct the percentage
                return param.name + ' (' + param.percent * 2 + '%)'
              },
              shadowBlur: 0
            },

            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: '一水厂' },
              { value: 735, name: '二水厂' }
            ]
          }
        ]
      }