如何通过Dataset为Apache ECharts半环形图指定扇区Decal样式

核心思路 #

通过在dataset中为数据项添加自定义标识字段，结合ECharts的itemStyle.decal.color回调配置，精准判断底部填充扇区并将其decal颜色设为'none'，其余扇区保留默认decal样式，同时满足基于dataset管理数据的要求。

修改后的完整配置代码 #

const options = {
  dataset: [
    {
      source: [
        {value: 735, name: 'Direct', isFill: false},
        {value: 580, name: 'Email', isFill: false},
        {value: 1048, name: 'Search Engine', isFill: false},
        {value: 484, name: 'Union Ads', isFill: false},
        {value: 300, name: 'Video Ads', isFill: false},
        {
          // 底部填充50%的记录
          value: 1048 + 735 + 580 + 484 + 300,
          name: '',
          isFill: true
        }
      ]
    }
  ],
  aria: {
    enabled: true,
    decal: {
      show: enabled
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      emphasis: {
        label: {
          overflow: 'break'
        }
      },
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      startAngle: 180,
      itemStyle: {
        color: (param) => {
          if (param.name === '') {
            return 'none';
          }
          if (param.dataIndex > 8) {
            const randomColor = Math.floor(Math.random() * 16777215).toString(16);
            return '#' + randomColor;
          } else {
            return halfDoughnutChartColors[param.dataIndex];
          }
        },
        // 关键：给decal的color设置回调逻辑
        decal: {
          color: (param) => {
            // 通过dataset中的isFill字段判断是否为填充扇区
            return param.data.isFill ? 'none' : undefined; // 返回undefined使用默认颜色
          }
        },
        borderRadius: 0,
        borderColor: '#000',
        borderWidth: 0
      },
      label: {
        overflow: 'truncate',
        formatter: (param) => {
          return !!param.name ? `${param.name}: (${param.percent * 2}%)` : '';
        }
      },
      encode: {
        itemName: 'name',
        value: 'value',
        tooltip: 'name'
      }
    }
  ]
};

关键修改点 #

• Dataset扩展：给每个数据项新增isFill字段，底部填充项设为true，其余业务项设为false，作为后续判断的标识。
• Decal颜色回调：在itemStyle.decal中添加color回调函数，根据param.data.isFill的值，为填充扇区返回'none'隐藏decal，为其他扇区返回undefined沿用默认decal颜色。

效果说明 #

配置完成后，底部填充扇区的decal会被完全隐藏，其余业务扇区保持默认的decal样式，同时所有数据逻辑仍基于dataset实现，符合需求。

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