Echarts环形图外部标注(label)和内部标注(label)同时显示

Echarts 的 label属性目前只支持单独的外部标注或者单独的内部标注，无法同时显示内部和外部的标注。
但在开发过程中有时会遇到两者都要显示的需求，满足这种需求的基本思路是创建两个环形图叠加，一个环形图负责内部标注，一个环形图负责外部标注。

最基础的实现

Echarts Option如下所示：

option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      // 第一个系列（底层），负责外部标签展示
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: true,//显示标签
        position: 'outside',//标签显示在外部
        fontSize: 28,//标签字体大小
        fontWeight: 'bold',//标签字体粗细
        color: 'inherit',//继承颜色，使label和item的颜色一致
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
        }
      labelLine: {
        show: true,//标签线
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    },
    {
      // 第二个系列（顶层），负责内部标签显示
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,//标签默认不显示
        position: 'center',//标签显示在内部
      },
      emphasis: {
        label: {
          show: true,//高亮状态才显示标签
          fontSize: 40,
          fontWeight: 'bold',
          color: 'inherit',
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

代码效果：

两个标签文本显示不一样的内容

上图中，内外文本显示的是一样的内容，在开发中一般都会选择显示不同的内容，可以显示更多的信息。

可以看出，外部标注是数据的名称显示，所以内部标注我们改为数据的值显示，将第二个系列的label改成下面的代码：

label: {
	 show: false,//标签默认不显示
	 position: 'center',//标签显示在内部
	 formatter:'{c}',//显示数据的值（value）
 },

结果如图所示：

动画联动

到这里，细心的小伙伴可能发现了，底层的环形图由于受到了遮挡，顶层高亮状态下，底层的emphasis内容却不生效，导致底层的高亮动画不生效。

所以这里使用Echarts提供的dispatchAction函数，使得底层也具有高亮效果。

代码如下：（由于是从自己的项目中扣下来的，可能有的地方有点bug，可以看看基本思路）

var option = {
//和上文的option大致相同，有一些细节可能不太一样
  series: [
    {
      name: 'bottom',//为两个系列取一个名字，在接下来的代码中好区分
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: true,
        position: 'outer',
        fontSize: 28,
        fontWeight: 'bold',
        color: 'inherit',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    },
    {
      name: 'top',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center',
        fontSize: 10,
        fontWeight: 'bold',
        color: 'inherit',
      },
      emphasis: {
        label: {
          formatter: '{c}',
          show: true,
          fontSize: 28,
          fontWeight: 'bold'
        },
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};


var pieCharts= echarts.init(document.getElementById('pieChartsContainer'));
pieCharts.setOption(option);
//当鼠标悬浮在顶层时，触发底层的高亮动作
//.on和.dispatchAction参数可以查看一下官方文档，除了使用系列名称指定系列之外，还可以使用系列Id或者Index
pieCharts.on('mouseover', { seriesName: 'top' }, function (params: any) {
  var name = params.data.name;//获取顶层高亮的item名称
  pieCharts.dispatchAction({
    type: 'highlight',//高亮
    seriesName: 'bottom',//底层系列名称
    name: name,//底层要高亮的item的名称
  })
});
//当鼠标离开顶层时，触发底层的取消高亮动作
pieCharts.on('mouseout', { seriesName: 'top' }, function (params: any) {
  var name = params.data.name;
  pieCharts.dispatchAction({
    type: 'downplay',
    seriesName: 'bottom',
    name: name,
  })
});
//当鼠标悬浮在底层时，触发顶层的高亮动作
//要加上这段代码的原因是，外部标签文本也属于底层，鼠标悬浮时同样可以触发底层的高亮动作，为了保持统一，顶层最好也同时触发高亮状态
pieCharts.on('mouseover', { seriesName: 'bottom' }, function (params: any) {
  var name = params.data.name;
  pieCharts.dispatchAction({
    type: 'highlight',
    seriesName: 'top',
    name: name,
  })
});
//当鼠标离开底层时，触发顶层的取消高亮动作
pieCharts.on('mouseout', { seriesName: 'bottom' }, function (params: any) {
  var name = params.data.name;
  pieCharts.dispatchAction({
    type: 'downplay',
    seriesName: 'top',
    name: name,
  })
});

代码效果如图所示：

作者：从入门到入土xy