update 公用工程消耗
This commit is contained in:
223
src/views/3DOverview/components/DianChart.vue
Normal file
223
src/views/3DOverview/components/DianChart.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'DianLineChart',
|
||||
mixins: [resize],
|
||||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||||
inject: ['resizeStatus'],
|
||||
/** End Fn.1 */
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-dian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const colors = ['#5470C6', '#EE6666', '#339888']
|
||||
|
||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
||||
let data = [
|
||||
// 温度走势
|
||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
|
||||
// 电流走势
|
||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
|
||||
// 电压走势
|
||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
|
||||
]
|
||||
let wendu = data[0]
|
||||
let dianliu = data[1]
|
||||
let dianya = data[2]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: colors,
|
||||
legend: {
|
||||
top: 4,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 8
|
||||
},
|
||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
||||
},
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 64,
|
||||
bottom: 28
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '电流/A',
|
||||
nameTextStyle: { align: 'right', fontSize: 8 },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 42,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
// lineStyle: {
|
||||
// color: '#fff3'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '电压/V',
|
||||
nameTextStyle: { align: 'right', fontSize: 8 },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
// lineStyle: {
|
||||
// color: '#fff3'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 },
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ABC三相电压/v',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianliu,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'ABC三相电流/a',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianya,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: '电缆温度',
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: wendu,
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldResize() {
|
||||
return this.resizeStatus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shouldResize(val, oldVal) {
|
||||
setTimeout(() => {
|
||||
this.chart.resize()
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.techy-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.techy-chart >>> div {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
@@ -15,7 +15,7 @@ export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-id'
|
||||
default: 'default-fadian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
|
||||
@@ -98,7 +98,9 @@
|
||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian">
|
||||
<span>电</span>
|
||||
</div>
|
||||
<div class="content-part" />
|
||||
<div class="content-part">
|
||||
<DianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
@@ -121,10 +123,10 @@ import TechyBarChart from './TechyBarChart.vue'
|
||||
import TechyLineChart from './TechyLineChart.vue'
|
||||
import TechyBox from './TechyBox.vue'
|
||||
import FadianChart from './FadianChart.vue'
|
||||
|
||||
import DianChart from './DianChart.vue'
|
||||
export default {
|
||||
name: 'LeftContentPublicConsume',
|
||||
components: { TechyBarChart, TechyBox, FadianChart, TechyLineChart },
|
||||
components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user