如何给Highchart折线图添加阴影


最近遇到一些使用Highcharts开发图表的需求,需要把图表设置成带shadow的。类似这样子的效果:

由于英文不太好,中文文档又不太齐全。害得我花了好半天的时间。配置在倒数第7行的代码

// 设置如下
{
  chart: {
    events: {
      // 加载页面的时候绘制一些按钮之类的东西
      load: function(event) {
        let x = event.target.chartWidth * 0.5;

        this.flashText = this.renderer
          .text(
            `<div align="right" ><div id="${item.key}" style="display:none;"><button  style="height:31px;width:84px;background:"#f7f7f7" class="btn green pull-right" data-toggle="modal"><font size="2"><b>detail info</b></font></button></div></div>`,
            x + 100,
            20,
            true
          )
          .attr({
            zIndex: 101
          })
          .add();
      },
      // 图表放大的时候
      selection: event => {
        if (event.xAxis) {
          let btn = document.getElementById(`${item.key}`);
          btn.style.display = "block";
          btn.removeEventListener("click", this.detailInfo);
          let min = Math.floor(event.xAxis[0].min);
          let max = Math.ceil(event.xAxis[0].max);
          this.startTime = this.getLogTimeWidthYearMonthDay[min];
          this.endTime = this.getLogTimeWidthYearMonthDay[max];
          btn.addEventListener("click", this.detailInfo);
        }
      }
    },
    zoomType: "x"
  },
  title: {
    text: item.title
  },
  subtitle: {
    text:
      document.ontouchstart === undefined
        ? "鼠标拖动可以进行缩放"
        : "手势操作进行缩放"
  },
  xAxis: {
    categories: this.getLogTime
  },
  tooltip: {
    dateTimeLabelFormats: {
      millisecond: "%H:%M:%S.%L",
      second: "%H:%M:%S",
      minute: "%H:%M",
      hour: "%H:%M",
      day: "%Y-%m-%d",
      week: "%m-%d",
      month: "%Y-%m",
      year: "%Y"
    }
  },
  yAxis: {
    title: {
      text: item.yAxisName
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    area: {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [
            1,
            Highcharts.Color(Highcharts.getOptions().colors[0])
              .setOpacity(0)
              .get("rgba")
          ]
        ]
      },
      marker: {
        radius: 1
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  },
  series: [
    {
      // 此处设置type等于area就可以应用plotOptions中area的属性了
      type: "area",
      data: this.chartData.map(it => {
        return it[item.key];
      })
    }
  ]
};