使用ts,让echarts饼图中间文字固定居中，鼠标移入中间文字变换数据，随饼图大小改变，并且文字多行显示，每行文字颜色不一样

可以通过以下代码实现：

import * as echarts from 'echarts';

// 初始化饼图
const chart = echarts.init(document.getElementById('chart-container'));

// 设置饼图数据
const data = [
  { value: 335, name: '直接访问' },
  { value: 310, name: '邮件营销' },
  { value: 234, name: '联盟广告' },
  { value: 135, name: '视频广告' },
  { value: 1548, name: '搜索引擎' }
];

// 设置饼图配置项
const option = {
  title: {
    text: '饼图标题',
    left: 'center',
    top: 'middle',
    textStyle: {
      color: '#333',
      fontSize: 20,
      fontWeight: 'bold'
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data
    }
  ]
};

// 渲染饼图
chart.setOption(option);

// 获取中间文字元素
const centerText = chart.getZr().storage.getDisplayList()[0].getChildAt(1);

// 设置中间文字样式
centerText.setStyle({
  text: '中间文字\n多行显示',
  textAlign: 'center',
  textVerticalAlign: 'middle',
  x: chart.getWidth() / 2,
  y: chart.getHeight() / 2,
  font: 'bold 16px Microsoft YaHei',
  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#f30' },
    { offset: 0.5, color: '#ff0' },
    { offset: 1, color: '#0f0' }
  ])
});

// 监听鼠标移入事件，改变中间文字数据
chart.on('mouseover', () => {
  centerText.setStyle({
    text: '中间文字\n多行显示\n变换数据',
    textAlign: 'center',
    textVerticalAlign: 'middle',
    x: chart.getWidth() / 2,
    y: chart.getHeight() / 2,
    font: 'bold 16px Microsoft YaHei',
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#0f0' },
      { offset: 0.5, color: '#ff0' },
      { offset: 1, color: '#f30' }
    ])
  });
});

// 监听鼠标移出事件，恢复中间文字数据
chart.on('mouseout', () => {
  centerText.setStyle({
    text: '中间文字\n多行显示',
    textAlign: 'center',
    textVerticalAlign: 'middle',
    x: chart.getWidth() / 2,
    y: chart.getHeight() / 2,
    font: 'bold 16px Microsoft YaHei',
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#f30' },
      { offset: 0.5, color: '#ff0' },
      { offset: 1, color: '#0f0' }
    ])
  });
});

// 监听窗口大小改变事件，重新设置中间文字位置
window.addEventListener('resize', () => {
  centerText.setStyle({
    x: chart.getWidth() / 2,
    y: chart.getHeight() / 2
  });
});

这段代码中，使用了 echarts 初始化饼图，并设置了饼图数据和配置项。然后获取中间文字元素，设置样式并监听鼠标移入、移出事件，改变中间文字数据。最后监听窗口大小改变事件，重新设置中间文字位置。

其中，`fill` 属性可以用来设置文字颜色，这里使用了 `LinearGradient` 线性渐变色来实现多种颜色的效果。`x` 和 `y` 属性分别表示元素在画布中的横纵坐标，可以通过 `chart.getWidth()` 和 `chart.getHeight()` 方法获取饼图容器的宽高。