xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: xiaomeng:4aea05d5d21da655bf4d2c28277c720241b6fe40
Branches Tags
xiaomeng:portal
xiaomeng:pc-master
xiaomeng:wx-program
xiaomeng:mini-program
xiaomeng:fix
xiaomeng:master
xiaomeng:wxmaster
xiaomeng:main
xiaomeng:0.0.1
..
compare: xiaomeng:e8aee0fb3e276dba40999e0858cddcd3dc6fb6a2
Branches Tags
xiaomeng:portal
xiaomeng:pc-master
xiaomeng:wx-program
xiaomeng:mini-program
xiaomeng:fix
xiaomeng:master
xiaomeng:wxmaster
xiaomeng:main
xiaomeng:0.0.1

No commits in common. "4aea05d5d21da655bf4d2c28277c720241b6fe40" and "e8aee0fb3e276dba40999e0858cddcd3dc6fb6a2" have entirely different histories.
4aea05d5d2 ... e8aee0fb3e

1 changed files with 444 additions and 209 deletions
Show Stats Expand all files Collapse all files

653
src/assets/js/charts.js
View File

@ -1,197 +1,39 @@
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
0, var data4=[]//平均值水肥EC
0, var data5=[]//1#水肥PH
0, var data6=[]//2#水肥PH
1, var data7=[]//1#水肥EC
[ var data8=[]//2#水肥EC
{ var data9=[]//1#空气温度
offset: 0, var data10=[]//1#管道压力
color: "rgba(0, 187, 136, 0.50)", data.forEach((el,index)=>{
},
{
offset: 0.8,
color: "rgba(0, 187, 136, 0)",
},
],
false
),
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(252, 125, 106, 0.50)",
},
{
offset: 0.8,
color: "rgba(252, 125, 106, 0)",
},
],
false
), new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(252, 223, 39, 0.50)",
},
{
offset: 0.8,
color: "rgba(252, 223, 39, 0)",
},
],
false
), new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(68, 214, 232, 0.50)",
},
{
offset: 0.8,
color: "rgba(68, 214, 232, 0)",
},
],
false
), new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(69, 224, 155, 0.50)",
},
{
offset: 0.8,
color: "rgba(69, 224, 155, 0)",
},
],
false
), new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(82, 188, 255, 0.50)",
},
{
offset: 0.8,
color: "rgba(82, 188, 255, 0)",
},
],
false
), new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(214, 162, 255, 0.50)",
},
{
offset: 0.8,
color: "rgba(214, 162, 255, 0)",
},
],
false
), new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255, 192, 111, 0.50)",
},
{
offset: 0.8,
color: "rgba(255, 192, 111, 0)",
},
],
false
), 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
), 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
),
]
var list = []
var dataList = []
data.forEach((el, index) => {
Xdata.push(el.time) Xdata.push(el.time)
data1.push(el.value['目标水肥PH']?el.value['目标水肥PH']:0)
el.value.forEach((el1, index1) => { data2.push(el.value['目标水肥EC']?el.value['目标水肥EC']:0)
var containsIndex = dataList.findIndex(function(item) { data3.push(el.value['1#平均水肥EC']?el.value['1#平均水肥EC']:0)
return item.name === el1.name; data4.push(el.value['1#平均水肥PH']?el.value['1#平均水肥PH']:0)
}); data5.push(el.value['1#水肥PH']?el.value['1#水肥PH']:0)
if(containsIndex==-1){ data6.push(el.value['2#水肥PH']?el.value['2#水肥PH']:0)
dataList.push({name:el1.name,value:[]}) data7.push(el.value['1#水肥EC']?el.value['1#水肥EC']:0)
}else{ data8.push(el.value['2#水肥EC']?el.value['2#水肥EC']:0)
dataList[containsIndex].value.push(el1.value) data10.push(el.value['1#管道压力']?el.value['1#管道压力']:0)
} data9.push(el.value['1#空气温度']?el.value['1#空气温度']:0)
})
}) })
dataList.forEach((el,index)=>{ console.log(data1,data2);
list.push({ var list = [
name: el.name, {
data: el.value, name: '目标水肥PH',
data: data1,
type: "line", type: "line",
symbol: "circle", symbol: "circle",
smooth: true, smooth: true,
@ -204,18 +46,411 @@ 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(0, 187, 136, 0.50)",
},
{
offset: 0.8,
color: "rgba(0, 187, 136, 0)",
},
],
false
),
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: colorList1[index], color: "rgba(0, 187, 136, 1)",
borderColor: colorList1[index], borderColor: "rgba(0, 187, 136, 1)",
borderWidth: 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,
1,
[
{
offset: 0,
color: "rgba(252, 125, 106, 0.50)",
},
{
offset: 0.8,
color: "rgba(252, 125, 106, 0)",
},
],
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(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(252, 223, 39, 0.50)",
},
{
offset: 0.8,
color: "rgba(252, 223, 39, 0)",
},
],
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(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(68, 214, 232, 0.50)",
},
{
offset: 0.8,
color: "rgba(68, 214, 232, 0)",
},
],
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(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(69, 224, 155, 0.50)",
},
{
offset: 0.8,
color: "rgba(69, 224, 155, 0)",
},
],
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(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(82, 188, 255, 0.50)",
},
{
offset: 0.8,
color: "rgba(82, 188, 255, 0)",
},
],
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(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(214, 162, 255, 0.50)",
},
{
offset: 0.8,
color: "rgba(214, 162, 255, 0)",
},
],
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(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255, 192, 111, 0.50)",
},
{
offset: 0.8,
color: "rgba(255, 192, 111, 0)",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "rgba(255, 192, 111, 1)",
borderColor: "rgba(255, 192, 111, 1)",
borderWidth: 1,
},
},
},
{
name: '1#空气温度',
data: data9,
type: "line",
symbol: "circle",
smooth: true,
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
},
},
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
),
},
},
itemStyle: {
normal: {
color: "rgba(255, 156, 154, 1)",
borderColor: "rgba(255, 156, 154, 1)",
borderWidth: 1,
},
},
},
{
name: '1#管道压力',
data: data10,
type: "line",
symbol: "circle",
smooth: true,
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
},
},
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
),
},
},
itemStyle: {
normal: {
color: "rgba(255, 156, 154, 1)",
borderColor: "rgba(255, 156, 154, 1)",
borderWidth: 1,
},
},
}]
var option = { var option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -238,25 +473,25 @@ export function realTimeLine(id, data) {
}, },
dataZoom: [ dataZoom: [
{ {
show: true, show: true,
realtime: true, realtime: true,
start: 30, start: 30,
end: 70, end: 70,
xAxisIndex: [0, 1] xAxisIndex: [0, 1]
}, },
{ {
type: 'inside', type: 'inside',
realtime: true, realtime: true,
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'
} }
} }
], ],
grid: { grid: {
left: "3%", left: "3%",
right: "4%", right: "4%",