162 lines
3.5 KiB
Vue
162 lines
3.5 KiB
Vue
<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: 'FadianLineChart',
|
||
mixins: [resize],
|
||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||
inject: ['resizeStatus'],
|
||
/** End Fn.1 */
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default: 'default-id'
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: 'default-title'
|
||
},
|
||
xData: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
seriesData: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
option: {
|
||
legend: {
|
||
itemGap: 8,
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
right: '5%',
|
||
textStyle: {
|
||
color: '#fff9'
|
||
}
|
||
},
|
||
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
|
||
grid: {
|
||
top: '30%',
|
||
left: 0,
|
||
right: '5%',
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||
data: Array(12)
|
||
.fill(0)
|
||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 8,
|
||
color: '#fffa'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff3'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '压力/MPa',
|
||
nameTextStyle: {
|
||
fontSize: 10,
|
||
color: '#fff9',
|
||
align: 'right'
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 8,
|
||
color: '#fffa'
|
||
// formatter: '{value} %'
|
||
},
|
||
axisTick: { show: false },
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#fff3'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '天然气',
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: Array(12)
|
||
.fill(0)
|
||
.map(_ => Math.floor(Math.random() * 100))
|
||
},
|
||
{
|
||
name: '氧气',
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: Array(12)
|
||
.fill(0)
|
||
.map(_ => Math.floor(Math.random() * 100))
|
||
},
|
||
{
|
||
name: 'CDA',
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: Array(12)
|
||
.fill(0)
|
||
.map(_ => Math.floor(Math.random() * 100))
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
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>
|