记录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>
运行截图
如有错误欢迎指正,毕竟我只是个打杂的。