|
@@ -22,6 +22,7 @@ export default {
|
|
getData() {
|
|
getData() {
|
|
let myChart = echarts.init(document.getElementById("index4"));
|
|
let myChart = echarts.init(document.getElementById("index4"));
|
|
let data = this.resData;
|
|
let data = this.resData;
|
|
|
|
+ console.log(data)
|
|
let option = {
|
|
let option = {
|
|
legend: {
|
|
legend: {
|
|
itemGap: 20, // 图例每项之间的间隔。
|
|
itemGap: 20, // 图例每项之间的间隔。
|
|
@@ -78,18 +79,18 @@ export default {
|
|
fontSize: 14,
|
|
fontSize: 14,
|
|
padding: [0, 80, 0, 0]
|
|
padding: [0, 80, 0, 0]
|
|
},
|
|
},
|
|
- axisLine: {
|
|
|
|
- lineStyle: {
|
|
|
|
- type: 'solid' ,
|
|
|
|
- color: '#FF0087' , //左边线的颜色
|
|
|
|
- width: '1' //坐标线的宽度
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- textStyle: {
|
|
|
|
- color: '#FF0087' , //坐标值得具体的颜色
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ // axisLine: {
|
|
|
|
+ // lineStyle: {
|
|
|
|
+ // type: 'solid' ,
|
|
|
|
+ // color: '#FF0087' , //左边线的颜色
|
|
|
|
+ // width: '1' //坐标线的宽度
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // axisLabel: {
|
|
|
|
+ // textStyle: {
|
|
|
|
+ // color: '#FF0087' , //坐标值得具体的颜色
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
|
|
}, {
|
|
}, {
|
|
// min:0, //取0为最小刻度
|
|
// min:0, //取0为最小刻度
|
|
@@ -104,40 +105,42 @@ export default {
|
|
fontSize: 14,
|
|
fontSize: 14,
|
|
padding: [0, 0, 0, 80]
|
|
padding: [0, 0, 0, 80]
|
|
},
|
|
},
|
|
- axisLine: {
|
|
|
|
- lineStyle: {
|
|
|
|
- type: 'solid' ,
|
|
|
|
- color: '#80FFA5' , //左边线的颜色
|
|
|
|
- width: '1' //坐标线的宽度
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- textStyle: {
|
|
|
|
- color: '#80FFA5' , //坐标值得具体的颜色
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ // axisLine: {
|
|
|
|
+ // lineStyle: {
|
|
|
|
+ // type: 'solid' ,
|
|
|
|
+ // color: '#80FFA5' , //左边线的颜色
|
|
|
|
+ // width: '1' //坐标线的宽度
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // axisLabel: {
|
|
|
|
+ // textStyle: {
|
|
|
|
+ // color: '#80FFA5' , //坐标值得具体的颜色
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
}],
|
|
}],
|
|
- series: [{
|
|
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
name: "剩余电量",
|
|
name: "剩余电量",
|
|
type: 'line',
|
|
type: 'line',
|
|
- stack: 'Total',
|
|
|
|
- smooth: true,
|
|
|
|
|
|
+ // stack: 'Total',
|
|
|
|
+ // smooth: true,
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: 'red',
|
|
|
|
|
|
+ // color: 'red',
|
|
width: 0, //这里是为了突出显示加上的
|
|
width: 0, //这里是为了突出显示加上的
|
|
}
|
|
}
|
|
},
|
|
},
|
|
areaStyle: {
|
|
areaStyle: {
|
|
- opacity: 0.8,
|
|
|
|
|
|
+ opacity: 1,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
+
|
|
{
|
|
{
|
|
offset: 0,
|
|
offset: 0,
|
|
- color: 'rgb(128, 255, 165)'
|
|
|
|
|
|
+ color: 'rgb(255, 0, 135)'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
offset: 1,
|
|
offset: 1,
|
|
- color: 'rgb(1, 191, 236)'
|
|
|
|
|
|
+ color: 'rgb(135, 0, 157)'
|
|
}
|
|
}
|
|
])
|
|
])
|
|
},
|
|
},
|
|
@@ -145,47 +148,46 @@ export default {
|
|
emphasis: {
|
|
emphasis: {
|
|
focus: 'series'
|
|
focus: 'series'
|
|
},
|
|
},
|
|
- data: data[1],
|
|
|
|
yAxisIndex: 0, // 通过这个判断左右
|
|
yAxisIndex: 0, // 通过这个判断左右
|
|
|
|
+ data: data[0],
|
|
}, {
|
|
}, {
|
|
- name: "信号",
|
|
|
|
|
|
+ name: "无线信号",
|
|
type: 'line',
|
|
type: 'line',
|
|
- stack: 'Total',
|
|
|
|
- smooth: true,
|
|
|
|
|
|
+ // stack: 'Total',
|
|
|
|
+ // smooth: true,
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: '#ccc',
|
|
|
|
|
|
+ // color: '#ccc',
|
|
width: 0, //这里是为了突出显示加上的
|
|
width: 0, //这里是为了突出显示加上的
|
|
}
|
|
}
|
|
},
|
|
},
|
|
areaStyle: {
|
|
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)'
|
|
|
|
- }
|
|
|
|
- ])
|
|
|
|
- },
|
|
|
|
|
|
+ opacity: 1,
|
|
|
|
+ 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,
|
|
showSymbol: false,
|
|
emphasis: {
|
|
emphasis: {
|
|
focus: 'series'
|
|
focus: 'series'
|
|
},
|
|
},
|
|
- data: data[0],
|
|
|
|
- yAxisIndex: 1,
|
|
|
|
|
|
+ yAxisIndex: 1, // 通过这个判断左右
|
|
|
|
+ data: data[1],
|
|
|
|
+
|
|
|
|
|
|
}]
|
|
}]
|
|
};
|
|
};
|
|
-
|
|
|
|
- myChart.setOption(option);
|
|
|
|
- window.addEventListener("resize", function() {
|
|
|
|
- myChart.resize();
|
|
|
|
- });
|
|
|
|
|
|
+ myChart.setOption(option);
|
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
|
+ myChart.resize();
|
|
|
|
+ });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|