bianyaqi
2 years ago
9 changed files with 302 additions and 15 deletions
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<div v-loading="loading"> |
|||
<div v-if="chartData.length" :id="idName" ref="yanyaRef" :style="{ height: height, width: width }" /> |
|||
<div |
|||
v-else |
|||
style="height: 100%;background: #fff;display: flex;align-items: center;justify-content: center" |
|||
> |
|||
<img src="@/assets/img/nodata.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import moment from 'moment/moment' |
|||
|
|||
export default { |
|||
name: 'EyeAxis', |
|||
props: { |
|||
idName: { type: String, default: 'chart' }, |
|||
width: { type: String, default: '100%' }, |
|||
height: { type: String, default: '200px' }, |
|||
desc: { type: String, default: '' }, |
|||
patientId: { |
|||
type: String |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
date: [], |
|||
typeList: { |
|||
OD: [], |
|||
OS: [], |
|||
typeNull: [] |
|||
}, |
|||
chartData: [], |
|||
legendData: [], |
|||
seriesData: [], |
|||
disabled: false |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.queryAxisData() |
|||
}, |
|||
methods: { |
|||
queryAxisData() { |
|||
this.loading = true |
|||
this.$http.get('hospital/notice/getAllSecDiagInfoByPid', { params: { |
|||
patientId: this.patientId |
|||
}}).then(res => { |
|||
this.loading = false |
|||
this.chartData = res.data.data.slAndYzList |
|||
this.initFun() |
|||
}) |
|||
}, |
|||
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.odVan]) |
|||
this.legendData[0] = 'OD' |
|||
this.typeList.OS.push([item.examTime, item.osVan]) |
|||
this.legendData[1] = 'OS' |
|||
}) |
|||
} else { |
|||
this.disabled = true |
|||
} |
|||
this.$nextTick(() => { |
|||
this.visionFun() |
|||
}) |
|||
}, |
|||
visionFun() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
const yanya = this.$echarts.init(document.getElementById(this.idName)) |
|||
var 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', |
|||
borderRadius: 10 |
|||
}, |
|||
smooth: true, |
|||
itemStyle: { |
|||
color: colors[index] |
|||
}, |
|||
symbolSize: 10 |
|||
}) |
|||
} |
|||
}) |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
yanya.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, // 分割刻度 |
|||
interval: 0.1, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#000000' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgba(24, 24, 24, 0.1)' |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
...this.seriesData |
|||
] |
|||
}) |
|||
// 随窗口变化 |
|||
window.addEventListener('resize', () => { yanya.resize() }) |
|||
// 随外层div的大小变化自适应 |
|||
this.$erd.listenTo(this.$refs.yanyaRef, () => { |
|||
this.$nextTick(() => { |
|||
yanya.resize() |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue