highcharts区域面积图 -- area range

<script src="/js/highcharts.min.js"></script>
<script src="/js/highcharts-more.min.js"></script> // 注意一下这里要引入这个js文件，官网有讲
// 每天扫描任务耗时范围图
var chart2 = new Highcharts.Chart('chart2', {
  credits: {
    enabled: false // 去掉水印
  },
  chart: {
    type: 'arearange',
    zoomType: 'x' // 水平缩放
  },
  title: {
    text: '扫描任务耗时范围图'
  },
  subtitle: {
    text: '数据来源: Web安全智能监测平台',
    x: 0
  },
  xAxis: {
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    crosshair: true // 启用 x 轴准星线
  },
  yAxis: {
    title: {
      text: null
    }
  },
  tooltip: {
    shared: true,
    valueSuffix: '秒'
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0
  },
  series: [
    {
      name: '啄木鸟扫描平均耗时',
      color: '#7FB7EC',
      tooltip: {
        valueSuffix: '秒'
      },
      data: [
        [10, 50],
        [20, 30],
        [15, 37],
        [5, 45],
        [10, 36],
        [33, 77],
        [20, 65]
      ]
    },
    {
      name: '宙斯盾扫描平均耗时',
      color: Highcharts.getOptions().colors[0],
      tooltip: {
        valueSuffix: '秒'
      },
      data: [
        [23, 40],
        [18, 35],
        [27, 73],
        [5, 55],
        [13, 36],
        [30, 87],
        [10, 26],
      ],
      color: '#F9BA85'
    }
  ]
});

出来的结果是这样的

173651crcxx8vvtvru77i6.png

官网里面看不到数据格式，所以刚开始很惆怅，后面复制代码到本地，直接把数据打出来看，然后模仿写了一个数据。
这里要注意，需求是比较啄木鸟跟宙斯盾两个平台每天的最长扫描时间与最短扫描时间，所以在series里要写两份数据。
写个笔记在这里给自己看，下次遇到就可以很快解决啦
highcharts