echarts 环形图默认中心文字标题，内容颜色随标签颜色变化，并在环形图内外都显示标签formatter

废话不多说，上效果图：

完整代码见文章末尾 

一、环形图

       中心文字是通过title完成的，通过left和top调整了位置并且使用了textStyle调整了文字样式

触发鼠标悬停时显示的是formatter。

var data = [
  {
    name: '峰',
    value: 4694.0
  },
  {
    name: '平',
    value: 5365.0
  },
  {
    name: '谷',
    value: 6036.0
  }
];
var keys = Object.keys(data);
var option = {
  title: {
    text: '标题内容',
    left: 'center',
    top: '45%',
    textStyle: {
      fontSize: 30,
      lineHeight: 48
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '1%',
    left: 'center',
    icon: 'circle'
  },
  color: ['#2eacff', '#fd6067', '#f9be0e', '#ef6567', '#f9c956', '#3BA272'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['55%', '70%'],
      hoverOffset: 20,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          formatter: function (params) {
            return `{a|${params.name}}\n` + `{b|${params.value}}`;
          },
          //中间文字样式
          rich: {
            a: {
              color: function (params) {},
              fontSize: 30,
              lineHeight: 48
            },
            b: {
              color: function (params) {},
              align: 'center',
              fontSize: 30,
              lineHeight: 48
            }
          }
        },
      },
      data: data
    }
  ]
};

二、 中心内容改变

if (option && typeof option === 'object') {
  myChart.setOption(option);
  //隐藏标题
  myChart.on('highlight', function (e) {
    myChart.setOption({
      title: {
        show: false
      }
    });
  });
  //显示标题
  myChart.on('downplay', function (e) {
    myChart.setOption({
      title: {
        show: true
      }
    });
  });
  myChart.on('mouseover', function (e) {
    // 取消所有高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: keys
    });
    // 当前高亮
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: e.dataIndex
    });
    myChart.setOption({
      title: {
        show: false
      }
    });
  });
  myChart.on('mouseout', function (e) {
    // 取消所有高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: keys
    });
    myChart.setOption({
      title: {
        show: true
      }
    });
  });
}

三、显示外部引导线注释

      这里是通过echarts图中series:[ ] 是数组的特性完成的,用第二个图的formatter覆盖上去完成

 series: [
    {
      name: '',
      type: 'pie',
      radius: ['55%', '70%'],
      hoverOffset: 20,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          formatter: function (params) {
            return `{a|${params.name}}\n` + `{b|${params.value}}`;
          },
          //中间文字样式
          rich: {
            a: {
              color: function (params) {},
              fontSize: 30,
              lineHeight: 48
            },
            b: {
              color: function (params) {},
              align: 'center',
              fontSize: 30,
              lineHeight: 48
            }
          }
        },
      },
      data: data
    },
    {
      type: 'pie',
      radius: ['55%', '70%'],
      avoidLabelOverlap: true,
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}  {c}.0 {d}%',
        textStyle: {
          color: 'gray'
        }
      },
      data: data
    }
  ]

四、完整代码

var data = [
  {
    name: '峰',
    value: 4694.0
  },
  {
    name: '平',
    value: 5365.0
  },
  {
    name: '谷',
    value: 6036.0
  }
];
var keys = Object.keys(data);
var option = {
  title: {
    text: '标题内容',
    left: 'center',
    top: '45%',
    textStyle: {
      fontSize: 30,
      lineHeight: 48
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '1%',
    left: 'center',
    icon: 'circle'
  },
  color: ['#2eacff', '#fd6067', '#f9be0e', '#ef6567', '#f9c956', '#3BA272'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['55%', '70%'],
      hoverOffset: 20,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          formatter: function (params) {
            return `{a|${params.name}}\n` + `{b|${params.value}}`;
          },
          //中间文字样式
          rich: {
            a: {
              color: function (params) {},
              fontSize: 30,
              lineHeight: 48
            },
            b: {
              color: function (params) {},
              align: 'center',
              fontSize: 30,
              lineHeight: 48
            }
          }
        },
      },
      data: data
    },
    {
      type: 'pie',
      radius: ['55%', '70%'],
      avoidLabelOverlap: true,
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}  {c}.0 {d}%',
        textStyle: {
          color: 'gray'
        }
      },
      data: data
    }
  ]
};
if (option && typeof option === 'object') {
  myChart.setOption(option);
  myChart.on('highlight', function (e) {
    myChart.setOption({
      title: {
        show: false
      }
    });
  });
  myChart.on('downplay', function (e) {
    myChart.setOption({
      title: {
        show: true
      }
    });
  });
  myChart.on('mouseover', function (e) {
    // 取消所有高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: keys
    });
    // 当前高亮
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: e.dataIndex
    });
    myChart.setOption({
      title: {
        show: false
      }
    });
  });
  myChart.on('mouseout', function (e) {
    // 取消所有高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: keys
    });
    myChart.setOption({
      title: {
        show: true
      }
    });
  });
}

    本文章为免费阅读，若有对您帮助，请多多点赞！