[JavaScript知识库]vue+highCharts---曲线面积图事例

效果图：

option代码：

option:{
	 	chart: {
          type: 'areaspline',
          marginRight: 10
        },
        plotOptions: {
          series: {
            animation: false, // 去除渲染动画
            turboThreshold: 0, // 不限制点数,
            fillColor: {// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, '#9CABE2'],
                [1, HighCharts.Color('white').setOpacity(0).get('rgba')]
              ]
            },
            marker: {
              enabled: false,
              symbol: 'circle',
              radius: 10,
              states: {
                hover: {
                  enabled: true
                }
              }
            }
          }
        },
        colors: ['#7b83ff'],
        time: {
          useUTC: false
        },
        title: {
          text: ''
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        accessibility: {
          announceNewData: {
            enabled: true,
            minAnnounceInterval: 15000,
            announcementFormatter: function(allSeries, newSeries, newPoint) {
              if (newPoint) {
                return 'New point added. Value: ' + newPoint.y
              }
              return false
            }
          }
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: 150,
          title: {
            text: ''
          }
        },
        yAxis: {
          title: {
            text: 'dB'
          },
          // tickInterval: 10, // 间隔
          // max: 50, // 最大值
          min: 0, // 最小值
          lineWidth: 1
        },
        tooltip: {
          headerFormat: '',
          // pointFormat: '{point.x:%Y-%m-%d %H:%M:%S:%L}<br/>噪声：{point.y:.2f} dB',
          pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>噪声：{point.y:.2f} dB',
          shared: true,
          crosshairs: [true, false]
        },
        legend: {
          enabled: false // 数据划过时，才显示点标记
        },
        exporting: {
          enabled: false
        },
        series: [{
          name: '噪声',
          data: [{ x: 1637117403000, y: 20 }, { x: 1637116403000, y: 25 }, { x: 1637115403000, y: 30 }, { x: 1637114403000, y: 20 }, { x: 1637113403000, y: 15 }],
          marker: {
            enabled: false
          }
        }]
}