效果:
-
<template>
-
<div class="wrapper">
-
<Row v-for="(items, index) in secondeData" :key="index">
-
<Col span="12" v-for="m in items" :key="m">
-
<div class="chart" :ref="m.targetName" style="height: 400px;margin: 10px;box-shadow: 0 0 8px"></div>
-
</Col>
-
</Row>
-
</div>
-
</template>
-
<script>
-
var appName='';
-
//引入Echarts主模块
-
let echarts=require('echarts/lib/echarts');
-
//引入柱状图
-
require('echarts/lib/chart/bar');
-
//引入圆饼图
-
require('echarts/lib/chart/pie');
-
//引入所需组件
-
require('echarts/lib/component/tooltip');
-
require('echarts/lib/component/legend');
-
-
import 'static/js/macarons.js'
-
export default {
-
-
data(){
-
return {
-
charts:{},
-
echartsData:[],
-
appCode:'',
-
appName:'',
-
monitorAlarmMessage:{
-
startAlarmTime:new Date(new Date().getTime()-600000),
-
endAlarmTime:new Date()
-
}
-
}
-
},
-
computed: {
-
// 计算属性的 getter
-
secondeData: function () {
-
let newData = [], c = this.echartsData.length % 2 == 0, l = c ? this.echartsData.length : this.echartsData.length - 1 ;
-
for (let i = 0; i < l; i = i+2) {
-
newData.push([this.echartsData[i], this.echartsData[i+1]]);
-
}
-
if(!c){
-
newData.push([this.echartsData[this.echartsData.length - 1]]);
-
}
-
return newData;
-
}
-
},
-
methods:{
-
setData(arrays){
-
let _this = this;
-
_this.echartsData = arrays;
-
_this.$nextTick(function () {
-
let newTargets = [];
-
for (let index = 0; index < arrays.length; index++) {
-
let item = arrays[index], doms = _this.$refs[item.targetName];
-
newTargets[index] = item.targetName;
-
if(!_this.charts[item.targetName]){
-
console.log("不存在，开始重新绘制div ->" + item.targetName);
-
_this.createChartOne(item.targetName, doms[0]);
-
}
-
_this.chartMonitorTargetUpdate(item.targetName, item);
-
}
-
for (const key in _this.charts) {
-
if (newTargets.indexOf(key) < 0) {
-
console.log("删除 ->" + key);
-
delete _this.charts[key];
-
}
-
}
-
})
-
},
-
showInfluxDBMonitorAlarmByAppCode(){
-
this.$http.post('/influxDBMonitorAnalyze/showInfluxDBMonitorAlarmByAppCode',{//查询请求接口
-
appName:this.appName,
-
appCode:this.appCode
-
}).then((res)=>{
-
//alert(JSON.stringify(res.data.data));
-
this.setData(res.data.data.filter(function(item){
-
return item != null;
-
}));
-
//this.echartsDataSize= this.echartsData.length;
-
console.log(this.echartsData);
-
}).catch((err)=>{
-
this.$Modal.error({ title: "请求失败", content: err });
-
})
-
},
-
createChartOne(targetName, ref){
-
//this.chartMonitorTarget=echarts.init(this.$refs.chartOne);
-
this.charts[targetName] = echarts.init(ref, 'macarons');
-
this.charts[targetName].setOption({
-
tooltip: {
-
trigger: 'axis'
-
},
-
grid:{
-
top:100,
-
bottom:40,
-
left:40,
-
right:45
-
},
-
xAxis: {
-
name:'时间', //坐标轴名称
-
type: 'category',
-
nameGap:15, //坐标轴名称与轴线之间的距离
-
nameRotate:0, //坐标轴名字旋转，角度值
-
boundaryGap: true,
-
data: [],
-
axisTick:{ //坐标轴刻度是否朝内，默认朝外。
-
length:5 //坐标轴刻度的长度。
-
},
-
axisLabel: {
-
interval:"auto",
-
rotate:30
-
}
-
},
-
yAxis: {
-
name:'', //坐标轴名称
-
type: 'value',
-
axisLabel: {
-
formatter: '{value}'
-
}
-
},
-
series: []
-
})
-
},
-
chartMonitorTargetUpdate(targetName, data){
-
this.charts[targetName].setOption({
-
title: {
-
text: targetName,
-
textStyle: {
-
fontWeight: 'bolder', //标题颜色
-
color: '#408829'
-
},
-
subtext: ''
-
},
-
legend: {
-
left:'center',
-
top:'30',
-
bottom:'auto',
-
orient:'horizontal',
-
data:data.legend.data
-
},
-
xAxis: {
-
data: data.xaxisData
-
},
-
series: data.influxDBMonitorAlarm.seriesList
-
});
-
},
-
test(){
-
var arrays = [], count = Math.round(Math.random()*10);
-
console.log("随机生成个数:" + count);
-
for (let index = 0; index < count; index++) {
-
//let count = Math.round(Math.random()*10);
-
let xaxis = [10];
-
for (let k = 0; k < 10; k++) {
-
xaxis[k] = "8:" + Math.round(Math.random()*60);
-
}
-
-
let datas = [4];
-
for (let j = 0; j < 4; j++) {
-
let is = [10];
-
for (let i = 0; i < 10; i++) {
-
is[i] = Math.round(Math.random()*100);
-
}
-
datas[j] = is;
-
}
-
arrays.push({
-
"legend": {
-
"data": ["基线值", "当前值", "基线上浮值", "基线下浮值"]
-
},
-
"targetName": "targetName" + index,
-
"appName": null,
-
"xaxisData": xaxis,
-
"influxDBMonitorAlarm": {
-
"seriesList": [{
-
"name": "基线值",
-
"type": "line",
-
"data": datas[3],
-
"markPoint": {
-
"data": [{
-
"type": "max",
-
"name": "最大值"
-
}, {
-
"type": "min",
-
"name": "最小值"
-
}]
-
}
-
}, {
-
"name": "当前值",
-
"type": "line",
-
"data": datas[0],
-
"markPoint": {
-
"data": [{
-
"type": "max",
-
"name": "最大值"
-
}, {
-
"type": "min",
-
"name": "最小值"
-
}]
-
}
-
}, {
-
"name": "基线上浮值",
-
"type": "line",
-
"data": datas[1],
-
"markPoint": {
-
"data": [{
-
"type": "max",
-
"name": "最大值"
-
}, {
-
"type": "min",
-
"name": "最小值"
-
}]
-
}
-
}, {
-
"name": "基线下浮值",
-
"type": "line",
-
"data": datas[2],
-
"markPoint": {
-
"data": [{
-
"type": "max",
-
"name": "最大值"
-
}, {
-
"type": "min",
-
"name": "最小值"
-
}]
-
}
-
}]
-
}
-
});
-
}
-
this.setData(arrays);
-
}
-
},
-
created(){
-
-
},
-
activated(){
-
let _this = this;
-
appName=_this.$route.query.appName
-
_this.appCode=_this.$route.query.appCode
-
_this.appName=_this.$route.query.appName
-
_this.showInfluxDBMonitorAlarmByAppCode();
-
// _this.test();
-
-
window.setInterval(function(){
-
_this.showInfluxDBMonitorAlarmByAppCode();
-
}, 5000);
-
},destroyed(){
-
-
}
-
-
}
-
</script>
-
<style lang="scss" scoped>//-----------------------------------------------------------css样式代码start
-
//编写样式
-
.ivu-form-item {
-
margin-bottom: 24px;
-
}
-
</style>
js:macarons.js
-
(function (root, factory) {
-
if (typeof define === 'function' && define.amd) {
-
// AMD. Register as an anonymous module.
-
define(['exports', 'echarts'], factory);
-
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
-
// CommonJS
-
factory(exports, require('echarts'));
-
} else {
-
// Browser globals
-
factory({}, root.echarts);
-
}
-
}(this, function (exports, echarts) {
-
var log = function (msg) {
-
if (typeof console !== 'undefined') {
-
console && console.error && console.error(msg);
-
}
-
};
-
if (!echarts) {
-
log('ECharts is not Loaded');
-
return;
-
}
-
-
var colorPalette = [
-
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
-
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
-
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
-
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
-
];
-
-
-
var theme = {
-
color: colorPalette,
-
-
title: {
-
textStyle: {
-
fontWeight: 'normal',
-
color: '#008acd'
-
}
-
},
-
-
visualMap: {
-
itemWidth: 15,
-
color: ['#5ab1ef','#e0ffff']
-
},
-
-
toolbox: {
-
iconStyle: {
-
normal: {
-
borderColor: colorPalette[0]
-
}
-
}
-
},
-
-
tooltip: {
-
backgroundColor: 'rgba(50,50,50,0.5)',
-
axisPointer : {
-
type : 'line',
-
lineStyle : {
-
color: '#008acd'
-
},
-
crossStyle: {
-
color: '#008acd'
-
},
-
shadowStyle : {
-
color: 'rgba(200,200,200,0.2)'
-
}
-
}
-
},
-
-
dataZoom: {
-
dataBackgroundColor: '#efefff',
-
fillerColor: 'rgba(182,162,222,0.2)',
-
handleColor: '#008acd'
-
},
-
-
grid: {
-
borderColor: '#eee'
-
},
-
-
categoryAxis: {
-
axisLine: {
-
lineStyle: {
-
color: '#008acd'
-
}
-
},
-
splitLine: {
-
lineStyle: {
-
color: ['#eee']
-
}
-
}
-
},
-
-
valueAxis: {
-
axisLine: {
-
lineStyle: {
-
color: '#008acd'
-
}
-
},
-
splitArea : {
-
show : true,
-
areaStyle : {
-
color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
-
}
-
},
-
splitLine: {
-
lineStyle: {
-
color: ['#eee']
-
}
-
}
-
},
-
-
timeline : {
-
lineStyle : {
-
color : '#008acd'
-
},
-
controlStyle : {
-
normal : { color : '#008acd'},
-
emphasis : { color : '#008acd'}
-
},
-
symbol : 'emptyCircle',
-
symbolSize : 3
-
},
-
-
line: {
-
smooth : true,
-
symbol: 'emptyCircle',
-
symbolSize: 3
-
},
-
-
candlestick: {
-
itemStyle: {
-
normal: {
-
color: '#d87a80',
-
color0: '#2ec7c9',
-
lineStyle: {
-
color: '#d87a80',
-
color0: '#2ec7c9'
-
}
-
}
-
}
-
},
-
-
scatter: {
-
symbol: 'circle',
-
symbolSize: 4
-
},
-
-
map: {
-
label: {
-
normal: {
-
textStyle: {
-
color: '#d87a80'
-
}
-
}
-
},
-
itemStyle: {
-
normal: {
-
borderColor: '#eee',
-
areaColor: '#ddd'
-
},
-
emphasis: {
-
areaColor: '#fe994e'
-
}
-
}
-
},
-
-
graph: {
-
color: colorPalette
-
},
-
-
gauge : {
-
axisLine: {
-
lineStyle: {
-
color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
-
width: 10
-
}
-
},
-
axisTick: {
-
splitNumber: 10,
-
length :15,
-
lineStyle: {
-
color: 'auto'
-
}
-
},
-
splitLine: {
-
length :22,
-
lineStyle: {
-
color: 'auto'
-
}
-
},
-
pointer : {
-
width : 5
-
}
-
}
-
};
-
-
echarts.registerTheme('macarons', theme);
-
}));