highstock展示大量數據，分組dataGrouping顯示值配置以及時間中文顯示

之前項目中遇到查詢數據一個月數據的趨勢圖 ，之前採用的是echarts，然後發現會出現頁面卡死的情況出行，所以就採用了highstock

先來成品圖

先來組件源碼吧

<template>
  <div class="charts" ref="line" id="line">
  </div>
</template>

<script>
import Highcharts from 'highcharts/highstock' // 引用highstock
export default {
  name: '',
  props: {
    series : { // 這兒是傳入的series 數據格式下面會有
      default: {}
    },
    color: {
      default: ''
    },
    colors: { // 需求中用戶需要配置線條顏色
      type: Array,
      default: function () {
        return [
          "#4b6ac0",
          "#4196ec",
          "#1ebea5",
        ]
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    init () {
      // 中文 時間中文顯示
      Highcharts.setOptions({
        global: {
          useUTC: false
        },
        lang: {
          rangeSelectorZoom: '',
          shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          weekdays: [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
          // rangeSelectorZoom: ''
        }
      })
    },
    initCharts (data, colors) {
      this.init()
      Highcharts.stockChart('line', {
        chart: {
          backgroundColor: this.color,
          zoomType: 'x',
          marginRight: 20
        },
        colors: colors,
        legend: {
          itemStyle: {
            color: '#fff',
            fontWeight: 'bold'
          },
          enabled: true,
          verticalAlign: 'top'
        },
        rangeSelector: {
          buttonTheme: {
            display: 'none' // 不顯示按鈕
          },
          selected: 3,
          inputEnabled: false // 不顯示日期輸入框
        },
        navigator: {
          adaptToUpdatedData: true,
          xAxis: {
            labels: {
              format: '{value:%Y-%m-%d}'
            }
          },
          series: {
            type: 'areaspline',
            color: '#4572A7',
            // fillOpacity: 0.05,
            dataGrouping: {
              smoothed: true
            },
            lineWidth: 1,
            marker: {
              enabled: false
            }
          }
        },
        credits: {
          enabled: false
        },
        tooltip: {
          pointFormatter: function() {
            let lineJson = data.filter(e=> e.name === this.series.name)
            let unit = lineJson[0] && lineJson[0].unit ? lineJson[0].unit : ''
            return `<span style="color:${this.series.color}">${this.series.name}</span>: <b>${this.y.toFixed(2)} ${unit}</b><br/>`
          },
          // valueDecimals: 2,
          // followTouchMove: false,
          // split: true,
          xDateFormat: '%Y-%m-%d<br/>%H:%M:%S'
        },
        yAxis: {
          labels: {
            style: {
              color: '#fff'
            }
          },
          // min: 0,
          floor: null,
          gridLineColor: '#999',
          allowDecimals: true,
          opposite: false,
          lineWidth: 0.5,
          gridLineWidth: 0.5,
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            second: '%Y-%m-%d<br/>%H:%M:%S',
            minute: '%Y-%m-%d<br/>%H:%M',
            hour: '%Y-%m-%d<br/>%H:%M',
            day: '%Y<br/>%m--%d',
            week: '%Y<br/>%m-%d',
            month: '%Y-%m',
            year: '%Y'
          },
          labels: {
            style: {
              color: '#fff'
            }
          }
        },
        plotOptions: {
          series: {
            dataGrouping: {
              approximation: 'high'  //大量數據 highstock使用的是分組顯示，這兒可以顯示最大，最小值等，默認是平均值
            }
          },
        },
        series: data
      })
    }
  },
  watch: {
    series (data) {
      console.log(this.$attrs)
      this.initCharts(data, this.colors)
    },
    colors () {
      this.initCharts(this.series, this.colors)
    }
  }
}
</script>

<style scoped lang='scss'>
.charts {
  width: 100%;
  height: 100%;
}
.highcharts-legend-item {
  color: #fff;
}
</style>

分組值配置https://api.highcharts.com.cn/highstock#plotOptions.series.dataGrouping.approximation參考api

this.series.push({
   id: key,
   name: nameUnit.name,
   data: res.data[key]
})

 

這個是後臺返回等數據

歡迎留言