bianyaqi
2 years ago
10 changed files with 258 additions and 56 deletions
@ -0,0 +1,212 @@ |
|||||
|
<template> |
||||
|
<div v-loading="loading"> |
||||
|
<div :id="idName" ref="yanyaRef" :style="{ height: height, width: width }" /> |
||||
|
</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 => { |
||||
|
item.osIol = item.osIol.replace('mm', '') |
||||
|
item.odIol = item.odIol.replace('mm', '') |
||||
|
this.date.push(moment(item.examTime).format('l')) |
||||
|
this.typeList.OD.push([item.examTime, item.odIol]) |
||||
|
this.legendData[0] = 'OD' |
||||
|
this.typeList.OS.push([item.examTime, item.osIol]) |
||||
|
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', |
||||
|
// color: 'rgba(24, 24, 24, 0.1)', |
||||
|
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, // 分割刻度 |
||||
|
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