如何在Highcharts饼图/环形图中实现内圈高亮渐变效果？

DevOps 小满

2026-8-1

解决Highcharts环形图内圈高亮问题

要实现环形图（Donut）的内圈高亮（对应数据点颜色的浅色调），你不需要用线性渐变，应该改用径向渐变（radial gradient），核心是修改数据点的color属性（或全局plotOptions.pie.color）来定义径向渐变规则。

具体实现步骤：

给每个数据点的color配置径向渐变：
径向渐变的中心设为[0.5, 0.5]（环形中心），起始颜色（内圈）为对应数据色的浅色调，结束颜色（外圈）为数据点的正常颜色，半径设置为匹配环形内圈大小的数值（比如0.8，对应环形innerSize的比例）。
示例代码片段：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      innerSize: '60%', // 环形内圈大小
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    name: 'Brands',
    data: [
      {
        name: 'Chrome',
        y: 61.41,
        color: {
          radialGradient: { cx: 0.5, cy: 0.5, r: 0.8 },
          stops: [
            [0, Highcharts.color('#4ed1f7').lighten(0.3).get()], // 内圈浅色调
            [1, '#4ed1f7'] // 外圈正常颜色
          ]
        }
      },
      {
        name: 'Internet Explorer',
        y: 11.84,
        color: {
          radialGradient: { cx: 0.5, cy: 0.5, r: 0.8 },
          stops: [
            [0, Highcharts.color('#f7b74e').lighten(0.3).get()],
            [1, '#f7b74e']
          ]
        }
      }
    ]
  }]
});