折线图数据修改 #20
|
|
@ -4,49 +4,9 @@ export function realTimeLine(id,data) {
|
|||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
var Xdata = []
|
||||
var data1=[]//目标水肥PH
|
||||
var data2=[]//目标水肥EC
|
||||
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(
|
||||
var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
|
||||
'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 colorList = [new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -63,32 +23,7 @@ export function realTimeLine(id,data) {
|
|||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -104,33 +39,7 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -146,33 +55,7 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -188,33 +71,7 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -230,33 +87,7 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -272,33 +103,7 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -314,33 +119,7 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -356,33 +135,23 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255, 192, 111, 1)",
|
||||
borderColor: "rgba(255, 192, 111, 1)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(255, 156, 154, 0.50)",
|
||||
},
|
||||
{
|
||||
name: '1#空气温度',
|
||||
data: data9,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
offset: 0.8,
|
||||
color: "rgba(255, 156, 154, 0)",
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
],
|
||||
false
|
||||
), new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
|
@ -399,19 +168,30 @@ export function realTimeLine(id,data) {
|
|||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255, 156, 154, 1)",
|
||||
borderColor: "rgba(255, 156, 154, 1)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '1#管道压力',
|
||||
data: data10,
|
||||
|
||||
]
|
||||
var list = []
|
||||
var dataList = []
|
||||
data.forEach((el, index) => {
|
||||
Xdata.push(el.time)
|
||||
|
||||
el.value.forEach((el1, index1) => {
|
||||
var containsIndex = dataList.findIndex(function(item) {
|
||||
return item.name === el1.name;
|
||||
});
|
||||
if(containsIndex==-1){
|
||||
dataList.push({name:el1.name,value:[]})
|
||||
}else{
|
||||
dataList[containsIndex].value.push(el1.value)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
dataList.forEach((el,index)=>{
|
||||
list.push({
|
||||
name: el.name,
|
||||
data: el.value,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
smooth: true,
|
||||
|
|
@ -424,33 +204,18 @@ export function realTimeLine(id,data) {
|
|||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
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
|
||||
),
|
||||
color: colorList[index],
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255, 156, 154, 1)",
|
||||
borderColor: "rgba(255, 156, 154, 1)",
|
||||
color: colorList1[index],
|
||||
borderColor: colorList1[index],
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
}]
|
||||
})
|
||||
})
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
|
|||
Loading…
Reference in New Issue