。。。
parent
26d29fcdc5
commit
d1132f2bff
|
|
@ -24,38 +24,38 @@ export default {
|
|||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '渗透量');
|
||||
getChartsZfl("echartDiv2", '透水铺砖表面温度');
|
||||
getChartsZfl("echartDiv3", '热岛消减率');
|
||||
getChartsZf2("echartDiv2", '透水铺砖表面温度');
|
||||
getChartsZf3("echartDiv3", '热岛消减率');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FFBF00", "#FF0087"],
|
||||
title: {
|
||||
text: text
|
||||
text: text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
|
|
@ -82,158 +82,432 @@ export default {
|
|||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: "系统A",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#80FFA5"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
|
||||
250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#00DDFF"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282,
|
||||
111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
opacity: 0.5,
|
||||
color: "#37A2FF"
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
data: [
|
||||
320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220,
|
||||
220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
opacity: 0.5,
|
||||
color: "#FFBF00"
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
data: [
|
||||
220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231,
|
||||
134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#FF0087"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220,
|
||||
402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "系统A",
|
||||
type: "bar",
|
||||
// stack: "Ad",
|
||||
barWidth: "8",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "bar",
|
||||
// stack: "Ad",
|
||||
barWidth: "8",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
|
||||
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "bar",
|
||||
barWidth: "8",
|
||||
// stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统D",
|
||||
type: "bar",
|
||||
// stack: "Ad",
|
||||
barWidth: "8",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "bar",
|
||||
barWidth: "8",
|
||||
// stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf3 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ["#eceff7", "#fff2f9", "#8bc4f8", "#fd9d48", "#9485be"],
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "系统A",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#eceff7"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
|
||||
250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#fff2f9"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282,
|
||||
111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#8bc4f8"
|
||||
},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220,
|
||||
220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#fd9d48"
|
||||
},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231,
|
||||
134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: "#9485be"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220,
|
||||
402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
|
|
|
|||
|
|
@ -25,41 +25,168 @@ export default {
|
|||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '蒸腾量');
|
||||
getChartsZfl("echartDiv2", 'COD');
|
||||
getChartsZfl("echartDiv3", '氨氮');
|
||||
getChartsZfl("echartDiv1", '调蓄池液位');
|
||||
getChartsZf2("echartDiv2", 'COD');
|
||||
getChartsZf3("echartDiv3", '氨氮');
|
||||
getChartsZfl("echartDiv4", 'SS');
|
||||
getChartsZfl("echartDiv5", '屋面温度');
|
||||
getChartsZf4("echartDiv5", '溢流量');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
text: text,
|
||||
},
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
type: "shadow",
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "系统A",
|
||||
type: "bar",
|
||||
// stack: "Ad",
|
||||
barWidth: "8",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "bar",
|
||||
// stack: "Ad",
|
||||
barWidth: "8",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
|
||||
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "bar",
|
||||
barWidth: "8",
|
||||
// stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统D",
|
||||
type: "bar",
|
||||
// stack: "Ad",
|
||||
barWidth: "8",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "bar",
|
||||
barWidth: "8",
|
||||
// stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
|
|
@ -86,158 +213,366 @@ export default {
|
|||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: "系统A",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#80FFA5"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
|
||||
250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#00DDFF"
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282,
|
||||
111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
color: "#37A2FF"
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
data: [
|
||||
320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220,
|
||||
220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 0,
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#FF0087"
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
data: [
|
||||
220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220,
|
||||
402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
color: "#FFBF00"
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
data: [
|
||||
220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231,
|
||||
134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf3 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "系统A",
|
||||
type: "line",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
|
||||
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf4 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "系统A",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
|
||||
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统D",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
|
|
|
|||
Loading…
Reference in New Issue