vue使用highstock生成图表

1.导入highcharts依赖包(文章前面部分参考了：https://blog.csdn.net/bojinyanfeng/article/details/103406779)

npm install highcharts 

2.在components文件夹下新建HighChart文件夹，创建highsotck component

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

<script>
  import Highcharts from 'highcharts/highstock'//引入highstock依赖
  import HighchartszhCN from '@/utils/highcharts-zh_CN.es6'//引入中文语言包，这个要自己下载然后再导入到页面来。下载地址：https://github.com/hcharts/highcharts-zh_CN
  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: 'all',
              text: '全部'
            }],
            inputEnabled: false,
            selected: 0
          },
          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
          },
        }
      }
    },
    mounted() {
      //初始化统计图
      Highcharts.stockChart(this.id, this.option)
    },
    created() {
      //初始化参数
      Highcharts.setOptions(this.defaultOptions);
    }
  }
</script>

3.组件引用

 <el-dialog :title="$t('assetManage.image')" :visible.sync="imageVisible" style="width:1900px;">
      <template>
        <div id="app" >
          <div :id="id" :option="option" style="min-width:900px;"></div>
        </div>
      </template>
    </el-dialog>

<script>
import HighStock from '@/components/HighChart'
import { formatDates,formatTimeStamp } from '@/utils/formatData'
import Highcharts from 'highcharts/highstock'

export default {
  name: 'ComplexTable',
  components: { Pagination,HighStock },
  data() {
    return {
      //初始化数据
      id: 'test',
      option: '',
     }
  }
  methods: {
//该方法我是在列表里面的每一行的点击事件中调用，大家可以根据实际业务灵活运用
 loadCharts(type,row) {
 this.imageVisible = true
 //发送加载图表数据的请求
    queryNodeTh(row.equipmentId,row.fdDeviceId,row.fdStartTime,row.fdEndTime).then(response => {
        const  data =  response.data;
        //温度数据集
        const temperature1Data = [];
        const temperature2Data = [];
        //加速度数据集
        var xData = [];
        var yData = [];
        var zData = [];
        //标题
        var title;
        //单位
        var unit;
        const dateData = [];
        const series = [];
       //上下限区域
        const plotBands = [];
        //把数据组装成series所需格式
        for (var i = 0; i < data.length; i++) {
          const updateDate = data[i].fdUpdateDate;
          if (data[i].fdTempurature != "undefined") {
            dateData.push(formatDates(updateDate));;
            temperature1Data.push( [new Date(formatDates(updateDate)).getTime(),parseFloat(Number(data[i].fdTempurature).toFixed(2))]);
          }
          if (data[i].fdTemperature2 != "undefined") {
            temperature2Data.push( [new Date(formatDates(updateDate)).getTime(),parseFloat(Number(data[i].fdTempurature2).toFixed(2))]);
          }
          var accelerX = Number(data[i].fdAccX == undefined ? 0 : data[i].fdAccX);
          var accelerY = Number(data[i].fdAccY == undefined ? 0 : data[i].fdAccY);
          var accelerZ = Number(data[i].fdAccZ == undefined ? 0 : data[i].fdAccZ);
          try{
            accelerX = parseFloat(accelerX.toFixed(2));
            accelerY = parseFloat(accelerY.toFixed(2));
            accelerZ = parseFloat(accelerZ.toFixed(2));
          }catch(e){
            continue;
          }
          xData.push([new Date(formatDates(updateDate)).getTime(), accelerX]);
          yData.push([new Date(formatDates(updateDate)).getTime(),accelerY]);
          zData.push([new Date(formatDates(updateDate)).getTime(), accelerZ]);
        }

        if(type == 1){
          title = "温度数据图表（℃）"
          unit = "℃";
          if (temperature1Data.length > 0) {
            series.push({
              name: '温度一',
              data: temperature1Data
            });
          }
          plotBands.push({
            from: 0 / 10,
            to: 200 / 10,
            color: 'rgba(68, 170, 213, 0.2)'
          });
          if(temperature2Data.length > 0){
            series.push({
              name : '温度二',
              data : temperature2Data
            });
          }
          plotBands.push({
            from: 0 / 10,
            to: 200 / 10,
            color: 'rgba(68, 170, 150, 0.2)'
          });
        }else{
          title = "加速度数据图表（g）"
          unit = "g";
          plotBands.push({
            from: 0,
            to: 5,
            color: 'rgba(68, 170, 213, 0.2)'
          });
          if(xData.length > 0){
            series.push({
              name : 'X axial',
              data : xData
            });
          }

          if(yData.length > 0){
            series.push({
              name : 'Y axial',
              data : yData
            });
          }

          if(zData.length > 0){
            series.push({
              name : 'Z axial',
              data : zData
            });
          }
        }
        this.drawChart(title,series,plotBands,unit);
      })
    },
    //绘制折线图
    drawChart(title,series,plotBands,unit){
    Highcharts.stockChart(this.id, {
      rangeSelector: {
        selected: 2
      },
      title: {
        text: title
      },
      legend: {
        enabled: true,
        align: 'center',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        borderWidth: 0,
        y: 0
      },
      yAxis: {
        title: {
          text: ''
        },
        plotBands: plotBands
      },
      plotOptions: {
        series: {
          dataGrouping: {
            enabled: false //关闭数据分组
          }
        },
        spline: {
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 2
            }
          },
          marker: {
            radius: 2,
            enabled: true
          },
          pointInterval: 3600000
        }
      },
      tooltip: {
        //格式化悬浮窗内容
        formatter: function () {
          var s = formatTimeStamp(this.x);
          this.points.forEach(point => {
            debugger
            s += '<br/>' + point.series.name + ': <b>' + this.y+unit;
          })
          return s;
        },
        shared: true
      },
      series: series
    });
    },
  }
}
</script>

 

效果图：