|
@@ -22,34 +22,6 @@ export default {
|
|
|
getData() {
|
|
|
let myChart = echarts.init(document.getElementById("index4"));
|
|
|
let data = this.resData;
|
|
|
- // let data = [
|
|
|
- // [
|
|
|
- // [
|
|
|
- // "2022-08-09 13:11:19",
|
|
|
- // 13
|
|
|
- // ],
|
|
|
- // [
|
|
|
- // "2022-08-09 13:30:19",
|
|
|
- // 20
|
|
|
- // ]
|
|
|
- // ],
|
|
|
- // [
|
|
|
- // [
|
|
|
- // "2022-08-09 13:11:19",
|
|
|
- // 20
|
|
|
- // ],
|
|
|
- // [
|
|
|
- // "2022-08-09 13:30:19",
|
|
|
- // 50
|
|
|
- // ]
|
|
|
- // ],
|
|
|
- // {
|
|
|
- // "name": "水系统设备工况情况跟踪",
|
|
|
- // "color": "#00FFFF"
|
|
|
- // }
|
|
|
- // ]
|
|
|
-
|
|
|
- console.log(data)
|
|
|
let option = {
|
|
|
legend: {
|
|
|
itemGap: 20, // 图例每项之间的间隔。
|
|
@@ -69,27 +41,33 @@ export default {
|
|
|
color:data[2].color,//设置主标题字体颜色
|
|
|
},
|
|
|
},
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ confine: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
color: ["#FF0087" , "#80FFA5" ],
|
|
|
xAxis: {
|
|
|
- type: 'time',
|
|
|
- splitLine:{
|
|
|
- show:false
|
|
|
+ show:true,//false
|
|
|
+ boundaryGap:false,// true | ['30%', '20%'],x轴两边是否留白,true留白,false不留白
|
|
|
+ axisLabel:{//x坐标轴刻度标签
|
|
|
+ show:true,
|
|
|
+ color:'#ccc',//'#ccc',设置标签颜色
|
|
|
+ // rotate: -45,
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- // show:false,
|
|
|
- lineStyle: {
|
|
|
- type: 'solid' ,
|
|
|
- color: '#ccc' , //左边线的颜色
|
|
|
- width: '1' //坐标线的宽度
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#fff' , //坐标值得具体的颜色
|
|
|
+ axisLine:{//x坐标轴轴线
|
|
|
+ show:true,
|
|
|
+ lineStyle:{//x坐标轴轴线样式
|
|
|
+ color:'#ccc',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)',设置标签颜色
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ data:data[3]
|
|
|
},
|
|
|
yAxis: [{
|
|
|
+ // min:0, //取0为最小刻度
|
|
|
+ // max: 100,
|
|
|
name:"剩\n余\n电\n量",
|
|
|
type: 'value',
|
|
|
splitLine:{
|
|
@@ -111,8 +89,11 @@ export default {
|
|
|
textStyle: {
|
|
|
color: '#FF0087' , //坐标值得具体的颜色
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
}, {
|
|
|
+ // min:0, //取0为最小刻度
|
|
|
+ // max: 5,
|
|
|
name:"无\n线\n信\n号",
|
|
|
type: 'value',
|
|
|
splitLine:{
|
|
@@ -134,7 +115,7 @@ export default {
|
|
|
textStyle: {
|
|
|
color: '#80FFA5' , //坐标值得具体的颜色
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
}],
|
|
|
series: [{
|
|
|
name: "剩余电量",
|
|
@@ -147,11 +128,24 @@ export default {
|
|
|
width: 0, //这里是为了突出显示加上的
|
|
|
}
|
|
|
},
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.8,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(128, 255, 165)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(1, 191, 236)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
showSymbol: false,
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
- data: data[0],
|
|
|
+ data: data[1],
|
|
|
yAxisIndex: 0, // 通过这个判断左右
|
|
|
}, {
|
|
|
name: "信号",
|
|
@@ -164,25 +158,30 @@ export default {
|
|
|
width: 0, //这里是为了突出显示加上的
|
|
|
}
|
|
|
},
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.8,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(255, 0, 135)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(135, 0, 157)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
showSymbol: false,
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
- data: data[1],
|
|
|
+ data: data[0],
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function() {
|
|
|
myChart.resize();
|