405 lines
9.7 KiB
Vue
405 lines
9.7 KiB
Vue
<template>
|
||
<!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
|
||
{
|
||
name: '产量',
|
||
list: [64, 91, 55, 65, 37, 77]
|
||
},
|
||
{
|
||
name: '能耗',
|
||
list: [32, 65, 65, 54, 37, 77]
|
||
}
|
||
]" /> -->
|
||
<div ref="realtimeLineChart" class="techy-chart" />
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts'
|
||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||
import { Random } from 'mockjs'
|
||
import moment from 'moment'
|
||
|
||
class ChartOption {
|
||
constructor() {
|
||
this.color = ['#1A99FF', '#F0D63C', '#E02094', '#52FFF1']
|
||
|
||
this.legend = {
|
||
top: 28,
|
||
right: 40,
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
textStyle: {
|
||
color: '#fff9',
|
||
fontSize: 10
|
||
}
|
||
}
|
||
|
||
this.grid = {
|
||
top: 80,
|
||
left: 88,
|
||
right: 24,
|
||
bottom: 32
|
||
}
|
||
|
||
this.tooltip = {
|
||
show: true,
|
||
trigger: 'axis',
|
||
textStyle: {
|
||
fontSize: 12
|
||
},
|
||
axisPointer: {
|
||
type: 'line',
|
||
axis: 'x',
|
||
lineStyle: {
|
||
color: '#7BFFFB',
|
||
type: 'dotted'
|
||
}
|
||
},
|
||
padding: 10,
|
||
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||
extraCssText: 'width: calc(100px*var(--beilv)) !important;',
|
||
formatter: params => {
|
||
return `
|
||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||
params[0].axisValue
|
||
}</h2>
|
||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||
this.color[0]
|
||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||
this.color[1]
|
||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||
this.color[2]
|
||
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
|
||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||
this.color[3]
|
||
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
|
||
</div>
|
||
`
|
||
}
|
||
}
|
||
|
||
this.xAxis = {
|
||
type: 'category',
|
||
data: Array(7)
|
||
.fill(1)
|
||
.map((_, idx) => {
|
||
const d = moment()
|
||
const day = idx ? d.subtract(idx, 'd') : d
|
||
return day.format('M-DD')
|
||
})
|
||
.reverse(),
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: '#fff9',
|
||
fontSize: 12
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff3'
|
||
}
|
||
}
|
||
}
|
||
|
||
this.yAxis = [
|
||
{
|
||
name: '能耗 ',
|
||
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
|
||
type: 'value',
|
||
splitNumber: 4,
|
||
onZero: true,
|
||
position: 'left',
|
||
offset: 40,
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#5982B2',
|
||
width: 1
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#fff9',
|
||
fontSize: 10
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#fff1',
|
||
type: 'dotted'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '产量 ',
|
||
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
|
||
type: 'value',
|
||
splitNumber: 4,
|
||
axisTick: { show: false },
|
||
onZero: true,
|
||
position: 'left',
|
||
offset: 0,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#5982B2',
|
||
width: 1
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#fff9',
|
||
fontSize: 10
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#fff1',
|
||
type: 'dotted'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
|
||
this.series = [
|
||
{
|
||
name: 'A能耗',
|
||
type: 'line',
|
||
yAxisIndex: 0,
|
||
// symbol: 'none',
|
||
symbol: 'circle',
|
||
symbolSize: 1,
|
||
showSymbol: false,
|
||
// smooth: true,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: Array(7)
|
||
.fill(0)
|
||
.map(_ => Random.integer(30, 100)),
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#1A99FF66' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'transparent' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'A产量',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
// smooth: true,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: Array(7)
|
||
.fill(0)
|
||
.map(_ => Random.integer(30, 100)),
|
||
// symbol: 'none',
|
||
symbol: 'circle',
|
||
symbolSize: 1,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#F0D63C66' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'transparent' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'B能耗',
|
||
type: 'line',
|
||
yAxisIndex: 0,
|
||
// smooth: true,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: Array(7)
|
||
.fill(0)
|
||
.map(_ => Random.integer(30, 100)),
|
||
// symbol: 'none',
|
||
symbol: 'circle',
|
||
symbolSize: 1,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#E0209466' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'transparent' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'B产量',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
// smooth: true,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: Array(7)
|
||
.fill(0)
|
||
.map(_ => Random.integer(30, 100)),
|
||
// symbol: 'none',
|
||
symbol: 'circle',
|
||
symbolSize: 1,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#52FFF166' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'transparent' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
get option() {
|
||
return this
|
||
}
|
||
|
||
optionFilter(option, calcSize = () => {} /** callback */) {
|
||
let newOption
|
||
if (Array.isArray(option)) {
|
||
newOption = []
|
||
option.forEach(item => {
|
||
newOption.push(this.optionFilter(item, calcSize))
|
||
})
|
||
return newOption
|
||
} else if (typeof option === 'object') {
|
||
newOption = {}
|
||
for (const key in option) {
|
||
if (key === 'colorStops') newOption[key] = option[key]
|
||
else if (
|
||
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||
) {
|
||
newOption[key] = calcSize(option[key])
|
||
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||
}
|
||
return newOption
|
||
} else {
|
||
newOption = calcSize(option)
|
||
return option
|
||
}
|
||
}
|
||
}
|
||
|
||
export default {
|
||
name: 'RealtimeLineChart',
|
||
mixins: [resize],
|
||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||
inject: ['resizeStatus'],
|
||
/** End Fn.1 */
|
||
props: {},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
option: null
|
||
}
|
||
},
|
||
computed: {
|
||
shouldResize() {
|
||
return this.resizeStatus()
|
||
}
|
||
},
|
||
watch: {
|
||
shouldResize(val, oldVal) {
|
||
console.log('fullscreen resize')
|
||
setTimeout(() => {
|
||
this.chart.resize()
|
||
}, 250)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
|
||
this.setChartOption()
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
if (this.chart) this.chart.dispose()
|
||
this.chart = null
|
||
},
|
||
methods: {
|
||
calcSize(num) {
|
||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||
return num * beilv
|
||
},
|
||
setChartOption() {
|
||
const chartOption = new ChartOption()
|
||
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.techy-chart {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.techy-chart >>> div {
|
||
width: 100% !important;
|
||
}
|
||
</style>
|