722 lines
31 KiB
HTML
722 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>图表</title>
|
|
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<script src="./js/vue.js"></script>
|
|
<script src="./js/echarts.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<div id="app">
|
|
<div class="btn" @click="slide">切换</div>
|
|
<div ref="content" :class="operation==true?'container':'content'">
|
|
<div>
|
|
<div class="datepicker">
|
|
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="waterEchart" ref="waterEchart"></div>
|
|
</div>
|
|
<div>
|
|
<div class="datepicker">
|
|
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="watt-hour" ref="wattHour"></div>
|
|
</div>
|
|
<div>
|
|
<div class="datepicker">
|
|
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="gasEchart" ref="gasEchart"></div>
|
|
</div>
|
|
<div>
|
|
<div class="datepicker">
|
|
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="energyEchart" ref="energyEchart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
date: [
|
|
'2022/10/23', '2022/10/24', '2022/10/25', '2022/10/26', '2022/10/27', '2022/10/28', '2022/10/29', '2022/10/30'
|
|
],
|
|
operation: false,
|
|
value1: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
slide() {
|
|
this.operation = !this.operation
|
|
},
|
|
// 用水量折线图
|
|
waterLine() {
|
|
let myChart = echarts.getInstanceByDom(
|
|
this.$refs.waterEchart
|
|
);
|
|
if (myChart == null) {
|
|
myChart = echarts.init(this.$refs.waterEchart);
|
|
}
|
|
let xaxisData = this.date;
|
|
let yaxisData1 = [8, 9, 20, 16, 12, 13, 9, 10];
|
|
if (this.operation == true) {
|
|
yaxisData1 = [8, 9, 20, 16, 12, 13, 9, 10, 24, 15, 24, 19, 15, 20, 16, 12, 13, 9]
|
|
}
|
|
let option = {
|
|
// backgroundColor: "#001829",
|
|
grid: {
|
|
top: "18%",
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
confine: true,
|
|
backgroundColor: "rgba(255, 132, 90, 0.3)",
|
|
borderColor: "#FF845A",
|
|
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(255, 132, 90, 0.3);",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fff",
|
|
fontFamily: "PangMenZhengDao",
|
|
},
|
|
formatter: function (params) {
|
|
var relVal = params[0].name;
|
|
for (var i = 0; i < params.length; i++) {
|
|
relVal +=
|
|
"<br/>" +
|
|
params[i].marker +
|
|
params[i].seriesName +
|
|
": " +
|
|
params[i].value +
|
|
" t";
|
|
}
|
|
return relVal;
|
|
},
|
|
axisPointer: {
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "#FF845A",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
right: "3%",
|
|
top: "5%",
|
|
itemWidth: 20,
|
|
itemHeight: 4,
|
|
icon: "react",
|
|
itemGap: 17,
|
|
align: "right",
|
|
textStyle: {
|
|
color: "#AEC9FF",
|
|
fontSize: 16,
|
|
fontFamily: "AlibabaPuHuiTi-Medium",
|
|
},
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
interval: 0,
|
|
// formatter(val, i) {
|
|
// // console.log(val, i);
|
|
// if (i === 0 || i === xaxisData.length - 1 || i === Math.ceil(xaxisData.length / 2)) {
|
|
// return val
|
|
// }
|
|
// return ''
|
|
// }
|
|
},
|
|
data: xaxisData,
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "单位:/t",
|
|
nameTextStyle: {
|
|
color: "#AEC9FF",
|
|
fontWeight: 400,
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: "#AEC9FF",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(83, 125, 170, 0.2)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用水量",
|
|
data: yaxisData1,
|
|
type: "line",
|
|
symbol: "circle",
|
|
symbolSize: 3,
|
|
itemStyle: {
|
|
color: "#FF845A",
|
|
shadowColor: "#FF845A",
|
|
shadowBlur: 10,
|
|
borderColor: "#FF845A",
|
|
borderWidth: 3,
|
|
lineStyle: {
|
|
color: "#FF845A",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option)
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize()
|
|
}
|
|
)
|
|
},
|
|
watthourLine() {
|
|
// let myChart = echarts.init(this.$refs.wattHour)
|
|
let myChart = echarts.getInstanceByDom(
|
|
this.$refs.wattHour
|
|
);
|
|
if (myChart == null) {
|
|
myChart = echarts.init(this.$refs.wattHour);
|
|
}
|
|
let xaxisData = this.date;
|
|
let yaxisData1 = [10, 8, 8, 7, 22, 33, 22, 66];
|
|
if (this.operation == true) {
|
|
yaxisData1 = [10, 8, 8, 7, 22, 33, 22, 66, 33, 44, 11, 22, 12, 2, 13, 9, 10, 24,]
|
|
}
|
|
let option = {
|
|
// backgroundColor: "#001829",
|
|
grid: {
|
|
top: "18%",
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
confine: true,
|
|
backgroundColor: "rgba(96, 103, 208, 0.3)",
|
|
borderColor: "#5A94C5",
|
|
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(96, 103, 208, 0.3);",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fff",
|
|
fontFamily: "PangMenZhengDao",
|
|
},
|
|
formatter: function (params) {
|
|
var relVal = params[0].name;
|
|
for (var i = 0; i < params.length; i++) {
|
|
relVal +=
|
|
"<br/>" +
|
|
params[i].marker +
|
|
params[i].seriesName +
|
|
": " +
|
|
params[i].value +
|
|
" kWh";
|
|
}
|
|
return relVal;
|
|
},
|
|
axisPointer: {
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "#5A94C5",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
right: "3%",
|
|
top: "5%",
|
|
itemWidth: 20,
|
|
itemHeight: 4,
|
|
icon: "react",
|
|
itemGap: 17,
|
|
align: "right",
|
|
textStyle: {
|
|
color: "#AEC9FF",
|
|
fontSize: 16,
|
|
fontFamily: "AlibabaPuHuiTi-Medium",
|
|
},
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
interval: 0
|
|
// formatter(val, i) {
|
|
// console.log(val, i);
|
|
// if (i === 0 || i === xaxisData.length - 1 || i === Math.ceil(xaxisData.length / 2)) {
|
|
// return val
|
|
// }
|
|
// return ''
|
|
// }
|
|
},
|
|
data: xaxisData,
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "单位:/kWh",
|
|
nameTextStyle: {
|
|
color: "#AEC9FF",
|
|
fontWeight: 400,
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: "#AEC9FF",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(83, 125, 170, 0.2)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用电量",
|
|
data: yaxisData1,
|
|
type: "line",
|
|
symbol: "circle",
|
|
symbolSize: 3,
|
|
itemStyle: {
|
|
color: "#5A94C5",
|
|
shadowColor: "#5A94C5",
|
|
shadowBlur: 10,
|
|
borderColor: "#5A94C5",
|
|
borderWidth: 3,
|
|
lineStyle: {
|
|
color: "#5A94C5",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option)
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize()
|
|
}
|
|
)
|
|
},
|
|
gasLine() {
|
|
let myChart = echarts.getInstanceByDom(
|
|
this.$refs.gasEchart
|
|
);
|
|
if (myChart == null) {
|
|
myChart = echarts.init(this.$refs.gasEchart);
|
|
}
|
|
let xaxisData = this.date;
|
|
let yaxisData1 = [4, 7, 8, 16, 15, 24, 19, 15];
|
|
if (this.operation == true) {
|
|
yaxisData1 = [66, 33, 44, 11, 22, 4, 7, 8, 16, 15, 24, 19, 15, 11, 22, 12, 2, 13]
|
|
}
|
|
let option = {
|
|
|
|
// backgroundColor: "#001829",
|
|
grid: {
|
|
top: "18%",
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
confine: true,
|
|
backgroundColor: "rgba(103, 164, 155, 0.3)",
|
|
borderColor: "#45A99B",
|
|
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(103, 164, 155, 0.3);",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fff",
|
|
fontFamily: "PangMenZhengDao",
|
|
},
|
|
formatter: function (params) {
|
|
var relVal = params[0].name;
|
|
for (var i = 0; i < params.length; i++) {
|
|
relVal +=
|
|
"<br/>" +
|
|
params[i].marker +
|
|
params[i].seriesName +
|
|
": " +
|
|
params[i].value +
|
|
" m³";
|
|
}
|
|
return relVal;
|
|
},
|
|
axisPointer: {
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "#45A99B",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
right: "3%",
|
|
top: "5%",
|
|
itemWidth: 20,
|
|
itemHeight: 4,
|
|
icon: "react",
|
|
itemGap: 17,
|
|
align: "right",
|
|
textStyle: {
|
|
color: "#AEC9FF",
|
|
fontSize: 16,
|
|
fontFamily: "AlibabaPuHuiTi-Medium",
|
|
},
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
interval: 0,
|
|
// formatter(val, i) {
|
|
// console.log(val, i);
|
|
// if (i === 0 || i === xaxisData.length - 1 || i === Math.ceil(xaxisData.length / 2)) {
|
|
// return val
|
|
// }
|
|
// return ''
|
|
// }
|
|
},
|
|
|
|
data: xaxisData,
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "单位:/m³",
|
|
nameTextStyle: {
|
|
color: "#AEC9FF",
|
|
fontWeight: 400,
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: "#AEC9FF",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(83, 125, 170, 0.2)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用气量",
|
|
data: yaxisData1,
|
|
type: "line",
|
|
symbol: "circle",
|
|
symbolSize: 3,
|
|
itemStyle: {
|
|
color: "#45A99B",
|
|
shadowColor: "#45A99B",
|
|
shadowBlur: 10,
|
|
borderColor: "#45A99B",
|
|
borderWidth: 3,
|
|
lineStyle: {
|
|
color: "#45A99B",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
|
|
}
|
|
myChart.setOption(option)
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize()
|
|
}
|
|
)
|
|
},
|
|
energyLine() {
|
|
let myChart = echarts.getInstanceByDom(
|
|
this.$refs.energyEchart
|
|
);
|
|
if (myChart == null) {
|
|
myChart = echarts.init(this.$refs.energyEchart);
|
|
}
|
|
if (myChart == null) {
|
|
myChart = echarts.init(this.$refs.energyEchart)
|
|
}
|
|
let xaxisData = this.date;
|
|
let yaxisData1 = [18, 19, 10, 13, 11, 3, 9, 24];
|
|
if (this.operation == true) {
|
|
yaxisData1 = [66, 18, 19, 10, 13, 11, 3, 9, 24, 15, 24, 19, 15, 16, 15, 24, 19, 15]
|
|
}
|
|
let option = {
|
|
|
|
// backgroundColor: "#001829",
|
|
grid: {
|
|
top: "18%",
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
confine: true,
|
|
backgroundColor: "rgba(107, 156, 176, 0.3)",
|
|
borderColor: "#4391AB",
|
|
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(107, 156, 176, 0.3);",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fff",
|
|
fontFamily: "PangMenZhengDao",
|
|
},
|
|
formatter: function (params) {
|
|
var relVal = params[0].name;
|
|
for (var i = 0; i < params.length; i++) {
|
|
relVal +=
|
|
"<br/>" +
|
|
params[i].marker +
|
|
params[i].seriesName +
|
|
": " +
|
|
params[i].value +
|
|
" KJ";
|
|
}
|
|
return relVal;
|
|
},
|
|
axisPointer: {
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "#4391AB",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
right: "3%",
|
|
top: "5%",
|
|
itemWidth: 20,
|
|
itemHeight: 4,
|
|
icon: "react",
|
|
itemGap: 17,
|
|
align: "right",
|
|
textStyle: {
|
|
color: "#AEC9FF",
|
|
fontSize: 16,
|
|
fontFamily: "AlibabaPuHuiTi-Medium",
|
|
},
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
interval: 0,
|
|
// formatter(val, i) {
|
|
// console.log(val, i);
|
|
// if (i === 0 || i === xaxisData.length - 1 || i === Math.ceil(xaxisData.length / 2)) {
|
|
// return val
|
|
// }
|
|
// return ''
|
|
// }
|
|
},
|
|
data: xaxisData,
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "单位:/KJ",
|
|
nameTextStyle: {
|
|
color: "#AEC9FF",
|
|
fontWeight: 400,
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: "#AEC9FF",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "rect"],
|
|
symbolSize: [6, 12],
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#537DAA",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(83, 125, 170, 0.2)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用能量",
|
|
data: yaxisData1,
|
|
type: "line",
|
|
symbol: "circle",
|
|
symbolSize: 3,
|
|
itemStyle: {
|
|
color: "#05B3ED",
|
|
shadowColor: "#05B3ED",
|
|
shadowBlur: 10,
|
|
borderColor: "#05B3ED",
|
|
borderWidth: 3,
|
|
lineStyle: {
|
|
color: "#05B3ED",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
|
|
}
|
|
myChart.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize()
|
|
}
|
|
)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.waterLine()
|
|
this.watthourLine()
|
|
this.gasLine()
|
|
this.energyLine()
|
|
const resizeOb = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
echarts.getInstanceByDom(entry.target).resize();
|
|
}
|
|
});
|
|
resizeOb.observe(this.$refs.waterEchart);
|
|
resizeOb.observe(this.$refs.wattHour);
|
|
resizeOb.observe(this.$refs.gasEchart);
|
|
resizeOb.observe(this.$refs.energyEchart);
|
|
},
|
|
watch: {
|
|
operation: {
|
|
deep: true,
|
|
handler: function (newVal, oldVal) {
|
|
console.log(newVal, oldVal);
|
|
if (this.operation == true) {
|
|
this.date = ['2022/10/23', '2022/10/24', '2022/10/25', '2022/10/26', '2022/10/27', '2022/10/28', '2022/10/29', '2022/10/30', '2022/10/31', '2022/11/1', '2022/11/2', '2022/11/3', '2022/11/4', '2022/11/5', '2022/11/6', '2022/11/7', '2022/11/8', '2022/11/9']
|
|
this.waterLine()
|
|
this.watthourLine()
|
|
this.gasLine()
|
|
this.energyLine()
|
|
} else {
|
|
this.date = ['2022/10/23', '2022/10/24', '2022/10/25', '2022/10/26', '2022/10/27', '2022/10/28', '2022/10/29', '2022/10/30']
|
|
this.waterLine()
|
|
this.watthourLine()
|
|
this.gasLine()
|
|
this.energyLine()
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |