使用ts,让echarts饼图中间文字固定居中，鼠标移入中间文字变换数据，随饼图大小改变

要实现让echarts饼图中间文字固定居中，可以通过设置`graphic`组件来实现。具体操作如下：

1. 在`options`中添加`graphic`组件：

graphic: {
  type: 'text',
  top: 'center',
  left: 'center',
  style: {
    text: '中间文字',
    textAlign: 'center',
    fill: '#000',
    fontSize: 24
  },
  draggable: true
}

2. 设置`series`中的`label`和`emphasis`中的`label`为空，这样饼图上的文字就不会显示了：

series: [{
  type: 'pie',
  data: [...],
  label: {
    show: false
  },
  emphasis: {
    label: {
      show: false
    }
  }
}]

3. 监听饼图的`mouseover`和`mouseout`事件，在事件中改变中间文字和饼图大小：

myChart.on('mouseover', function(params) {
  const { dataIndex } = params;
  const data = option.series[0].data[dataIndex];
  const value = data.value;
  const name = data.name;
  myChart.setOption({
    graphic: {
      style: {
        text: `${name}\n${value}`,
        fontSize: 32
      }
    },
    series: [{
      radius: ['50%', '60%']
    }]
  });
});

myChart.on('mouseout', function(params) {
  myChart.setOption({
    graphic: {
      style: {
        text: '中间文字',
        fontSize: 24
      }
    },
    series: [{
      radius: ['55%', '60%']
    }]
  });
});

在这里，我们通过修改`graphic`组件的`style`来改变中间文字的内容和字体大小，通过修改`series`中的`radius`来改变饼图的大小。注意，这里的`radius`需要和饼图原本的`radius`有所不同，否则会出现饼图大小不变的情况。

完整代码如下：

const option = {
  graphic: {
    type: 'text',
    top: 'center',
    left: 'center',
    style: {
      text: '中间文字',
      textAlign: 'center',
      fill: '#000',
      fontSize: 24
    },
    draggable: true
  },
  series: [{
    type: 'pie',
    radius: ['55%', '60%'],
    data: [
      { value: 335, name: 'A' },
      { value: 310, name: 'B' },
      { value: 234, name: 'C' },
      { value: 135, name: 'D' },
      { value: 1548, name: 'E' }
    ],
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: false
      }
    }
  }]
};

const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

myChart.on('mouseover', function(params) {
  const { dataIndex } = params;
  const data = option.series[0].data[dataIndex];
  const value = data.value;
  const name = data.name;
  myChart.setOption({
    graphic: {
      style: {
        text: `${name}\n${value}`,
        fontSize: 32
      }
    },
    series: [{
      radius: ['50%', '60%']
    }]
  });
});

myChart.on('mouseout', function(params) {
  myChart.setOption({
    graphic: {
      style: {
        text: '中间文字',
        fontSize: 24
      }
    },
    series: [{
      radius: ['55%', '60%']
    }]
  });
});