3 changed files with 203 additions and 3 deletions
@ -0,0 +1,200 @@ |
|||
<template> |
|||
<div> |
|||
<div :id="idName" ref="yanzhouRef" :style="{ height: height, width: width }" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import moment from 'moment' // 导入模块 |
|||
export default { |
|||
props: { |
|||
idName: { type: String, default: 'chart' }, |
|||
width: { type: String, default: '100%' }, |
|||
height: { type: String, default: '200px' }, |
|||
chartData: { type: Array, default: () => [] }, |
|||
desc: { type: String, default: '' } |
|||
}, |
|||
data() { |
|||
return { |
|||
date: [], |
|||
typeList: { |
|||
OD: [], |
|||
OS: [], |
|||
typeNull: [] |
|||
}, |
|||
legendData: [], |
|||
seriesData: [], |
|||
disabled: false |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
handler(val, olVal) { |
|||
this.initFun() |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initFun() |
|||
}, |
|||
methods: { |
|||
initFun() { |
|||
this.date = [] |
|||
this.typeList = { |
|||
OD: [], |
|||
OS: [], |
|||
typeNull: [] |
|||
} |
|||
this.legendData = [] |
|||
this.seriesData = [] |
|||
if (this.chartData && this.chartData.length > 0) { |
|||
this.disabled = false |
|||
this.chartData.forEach(item => { |
|||
this.date.push(moment(item.examTime).format('l')) |
|||
this.typeList.OD.push([item.examTime, item.odOil.slice(0, item.odOil.length - 3)]) |
|||
this.legendData[0] = 'OD' |
|||
this.typeList.OS.push([item.examTime, item.osOil.slice(0, item.osOil.length - 3)]) |
|||
this.legendData[1] = 'OS' |
|||
}) |
|||
} else { |
|||
this.disabled = true |
|||
} |
|||
this.$nextTick(() => { |
|||
this.visionFun() |
|||
}) |
|||
}, |
|||
visionFun() { |
|||
// 基于准备好的dom,初始化echarts实例 |
|||
const yanzhou = this.$echarts.init(document.getElementById(this.idName)) |
|||
const colors = ['#4462FF', '#0DB760', '#000000'] |
|||
Object.keys(this.typeList).forEach((item, index) => { |
|||
if (this.typeList[item].length > 0) { |
|||
this.seriesData.push({ |
|||
name: item, |
|||
type: 'line', |
|||
// stack: index, |
|||
data: this.typeList[item], |
|||
label: { |
|||
show: true, |
|||
position: item === 'OD' ? [-25, -30] : [10, -5], |
|||
backgroundColor: item === 'OD' ? '#4a6bff' : '#0db760', |
|||
padding: [6, 6], |
|||
color: '#ffffff', |
|||
// color: 'rgba(24, 24, 24, 0.1)', |
|||
borderRadius: 10 |
|||
}, |
|||
smooth: true, |
|||
itemStyle: { |
|||
color: colors[index] |
|||
}, |
|||
symbolSize: 10 |
|||
}) |
|||
} |
|||
}) |
|||
// 基于准备好的dom,初始化echarts实例 |
|||
yanzhou.setOption({ |
|||
title: { |
|||
text: this.desc, |
|||
textStyle: { |
|||
'color': '#000000' |
|||
}, |
|||
left: 10 |
|||
}, |
|||
tooltip: { |
|||
// trigger: 'axis' |
|||
backgroundColor: '#ece6e6', |
|||
textStyle: { |
|||
color: '#000000' // 设置文字颜色 |
|||
}, |
|||
formatter(params) { |
|||
return params.seriesName + '<br/>' + params.data[0] + '   ' + params.data[1] |
|||
} |
|||
|
|||
}, |
|||
legend: { |
|||
data: this.legendData, |
|||
icon: 'pin', |
|||
textStyle: { |
|||
color: '#000000' |
|||
}, |
|||
right: 30 |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', |
|||
disabled: this.disabled, |
|||
start: 0, |
|||
end: 100 |
|||
} |
|||
], |
|||
grid: { |
|||
top: 55, |
|||
left: 50, |
|||
right: 50, |
|||
bottom: 30, |
|||
containLabel: false |
|||
}, |
|||
xAxis: { |
|||
type: 'time', |
|||
boundaryGap: false, |
|||
axisLabel: { |
|||
show: true, |
|||
showMaxLabel: true, |
|||
textStyle: { |
|||
color: '#000000' |
|||
}, |
|||
formatter: function(value, index) { |
|||
const showD = moment(value).format('YYYY/M/D') |
|||
return showD |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgba(24, 24, 24, 0.1)' |
|||
} |
|||
}, |
|||
// 显示网格线 |
|||
splitLine: { |
|||
show: true |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
min: function(value) { // 取最小值向下取整为最小刻度 |
|||
return Math.floor(value.min) |
|||
}, |
|||
max: function(value) { // 取最大值向上取整为最大刻度 |
|||
return Math.ceil(value.max) |
|||
}, |
|||
splitNumber: 1, // 分割刻度 |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#000000' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgba(24, 24, 24, 0.1)' |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
...this.seriesData |
|||
] |
|||
}) |
|||
// 随窗口变化 |
|||
window.addEventListener('resize', () => { yanzhou.resize() }) |
|||
// 随外层div的大小变化自适应 |
|||
this.$erd.listenTo(this.$refs.yanzhouRef, () => { |
|||
this.$nextTick(() => { |
|||
yanzhou.resize() |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style style="scss" scoped> |
|||
</style> |
Loading…
Reference in new issue