如何在Apache ECharts中默认高亮饼图指定扇区？

有两种常用方式可以实现饼图默认高亮指定扇区：

方法一：为目标数据项单独配置高亮样式 #

直接在饼图series.data数组的目标项中添加emphasis属性，自定义其高亮状态下的样式（如偏移量、颜色等），页面加载后该扇区会直接应用这些高亮样式。

示例代码：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        // 为该项设置默认高亮样式
        { 
          value: 735, 
          name: 'Direct', 
          emphasis: {
            itemStyle: {
              offset: 20, // 扇区向外偏移
              color: '#ff7f50' // 自定义高亮颜色
            }
          }
        },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

方法二：使用selected配置项设置默认选中高亮 #

在series配置中添加selected对象，通过数据项的名称或索引指定需要高亮的目标，值设为true，页面加载后该扇区会自动应用全局的emphasis配置样式。

示例代码：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      // 指定默认选中高亮的项
      selected: {
        'Direct': true // 通过名称指定
        // 也可通过索引指定：例如 1: true（对应数组中第二个数据项）
      },
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      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' }
      ]
    }
  ]
};

两种方式的区别：

• 方法一可单独定制目标扇区的高亮样式，灵活性更高；
• 方法二复用全局的emphasis配置，适合需要统一高亮风格的场景。

内容的提问来源于stack exchange，提问作者kva