我无法在treamap中制作多个线性渐变

Question

color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
      [0, 'red'],
      [1, 'orange']
    ]
  }

当前结果：enter image description here所需结果：enter image description here

Answer 1

单个SVG元素不支持多个渐变，但是您可以添加其他rect元素作为具有径向渐变填充的图层。

chart: {
  events: {
    load: function() {
      ...;

      this.renderer.rect(...)
        .attr({
          fill: { // BLUE
            radialGradient: {
              cx: 0.9,
              cy: 1,
              r: 0.9
            },
            stops: [
              [0, '#0000ff'],
              [1, 'rgba(0, 0, 255, 0.1)']
            ]
          }
        })
        .add();

      this.renderer.rect(...)
        .attr({
          fill: { // RED
            radialGradient: {
              cx: 1,
              cy: 0,
              r: 0.9
            },
            stops: [
              [0, '#ff0000'],
              [1, 'rgba(255, 0, 0, 0.1)']
            ]
          }
        })
        .add();
    }
  }
},
series: [{
  type: "treemap",
  color: { // GREEN
    radialGradient: {
      cx: 0,
      cy: 0.5,
      r: 0.9
    },
    stops: [
      [0, '#00ff00'],
      [1, 'rgba(0, 255, 0, 0.1)']
    ]
  },
  ...
}]

---

结果：

---

实时演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/4975/