|
|
@@ -1,21 +1,43 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- ref="testLine"
|
|
|
- style="width: 450px; height: 400px; margin: 40px auto"
|
|
|
- ></div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ ref="testLine"
|
|
|
+ style="width: 450px; height: 400px; margin: 20px auto"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapState } from "vuex";
|
|
|
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ title: {
|
|
|
+ type:String,
|
|
|
+ default:''
|
|
|
+ },
|
|
|
+ id:{
|
|
|
+ type:Number,
|
|
|
+ required:true
|
|
|
+ },
|
|
|
+ unit:{
|
|
|
+ type:String,
|
|
|
+ default:''
|
|
|
+ },
|
|
|
+ type:{
|
|
|
+ type:String,
|
|
|
+ required:true
|
|
|
+ }
|
|
|
+},
|
|
|
data() {
|
|
|
return {
|
|
|
- dianliudata: new Array(30).fill("-"),
|
|
|
+ currentChartId: 1,
|
|
|
xData: new Array(30).fill("-"),
|
|
|
+ yData: new Array(30).fill("-"),
|
|
|
count: 0,
|
|
|
myChart: null,
|
|
|
option: {
|
|
|
+ color: ["#41D6C3", "#FA8072"],
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
@@ -34,14 +56,32 @@ export default {
|
|
|
extraCssText:
|
|
|
"box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
|
|
|
formatter: (params) => {
|
|
|
+
|
|
|
var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
|
|
|
return result;
|
|
|
},
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ top: '15%',
|
|
|
+ left: '10%',
|
|
|
+ right: '10%',
|
|
|
+ bottom: '1%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ x: "left",
|
|
|
+ y: "top",
|
|
|
+ data: [],
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: "normal",
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
yAxis: [
|
|
|
{
|
|
|
boundaryGap: [0, "100%"],
|
|
|
- name: `${this.unit}`,
|
|
|
+ name: this.unit,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
@@ -79,58 +119,62 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
title: {
|
|
|
- text: `${this.title}`,
|
|
|
- padding: [5, 230],
|
|
|
+ text: this.title,
|
|
|
+ padding: [5, 170],
|
|
|
textStyle: {
|
|
|
fontWeight: "normal", //标题颜色
|
|
|
color: "#4ADEFE",
|
|
|
+ fontSize:15
|
|
|
},
|
|
|
},
|
|
|
- color: ["#41D6C3", "#5AAAFA"],
|
|
|
+
|
|
|
series: [
|
|
|
- {
|
|
|
- name: `${this.unit}`,
|
|
|
+ {
|
|
|
type: "line",
|
|
|
- symbol: "none",
|
|
|
- markPoint: {
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- backgroundColor: "#fff",
|
|
|
- position: "top",
|
|
|
- color: "#5AAAFA",
|
|
|
- borderColor: "rgba(90,170,250,0.3)",
|
|
|
- borderWidth: 1,
|
|
|
- padding: 8,
|
|
|
- formatter: `{b}: {c} ${this.unit}`,
|
|
|
- },
|
|
|
- },
|
|
|
- symbol: "circle",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderColor: "rgba(90,170,250,0.3)",
|
|
|
- borderWidth: 15,
|
|
|
- },
|
|
|
+ symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
+ showAllSymbol: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: "rgba(255, 102, 102,1)", // 线条颜色
|
|
|
},
|
|
|
- symbolSize: 7,
|
|
|
- data: [{ type: "max", name: "Max" }],
|
|
|
+ borderColor: "rgba(0,0,0,.4)",
|
|
|
},
|
|
|
- // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
|
|
|
- lineStyle: {
|
|
|
- width: 2,
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#9effff",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#9E87FF",
|
|
|
- },
|
|
|
- ]),
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(255, 102, 102,1)",
|
|
|
+ borderColor: "#646ace",
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //区域填充样式
|
|
|
+ normal: {
|
|
|
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(255, 102, 102,.3)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(255, 102, 102, 0)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
|
|
|
+ shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ },
|
|
|
},
|
|
|
- areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
|
|
|
- connectNulls: true,
|
|
|
data: [],
|
|
|
},
|
|
|
],
|
|
|
@@ -140,30 +184,40 @@ export default {
|
|
|
computed: {
|
|
|
...mapState(["websocketIP"]),
|
|
|
},
|
|
|
- props: ["id", "title", "unit"],
|
|
|
methods: {
|
|
|
idChange(id) {
|
|
|
- console.log("right", id);
|
|
|
+ // console.log("sep", id);
|
|
|
+ // 数据清空
|
|
|
+ this.xData = new Array(30).fill("-");
|
|
|
+ this.yData = new Array(30).fill("-");
|
|
|
+ // 关闭以前的websocket
|
|
|
+ this.websocket.close();
|
|
|
+ // 开启一个新的
|
|
|
+ this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
|
|
|
+ this.initWebSocket();
|
|
|
},
|
|
|
+
|
|
|
addData(data) {
|
|
|
- console.log("data", data);
|
|
|
+ this.websocket;
|
|
|
+ // 先扩展数组，然后删除多余元素
|
|
|
+ // console.log("data", data);
|
|
|
if (this.count < 30) {
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
- this.dianliudata[this.count] = data[i]["dianjidianliui_after"];
|
|
|
+ this.yData[this.count] = data[i][this.type];
|
|
|
this.xData[this.count] = data[i]["date"].split(" ")[1];
|
|
|
}
|
|
|
this.count++;
|
|
|
} else {
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
// 删除数组中的第一个项目
|
|
|
- this.dianliudata.shift();
|
|
|
- this.dianliudata.push(data[i]["dianjidianliui_after"]);
|
|
|
-
|
|
|
+ this.yData.shift();
|
|
|
+ this.yData.push(data[i][this.type[0]]);
|
|
|
this.xData.shift();
|
|
|
this.xData.push(data[i]["date"].split(" ")[1]);
|
|
|
}
|
|
|
}
|
|
|
this.myChart.setOption({
|
|
|
+
|
|
|
xAxis: [
|
|
|
{
|
|
|
data: this.xData,
|
|
|
@@ -171,11 +225,14 @@ export default {
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: "A",
|
|
|
- data: this.dianliudata,
|
|
|
+ name: this.unit,
|
|
|
+ data: this.yData,
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
+ // console.log("this.paiqidata", this.paiqidata);
|
|
|
+ // console.log("this.chouqidata", this.chouqidata);
|
|
|
+ // console.log("this.xData", this.xData);
|
|
|
},
|
|
|
initWebSocket() {
|
|
|
// 连接错误
|
|
|
@@ -213,11 +270,20 @@ export default {
|
|
|
// 先画图
|
|
|
this.myChart = this.$echarts.init(this.$refs.testLine);
|
|
|
this.myChart.setOption(this.option);
|
|
|
- // this.websocket = new WebSocket(
|
|
|
- // `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
|
|
|
- // );
|
|
|
- // this.initWebSocket();
|
|
|
+ this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
|
|
|
+ this.initWebSocket();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
+<style scoped>
|
|
|
+.select-veido .el-select {
|
|
|
+ width: 100px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.select-veido >>> .el-input--small .el-input__inner {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+.select-veido >>> .el-input__inner {
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+</style>
|
