Compare commits
No commits in common. "4aea05d5d21da655bf4d2c28277c720241b6fe40" and "e8aee0fb3e276dba40999e0858cddcd3dc6fb6a2" have entirely different histories.
4aea05d5d2
...
e8aee0fb3e
|
|
@ -1,12 +1,52 @@
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
export function realTimeLine(id, data) {
|
export function realTimeLine(id,data) {
|
||||||
var chartDom = document.getElementById(id);
|
var chartDom = document.getElementById(id);
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var Xdata = []
|
var Xdata=[]
|
||||||
var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
|
var data1=[]//目标水肥PH
|
||||||
'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)']
|
var data2=[]//目标水肥EC
|
||||||
var colorList = [new echarts.graphic.LinearGradient(
|
var data3=[]//平均值水肥PH
|
||||||
|
var data4=[]//平均值水肥EC
|
||||||
|
var data5=[]//1#水肥PH
|
||||||
|
var data6=[]//2#水肥PH
|
||||||
|
var data7=[]//1#水肥EC
|
||||||
|
var data8=[]//2#水肥EC
|
||||||
|
var data9=[]//1#空气温度
|
||||||
|
var data10=[]//1#管道压力
|
||||||
|
data.forEach((el,index)=>{
|
||||||
|
Xdata.push(el.time)
|
||||||
|
data1.push(el.value['目标水肥PH']?el.value['目标水肥PH']:0)
|
||||||
|
data2.push(el.value['目标水肥EC']?el.value['目标水肥EC']:0)
|
||||||
|
data3.push(el.value['1#平均水肥EC']?el.value['1#平均水肥EC']:0)
|
||||||
|
data4.push(el.value['1#平均水肥PH']?el.value['1#平均水肥PH']:0)
|
||||||
|
data5.push(el.value['1#水肥PH']?el.value['1#水肥PH']:0)
|
||||||
|
data6.push(el.value['2#水肥PH']?el.value['2#水肥PH']:0)
|
||||||
|
data7.push(el.value['1#水肥EC']?el.value['1#水肥EC']:0)
|
||||||
|
data8.push(el.value['2#水肥EC']?el.value['2#水肥EC']:0)
|
||||||
|
data10.push(el.value['1#管道压力']?el.value['1#管道压力']:0)
|
||||||
|
data9.push(el.value['1#空气温度']?el.value['1#空气温度']:0)
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
console.log(data1,data2);
|
||||||
|
var list = [
|
||||||
|
{
|
||||||
|
name: '目标水肥PH',
|
||||||
|
data: data1,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -23,7 +63,32 @@ export function realTimeLine(id, data) {
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
),
|
),
|
||||||
new echarts.graphic.LinearGradient(
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0, 187, 136, 1)",
|
||||||
|
borderColor: "rgba(0, 187, 136, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '目标水肥EC',
|
||||||
|
data:data2,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -39,7 +104,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(252, 125, 106, 1)",
|
||||||
|
borderColor: "rgba(252, 125, 106, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '平均水肥PH',
|
||||||
|
data: data3,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -55,7 +146,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(252, 223, 39, 1)",
|
||||||
|
borderColor: "rgba(252, 223, 39, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '平均水肥EC',
|
||||||
|
data: data4,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -71,7 +188,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(68, 214, 232, 1)",
|
||||||
|
borderColor: "rgba(68, 214, 232, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '1#水肥PH',
|
||||||
|
data: data5,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -87,7 +230,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(69, 224, 155, 1)",
|
||||||
|
borderColor: "rgba(69, 224, 155, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '2#水肥PH',
|
||||||
|
data: data6,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -103,7 +272,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(82, 188, 255, 1)",
|
||||||
|
borderColor: "rgba(82, 188, 255, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '1#水肥EC',
|
||||||
|
data: data7,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -119,7 +314,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(214, 162, 255, 1)",
|
||||||
|
borderColor: "rgba(214, 162, 255, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '2#水肥EC',
|
||||||
|
data:data8,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -135,23 +356,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
), new echarts.graphic.LinearGradient(
|
),
|
||||||
0,
|
},
|
||||||
0,
|
},
|
||||||
0,
|
itemStyle: {
|
||||||
1,
|
normal: {
|
||||||
[
|
color: "rgba(255, 192, 111, 1)",
|
||||||
{
|
borderColor: "rgba(255, 192, 111, 1)",
|
||||||
offset: 0,
|
borderWidth: 1,
|
||||||
color: "rgba(255, 156, 154, 0.50)",
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 0.8,
|
name: '1#空气温度',
|
||||||
color: "rgba(255, 156, 154, 0)",
|
data: data9,
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2,
|
||||||
},
|
},
|
||||||
],
|
},
|
||||||
false
|
areaStyle: {
|
||||||
), new echarts.graphic.LinearGradient(
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
|
|
@ -168,30 +399,19 @@ export function realTimeLine(id, data) {
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
),
|
),
|
||||||
|
},
|
||||||
]
|
},
|
||||||
var list = []
|
itemStyle: {
|
||||||
var dataList = []
|
normal: {
|
||||||
data.forEach((el, index) => {
|
color: "rgba(255, 156, 154, 1)",
|
||||||
Xdata.push(el.time)
|
borderColor: "rgba(255, 156, 154, 1)",
|
||||||
|
borderWidth: 1,
|
||||||
el.value.forEach((el1, index1) => {
|
},
|
||||||
var containsIndex = dataList.findIndex(function(item) {
|
},
|
||||||
return item.name === el1.name;
|
},
|
||||||
});
|
{
|
||||||
if(containsIndex==-1){
|
name: '1#管道压力',
|
||||||
dataList.push({name:el1.name,value:[]})
|
data: data10,
|
||||||
}else{
|
|
||||||
dataList[containsIndex].value.push(el1.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
dataList.forEach((el,index)=>{
|
|
||||||
list.push({
|
|
||||||
name: el.name,
|
|
||||||
data: el.value,
|
|
||||||
type: "line",
|
type: "line",
|
||||||
symbol: "circle",
|
symbol: "circle",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
|
|
@ -204,18 +424,33 @@ export function realTimeLine(id, data) {
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: colorList[index],
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(255, 156, 154, 0.50)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.8,
|
||||||
|
color: "rgba(255, 156, 154, 0)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: colorList1[index],
|
color: "rgba(255, 156, 154, 1)",
|
||||||
borderColor: colorList1[index],
|
borderColor: "rgba(255, 156, 154, 1)",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
}]
|
||||||
})
|
|
||||||
var option = {
|
var option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
|
|
@ -250,10 +485,10 @@ export function realTimeLine(id, data) {
|
||||||
start: 30,
|
start: 30,
|
||||||
end: 70,
|
end: 70,
|
||||||
xAxisIndex: [0, 1],
|
xAxisIndex: [0, 1],
|
||||||
backgroundColor: 'rgba(11, 28, 42, 0.4)',
|
backgroundColor:'rgba(11, 28, 42, 0.4)',
|
||||||
fillerColor: 'rgba(2, 148, 226, 1)',
|
fillerColor:'rgba(2, 148, 226, 1)',
|
||||||
textStyle: {
|
textStyle:{
|
||||||
color: '#fff'
|
color:'#fff'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue