Vue项目中使用highstock

记录vue中使用highstock生成统计图功能。其中参考：https://www.cnblogs.com/SunShineM/p/9006860.html

 首先导入highcharts依赖包

//npm方式
npm install highcharts --save
//yarn
yarn add highcharts

创建highstock组件

其中highcharts-zh_CN下载地址：https://github.com/hcharts/highcharts-zh_CN

highchart风格参考地址：https://jshare.com.cn/demos/hhhhxL/186/share

<template>
  <div :id="id" :option="option" class="HighStock"></div>
</template>

<script>
  import Highcharts from 'highcharts/highstock'//引入highstock依赖
  import HighchartsGrid from 'highcharts/themes/skies'//引入风格，具体分格自己参考https://jshare.com.cn/demos/hhhhxL/186/share
  import HighchartszhCN from '@/utils/highcharts-zh_CN.es6'//引入中文语言包，这个要自己下载然后再导入到页面来。下载地址：https://github.com/hcharts/highcharts-zh_CN
  HighchartsGrid(Highcharts)
  HighchartszhCN(Highcharts)
  export default {
    // 验证类型
    props: {
      id: {
        type: String
      },
      option: {
        type: Object
      }
    },
    data() {
      return {
        defaultOptions : {//自定义highstock属性样式
          rangeSelector: {//范围按钮
            buttons: [{
              type: 'hour',
              count: 1,
              text: '时'
            },{
              type: 'day',
              count: 3,
              text: '日'
            }, {
              type: 'week',
              count: 1,
              text: '周'
            }, {
              type: 'month',
              count: 1,
              text: '月'
            }, {
              type: 'month',
              count: 6,
              text: '半年'
            }, {
              type: 'year',
              count: 1,
              text: '一年'
            }, {
              type: 'all',
              text: '全部'
            }],
            selected: 0,
            buttonTheme: { // 设置按钮样式
              fill: '#F7F7F7',//按钮初始背景颜色
              stroke: 'none',//边框颜色
              'stroke-width': 0,//边框宽度
              r: 8,//圆角
              style: {//字体样式
                color: '#039',
                fontWeight: 'bold'
              },
              states: {//按钮效果
                hover: {
                },
                select: {//选中效果
                  fill: '#039',//颜色
                  style: {//字体样式
                    color: 'white'
                  }
                }
              }
            },
          },
          scrollbar: {//底部滚动条样式
            barBackgroundColor: 'gray',
            barBorderRadius: 7,
            barBorderWidth: 0,
            buttonBackgroundColor: 'gray',
            buttonBorderWidth: 0,
            buttonBorderRadius: 7,
            trackBackgroundColor: 'none',
            trackBorderWidth: 1,
            trackBorderRadius: 8,
            trackBorderColor: '#CCC',
            enabled:false
          },
          credits: { enabled: false },//隐藏右下角highcharts的链接
          tooltip: {
            split: false,
            shared: true,
          },
          navigator: {
            height: 0
          },
        },
        //time:"",//初始化time，如果没定义会报错的。。
      }
    },
    mounted() {
      //初始化统计图
      Highcharts.stockChart(this.id, this.option)
    },
    created() {
      //初始化参数
      Highcharts.setOptions(this.defaultOptions);
    }
  }
</script>

<style scoped>

</style>

使用highstock组件

<template>
  <div  v-for="(item, index) in containerArr" :key="index">
    <HighStock :id="item.id" :option="item.option" style="height: 200px"></HighStock>
  </div>
</template>

<script>
  import Axios from 'axios'
  import HighStock from './HighStock'
  export default {
    components: {
      HighStock,
    },
    data() {
      return {
        setArray: [],
        containerArr:[],
      }
    },
    methods: {
      getChartData(type) {//get数据
        this.containerArr = []//先清空数组
        //循环清除延时器/定时器
        /*for(var n=0;n<this.setArray.length;n++){
          clearInterval(this.setArray[n]);
        }*/
        var getUrl = this.getNginxConfig.mapSourcesUrl;
        //根据类型获取数据
        if(type=="水温仪"){
          Axios.get(getUrl+"json/wattem.json").then((res) => {
            var data = res.data;
            //数据分割
            var wtem50Data=data.wtem50data.slice(0,14400),wtem110Data=data.wtem110data.slice(0, 14400),
              wtem170Data=data.wtem170data.slice(0, 14400),wtem230Data=data.wtem230data.slice(0, 14400),
              curmonData=data.curmondata.slice(0, 14400),temmonData=data.temmondata.slice(0, 14400),
              volmonData=data.volmondata.slice(0, 14400);
            var wtem50 = data.wtem50data,wtem110 = data.wtem110data,wtem170 = data.wtem170data,
              wtem230 = data.wtem230data,curmon = data.curmondata,temmon = data.temmondata,
              volmon = data.volmondata;
            //组成highchart所需json数据类型
            this.addChart("wtem50","水温50m",wtem50,wtem50Data,"℃");
            this.addChart("wtem110","水温110m",wtem110,wtem110Data,"℃");
            this.addChart("wtem170","水温170m",wtem170,wtem170Data,"℃");
            this.addChart("wtem230","水温230m",wtem230,wtem230Data,"℃");
          
          })
        }
      },
      /**
       * 组成highchart所需json数据类型
       * id 为统计图div的id
       * name 为统计图title
       * data 为所有数据
       * hanData 为前部分数据14400条
       * com 为数据的单位
       */
      addChart(id,name,data,hanData,com){
        var i = 14400,time=Date.UTC(2018, 7, 21)+60*1000*14400,dataOption={};
        dataOption ={
          legend:{
            enabled: true,
            align: 'left',
            backgroundColor: '#F7F7F7',
            layout: 'vertical',
            verticalAlign: 'top',
            y: 100,
            shadow: true
          },
          yAxis:{
            title: {text: com}
          },
          chart:{
            events: {
              load : function(){
                var charts = this;
                var intTime1=setInterval(function(){
                  time+=60*1000;
                  charts.series[0].addPoint([time, data[i]], true, true);
                  i++;
                },1000);
                //this.setArray.push(intTime1);
              }
            },
            zoomType: 'x'
          },
          series : [{
            name: name,
            data: hanData,
            pointStart: Date.UTC(2018,7, 21),
            pointInterval: 60 * 1000,
            tooltip: {
              valueDecimals: 1,
              valueSuffix: com
            }
          }
          ]
        }
        //添加到数组
        this.containerArr.push({id:id,option:dataOption});
      },
    },
    created() {},
    mounted() {
      // this.init()
      this.getChartData("水温仪");
    }
  }
</script>

运行截图

 

如有错误欢迎指正，毕竟我只是个打杂的。