225 lines
4.8 KiB
Vue
225 lines
4.8 KiB
Vue
<!--生产趋势-->
|
||
<template>
|
||
<div id="charts" ref="charts">
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import {EleResize} from '@/utils/esresize';
|
||
|
||
const lodash = require('lodash')
|
||
export default {
|
||
name: 'PeakProduceTrendChart',
|
||
props: {
|
||
dataSource: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
color: {
|
||
type: Array,
|
||
default: () => [
|
||
'#00F6FF',
|
||
'#007CFF',
|
||
'#FF8D1A'
|
||
]
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
watch: {
|
||
dataSource: {
|
||
deep: true,
|
||
immediate: true,
|
||
handler(value) {
|
||
if (value.length) {
|
||
this.$nextTick(() => {
|
||
this.init()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.init()
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
init() {
|
||
let myCharts = echarts.init(this.$refs.charts)
|
||
let barCharts = this.$refs.charts
|
||
// 复制代码
|
||
|
||
let color = this.color;
|
||
|
||
let xAxisData = this.dataSource.map(item => item.name);
|
||
let yAxisData1 = this.dataSource.map(item => item.value1);
|
||
let yAxisData2 = this.dataSource.map(item => item.value2);
|
||
let yAxisData3 = this.dataSource.map(item => item.value3)
|
||
|
||
let option = {
|
||
color: color,
|
||
legend: {
|
||
top: 0,
|
||
right: 0,
|
||
itemWidth: 11,
|
||
itemHeight: 11,
|
||
icon: 'circle',
|
||
textStyle: {
|
||
color: '#B8D3F1',
|
||
fontSize: 12,
|
||
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
top: 50,
|
||
bottom: 10,
|
||
left: 20,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLabel: {
|
||
fontSize: 12,
|
||
color: '#B8D3F1'
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(176,215,255,0.40)',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
data: xAxisData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
position: 'left',
|
||
splitNumber: 5,
|
||
name: '单位：t',
|
||
axisLabel: {
|
||
fontSize: 12,
|
||
color: '#B8D3F1'
|
||
},
|
||
nameTextStyle: {
|
||
color: '#B8D3F1',
|
||
fontSize: 12,
|
||
lineHeight: 10,
|
||
},
|
||
// 分割线
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(176,215,255,0.40)',
|
||
type: 'dashed'
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
position: 'right',
|
||
name: '单位：m³',
|
||
splitNumber: 5,
|
||
axisLabel: {
|
||
fontSize: 12,
|
||
color: '#B8D3F1'
|
||
},
|
||
nameTextStyle: {
|
||
color: '#B8D3F1',
|
||
fontSize: 12,
|
||
lineHeight: 10,
|
||
},
|
||
// 分割线
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(176,215,255,0.40)',
|
||
type: 'dashed'
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '石油',
|
||
type: 'line',
|
||
smooth: false,
|
||
zlevel: 3,
|
||
symbol: 'none', //数据交叉点样式
|
||
data: yAxisData1,
|
||
yAxisIndex: 0, // 通过这个判断左右
|
||
lineStyle: {
|
||
width: 3,
|
||
}
|
||
},
|
||
{
|
||
name: '氧气',
|
||
type: 'line',
|
||
smooth: false,
|
||
zlevel: 3,
|
||
symbol: 'none', //数据交叉点样式 (实心点)
|
||
data: yAxisData2,
|
||
yAxisIndex: 1, // 通过这个判断左右
|
||
lineStyle: {
|
||
width: 3,
|
||
}
|
||
},
|
||
{
|
||
name: '氮气',
|
||
type: 'line',
|
||
smooth: false,
|
||
zlevel: 3,
|
||
symbol: 'none', //数据交叉点样式 (实心点)
|
||
data: yAxisData3,
|
||
yAxisIndex: 1, // 通过这个判断左右
|
||
lineStyle: {
|
||
width: 3,
|
||
}
|
||
},
|
||
],
|
||
};
|
||
|
||
|
||
myCharts.setOption(option)
|
||
let listener = function () {
|
||
myCharts.resize()
|
||
}
|
||
EleResize.on(barCharts, listener)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#charts {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
</style>
|