You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
715 lines
15 KiB
715 lines
15 KiB
<template> |
|
<div id="echarts"></div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
|
|
} |
|
}, |
|
methods: { |
|
echartsFun(val1, val2) { |
|
let data1 = [{ |
|
name: '1#', |
|
type: 'bar', |
|
// stack: '总量', |
|
barMaxWidth: 35, |
|
barGap: '10%', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 0, 0, 1.0)', |
|
}, |
|
}, |
|
data: val2.firstBuilding, |
|
}, |
|
|
|
{ |
|
name: '2#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 85, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.secondBuilding, |
|
}, |
|
{ |
|
name: '3#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 255, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.thirdBuilding, |
|
}, |
|
{ |
|
name: '4#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(85, 255, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.forthBuilding, |
|
}, |
|
{ |
|
name: '5#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(0,191,183,1)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.fivthBuilding, |
|
}, |
|
{ |
|
name: '6#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(0, 85, 255, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.sixthBuilding, |
|
}, |
|
{ |
|
name: '总数', |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(170, 0, 255, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.sumBuilding, |
|
}, |
|
]; |
|
let data2 = [{ |
|
name: '南楼', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 0, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.sourthBuilding, |
|
}, |
|
{ |
|
name: '北楼', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 85, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.northBuilding, |
|
}, |
|
{ |
|
name: '塔楼', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(85, 255, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.towerBuilding, |
|
}, |
|
{ |
|
name: '总数', |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(170, 0, 255, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val2.sumBuilding, |
|
}, |
|
]; |
|
// 基于准备好的dom，初始化echarts实例 |
|
let myChart = this.$echarts.init(document.getElementById('echarts')) |
|
// 绘制图表 |
|
myChart.setOption({ |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
// type: 'shadow', |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
}, |
|
}, |
|
grid: { |
|
borderWidth: 0, |
|
top: '18%', |
|
bottom: '15%', |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
containLabel: true |
|
}, |
|
legend: { |
|
x: '30%', |
|
top: '0%', |
|
textStyle: { |
|
color: '#07e6ed', |
|
fontSize: 12, |
|
}, |
|
itemWidth: 10, |
|
itemHeight: 10, |
|
data: val1 == 1 ? ['1#', '2#', '3#', '4#', '5#', '6#', '总数'] : ['南楼', '北楼', '塔楼', '总数'], |
|
}, |
|
|
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
lineStyle: { |
|
color: 'rgba(255, 255, 255, 0.1)', |
|
}, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitArea: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: '#fff', |
|
fontSize: 12, |
|
margin: 5, |
|
// interval: 0, |
|
}, |
|
data: val2.time, |
|
}, ], |
|
yAxis: [{ |
|
name: '总电量：' + val2.sumBuildingSum + 'kw·h', |
|
nameTextStyle: { |
|
color: '#1ff9ee', |
|
fontSize: 13, |
|
padding: [0, 0, 0, 10], |
|
}, |
|
type: 'value', |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'rgba(255, 255, 255, 0.1)', |
|
}, |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: '#fff', |
|
fontSize: 12, |
|
}, |
|
splitArea: { |
|
show: false, |
|
}, |
|
}, ], |
|
// "dataZoom": [{ |
|
// "show": true, |
|
// "height": 12, |
|
// "xAxisIndex": [ |
|
// 0 |
|
// ], |
|
// 'bottom': '5%', |
|
// "start": 30, |
|
// "end": 70, |
|
// handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z', |
|
// handleSize: '100%', |
|
// handleStyle: { |
|
// color: "#d3dee5", |
|
|
|
// }, |
|
// textStyle: { |
|
// color: "#fff" |
|
// }, |
|
// borderColor: "#90979c" |
|
// }, { |
|
// "type": "inside", |
|
// "show": true, |
|
// "height": 5, |
|
// "start": 1, |
|
// "end": 35 |
|
// }], |
|
series: val1 == 1 ? data1 : data2, |
|
}, true); |
|
}, |
|
echartsFun2(val1, val2) { |
|
let datas = []; |
|
if (val1 == 1) { |
|
datas = [{ |
|
name: val2[0].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#FE4A7A', |
|
lineStyle: { |
|
color: '#ff0000' |
|
} |
|
} |
|
}, |
|
data: val2[0].yaxis, |
|
}, |
|
{ |
|
name: val2[1].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#E9AA36', |
|
lineStyle: { |
|
color: '#ff5500' |
|
} |
|
} |
|
}, |
|
data: val2[1].yaxis, |
|
}, |
|
{ |
|
name: val2[2].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#0DFFC7', |
|
lineStyle: { |
|
color: '#ffff00' |
|
} |
|
} |
|
}, |
|
data: val2[2].yaxis, |
|
}, |
|
{ |
|
name: val2[3].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#0DFFC7', |
|
lineStyle: { |
|
color: '#00ff00' |
|
} |
|
} |
|
}, |
|
data: val2[3].yaxis, |
|
}, |
|
]; |
|
} else { |
|
datas = [{ |
|
name: val2[0].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#FE4A7A', |
|
lineStyle: { |
|
color: '#FE4A7A' |
|
} |
|
} |
|
}, |
|
data: val2[0].yaxis, |
|
}, |
|
{ |
|
name: val2[1].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#E9AA36', |
|
lineStyle: { |
|
color: '#E9AA36' |
|
} |
|
} |
|
}, |
|
data: val2[1].yaxis, |
|
}, |
|
{ |
|
name: val2[2].name, |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
borderColor: '#0DFFC7', |
|
lineStyle: { |
|
color: '#0DFFC7' |
|
} |
|
} |
|
}, |
|
data: val2[2].yaxis, |
|
}, |
|
]; |
|
} |
|
// 基于准备好的dom，初始化echarts实例 |
|
let myChart = this.$echarts.init(document.getElementById('echarts')) |
|
// 绘制图表 |
|
myChart.setOption({ |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
// type: 'shadow', |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
}, |
|
}, |
|
grid: { |
|
borderWidth: 0, |
|
top: '18%', |
|
bottom: '15%', |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
containLabel: true |
|
}, |
|
legend: { |
|
x: '25%', |
|
top: '0%', |
|
textStyle: { |
|
color: '#07e6ed', |
|
fontSize: 12, |
|
}, |
|
// itemWidth: 10, |
|
// itemHeight: 10, |
|
data: val1 == 1 ? [val2[0].name, val2[1].name, val2[2].name, val2[3] |
|
.name |
|
] : [val2[0].name, val2[1].name, val2[2].name], |
|
}, |
|
|
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
lineStyle: { |
|
color: 'rgba(255, 255, 255, 0.1)', |
|
}, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitArea: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: '#fff', |
|
fontSize: 12, |
|
margin: 5, |
|
// interval: 0, |
|
}, |
|
data: val2[0].xaxis, |
|
}, ], |
|
yAxis: [{ |
|
name: '单位（m³）', |
|
nameTextStyle: { |
|
color: '#1ff9ee', |
|
fontSize: 13, |
|
padding: [0, 0, 0, 10], |
|
}, |
|
type: 'value', |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'rgba(255, 255, 255, 0.1)', |
|
}, |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: '#fff', |
|
fontSize: 12, |
|
}, |
|
splitArea: { |
|
show: false, |
|
}, |
|
}, ], |
|
// "dataZoom": [{ |
|
// "show": true, |
|
// "height": 15, |
|
// "xAxisIndex": [ |
|
// 0 |
|
// ], |
|
// 'bottom': '5%', |
|
// "start": 30, |
|
// "end": 70, |
|
// handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', |
|
// handleSize: '110%', |
|
// handleStyle: { |
|
// color: "#d3dee5", |
|
|
|
// }, |
|
// textStyle: { |
|
// color: "#fff" |
|
// }, |
|
// borderColor: "#90979c" |
|
// }, { |
|
// "type": "inside", |
|
// "show": true, |
|
// "height": 1, |
|
// "start": 1, |
|
// "end": 35 |
|
// }], |
|
series: datas, |
|
}, true); |
|
}, |
|
echartsFun3(val1) { |
|
// 基于准备好的dom，初始化echarts实例 |
|
console.log(val1) |
|
let myChart = this.$echarts.init(document.getElementById('echarts')) |
|
// 绘制图表 |
|
myChart.setOption({ |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
// type: 'shadow', |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
}, |
|
}, |
|
grid: { |
|
borderWidth: 0, |
|
top: '18%', |
|
bottom: '15%', |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
containLabel: true |
|
}, |
|
legend: { |
|
x: '30%', |
|
top: '0%', |
|
textStyle: { |
|
color: '#07e6ed', |
|
fontSize: 12, |
|
}, |
|
itemWidth: 10, |
|
itemHeight: 10, |
|
data: ['总量', '1#', '2#', '3#', '4#', '5#', '6#', '制冷机房'], |
|
}, |
|
|
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
lineStyle: { |
|
color: 'rgba(255, 255, 255, 0.1)', |
|
}, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitArea: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: '#fff', |
|
fontSize: 12, |
|
margin: 5, |
|
// "interval": 0, |
|
}, |
|
data: val1.time, |
|
}, ], |
|
yAxis: [{ |
|
name: '单位（KW h）', |
|
nameTextStyle: { |
|
color: '#1ff9ee', |
|
fontSize: 13, |
|
padding: [0, 0, 0, 10], |
|
}, |
|
type: 'value', |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'rgba(255, 255, 255, 0.1)', |
|
}, |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: '#fff', |
|
fontSize: 12, |
|
}, |
|
splitArea: { |
|
show: false, |
|
}, |
|
}, ], |
|
// "dataZoom": [{ |
|
// "show": true, |
|
// "height": 12, |
|
// "xAxisIndex": [ |
|
// 0 |
|
// ], |
|
// 'bottom': '5%', |
|
// "start": 30, |
|
// "end": 70, |
|
// handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z', |
|
// handleSize: '100%', |
|
// handleStyle: { |
|
// color: "#d3dee5", |
|
|
|
// }, |
|
// textStyle: { |
|
// color: "#fff" |
|
// }, |
|
// borderColor: "#90979c" |
|
// }, { |
|
// "type": "inside", |
|
// "show": true, |
|
// "height": 5, |
|
// "start": 1, |
|
// "end": 35 |
|
// }], |
|
series: [{ |
|
name: '总数', |
|
type: 'line', |
|
symbolSize: 5, |
|
symbol: 'circle', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(170, 0, 255, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val1.sumBuilding, |
|
}, { |
|
name: '1#', |
|
type: 'bar', |
|
// stack: '总量', |
|
barMaxWidth: 35, |
|
barGap: '10%', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 0, 0, 1.0)', |
|
}, |
|
}, |
|
data: val1.firstBuilding, |
|
}, |
|
|
|
{ |
|
name: '2#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 85, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val1.secondBuilding, |
|
}, |
|
{ |
|
name: '3#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(255, 255, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val1.thirdBuilding, |
|
}, |
|
{ |
|
name: '4#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(85, 255, 0, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val1.forthBuilding, |
|
}, |
|
{ |
|
name: '5#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(0,191,183,1)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val1.fivthBuilding, |
|
}, |
|
{ |
|
name: '6#', |
|
type: 'bar', |
|
// stack: '总量', |
|
itemStyle: { |
|
normal: { |
|
color: 'rgba(0, 85, 255, 1.0)', |
|
barBorderRadius: 0, |
|
}, |
|
}, |
|
data: val1.sixthBuilding, |
|
}, |
|
], |
|
}, true); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
#echarts { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
</style>
|
|
|