效果:
-
<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);
-
}));