highcharts柱状图颜色渐变

其中this.chart中的数据需要自己定义，类似与legend，credits，Axis，series等。

initChart() {
      var colors = [
        ["#01D2F0", "#02A6D0", "#053F6A", "#081422"],
        ["#17F8EC", "#14D1CA", "#0C5C60", "#09232B"],
        ["#CE62ED", "#B759D5", "#6E3C88", "#15192B"],
        ["#EAAA26", "#B78725", "#755C21", "#35311F"],
        ["#DB6844", "#B1573E", "#6D3C2F", "#2B2123"],
      ];
      let chart = new Highcharts.Chart(
        document.getElementById("chart"),
        this.chart
      );
      for (let i = 0; i < colors.length; i++) {
        chart.series[i].update({
          color: {
            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
            stops: [
              [0, colors[i][0]],
              [0.3, colors[i][1]],
              [0.6, colors[i][2]],
              [0.9, colors[i][3]]
            ]
          },
          borderColor: null
        })

      }
    }

效果图。折现不用管，这是我在chart中有写到

可以通过修改颜色让渐变色更自然。只需把上面对应的修改就可以了。

var colors = ["#01D2F0", "#17F8EC", "#CE62ED", "#EAAA26", "#DB6844"]
stops: [
       		[0, Highcharts.Color(colors[i]).setOpacity(0.8).get('rgba')],
            [1, Highcharts.Color(colors[i]).setOpacity(0).get('rgba')]
       ]