newPeter7
2 years ago
6 changed files with 1106 additions and 121 deletions
@ -0,0 +1,211 @@ |
|||
<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('/defocused/getSecDefocusedLine', { params: { |
|||
patientId: this.patientId |
|||
}}).then(res => { |
|||
this.loading = false |
|||
console.log(res) |
|||
this.chartData = res.data.data |
|||
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.checkDate).format('l')) |
|||
this.typeList.OD.push([item.checkDate, item.iolOd]) |
|||
this.legendData[0] = 'OD' |
|||
this.typeList.OS.push([item.checkDate, item.iolOs]) |
|||
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> |
|||
@ -0,0 +1,407 @@ |
|||
<template> |
|||
<div class="reviewContain"> |
|||
<div class="reviewLeft"> |
|||
<div class="content-top"> |
|||
<div v-for="(item, index) in formList" :key="index" class="formBox" :class="[index === curIndex ? 'active' : '']" @click="handleForm(index, item)"> |
|||
<div style="display: flex;padding: 2px 0"> |
|||
<p :class="[index === curIndex ? 'activeFont' : 'curFont']">{{ item.checkDate }}</p> |
|||
<i v-if="index === curIndex" style="margin-top: 5px;color: rgb(199,5,5);margin-left: 12px" class="el-icon-delete" @click="deleteForm(item.id)" /> |
|||
</div> |
|||
</div> |
|||
<img v-if="!formList.length" src="@/assets/img/nodata.png" alt="" class="nodata"> |
|||
</div> |
|||
<div class="content-bottom"> |
|||
<div class="commonForm-text"> |
|||
<span>常用表单</span> |
|||
<span class="line" /> |
|||
</div> |
|||
<div class="record"> |
|||
<p>离焦眼镜复查单</p> |
|||
<img :src="require('@/assets/img/add.png')" alt="" @click="addRecord()"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="reviewRight"> |
|||
<div v-if="formList.length"> |
|||
<div style="display: flex;justify-content: flex-end;margin-bottom: 16px"> |
|||
<el-button type="primary" size="small" @click="saveSecondForm()">保存</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
:span-method="objectSecondMethod" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column |
|||
label="复诊记录" |
|||
width="220" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
日期： |
|||
<el-date-picker |
|||
v-model="secondForm.checkDate" |
|||
style="width: 140px" |
|||
value-format="yyyy-MM-dd" |
|||
type="date" |
|||
placeholder="选择日期" |
|||
/> |
|||
<!-- <el-input v-model="secondForm.checkDate" placeholder="" style="width: 100px" />--> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
width="100" |
|||
align="center" |
|||
label="眼别" |
|||
prop="name" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
label="球镜" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.ds === '右眼'" v-model="secondForm.dsOd" placeholder="" /> |
|||
<el-input v-if="scope.row.ds === '左眼'" v-model="secondForm.dsOs" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="柱镜" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.dc === '右眼'" v-model="secondForm.dcOd" placeholder="" /> |
|||
<el-input v-if="scope.row.dc === '左眼'" v-model="secondForm.dcOs" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="轴向" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.a === '右眼'" v-model="secondForm.aod" placeholder="" /> |
|||
<el-input v-if="scope.row.a === '左眼'" v-model="secondForm.aos" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="矫正视力" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.va === '右眼'" v-model="secondForm.vaOd" placeholder="" /> |
|||
<el-input v-if="scope.row.va === '左眼'" v-model="secondForm.vaOs" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="戴镜视力" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.vag === '右眼'" v-model="secondForm.vagOd" placeholder="" /> |
|||
<el-input v-if="scope.row.vag === '左眼'" v-model="secondForm.vagOs" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="眼轴" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.iol === '右眼'" v-model="secondForm.iolOd" placeholder="" /> |
|||
<el-input v-if="scope.row.iol === '左眼'" v-model="secondForm.iolOs" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="联合光度" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.lhgd === '右眼'" v-model="secondForm.lhgdOd" placeholder="" /> |
|||
<el-input v-if="scope.row.lhgd === '左眼'" v-model="secondForm.lhgdOs" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="下次复诊时间" |
|||
align="center" |
|||
width="150" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-date-picker |
|||
v-model="secondForm.nextCheckDate" |
|||
style="width: 140px" |
|||
value-format="yyyy-MM-dd" |
|||
type="date" |
|||
placeholder="选择日期" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="备注" |
|||
width="130" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="secondForm.remark" type="textarea" :rows="3" placeholder="" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
patientId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ |
|||
checkDate: '', |
|||
nextCheckDate: '', |
|||
name: '右眼', |
|||
ds: '右眼', |
|||
dc: '右眼', |
|||
iol: '右眼', |
|||
lhgd: '右眼', |
|||
vag: '右眼', |
|||
va: '右眼', |
|||
a: '右眼', |
|||
remark: '' |
|||
}, |
|||
{ |
|||
checkDate: '', |
|||
nextCheckDate: '', |
|||
name: '左眼', |
|||
ds: '左眼', |
|||
dc: '左眼', |
|||
iol: '左眼', |
|||
lhgd: '左眼', |
|||
vag: '左眼', |
|||
va: '左眼', |
|||
a: '左眼', |
|||
remark: '' |
|||
} |
|||
], |
|||
secondForm: { |
|||
patientId: '', |
|||
checkDate: '', |
|||
nextCheckDate: '', |
|||
dcOd: '', |
|||
dcOs: '', |
|||
dsOd: '', |
|||
dsOs: '', |
|||
iolOd: '', |
|||
iolOs: '', |
|||
lhgdOd: '', |
|||
lhgdOs: '', |
|||
vagOd: '', |
|||
vagOs: '', |
|||
remark: '', |
|||
vaOd: '', |
|||
vaOs: '', |
|||
aod: '', |
|||
aos: '' |
|||
}, |
|||
id: '', |
|||
curIndex: 0, |
|||
formList: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getFormList() |
|||
}, |
|||
methods: { |
|||
objectSecondMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 0 || columnIndex === 9 || columnIndex === 10) { |
|||
if (rowIndex % 2 === 0) { |
|||
return { |
|||
rowspan: 2, |
|||
colspan: 1 |
|||
} |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
saveSecondForm() { |
|||
this.secondForm.patientId = this.patientId |
|||
this.$http.post('/defocused/saveOrUpdateSecondDefocused', this.secondForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.getSecondForm() |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
async getSecondForm() { |
|||
this.$http.get('/defocused/getSecondDefocused', { |
|||
params: { |
|||
id: this.id |
|||
} |
|||
}).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.secondForm = res.data |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
async getFormList() { |
|||
const { data: res } = await this.$http.get('/defocused/getAllSecDefocusedByPid', { |
|||
params: { |
|||
patientId: this.patientId |
|||
} |
|||
}) |
|||
if (res.code === 0) { |
|||
this.formList = res.data || [] |
|||
if (this.formList.length) { |
|||
this.id = this.formList[0].id |
|||
this.secondForm = this.formList[0] |
|||
} |
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
}, |
|||
handleForm(index, item) { |
|||
this.curIndex = index |
|||
this.id = item.id |
|||
this.secondForm = item |
|||
}, |
|||
async addRecord() { |
|||
const params = { |
|||
patientId: this.patientId |
|||
} |
|||
const { data: res } = await this.$http.post('/defocused/saveOrUpdateSecondDefocused', params) |
|||
if (res.code === 0) { |
|||
await this.getFormList() |
|||
this.$message.success('新增成功') |
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
}, |
|||
deleteForm(id) { |
|||
const params = { |
|||
id: id |
|||
} |
|||
this.$confirmFun('你确定要删除吗？').then(async() => { |
|||
const { data: res } = await this.$http.post('/defocused/delSecDefocusedById', params) |
|||
if (res.code === 0) { |
|||
this.$message.success('删除成功') |
|||
await this.getFormList() |
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.reviewContain { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
.reviewLeft{ |
|||
width: 180px; |
|||
height: 100%; |
|||
margin-right: 16px; |
|||
|
|||
.content-top, .content-bottom{ |
|||
height: 50%; |
|||
overflow-y: auto; |
|||
} |
|||
.content-bottom { |
|||
.commonForm-text { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-weight: 700; |
|||
} |
|||
.line { |
|||
border-bottom: 1px solid #e5e6eb; |
|||
flex: 1; |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
.record{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-top: 12px; |
|||
cursor: pointer; |
|||
p { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
letter-spacing: 1px; |
|||
} |
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin-top: 3px; |
|||
} |
|||
} |
|||
} |
|||
.formBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
cursor: pointer; |
|||
padding: 2px 8px; |
|||
border-radius: 2px; |
|||
margin-top: 12px; |
|||
} |
|||
.active { |
|||
color: white; |
|||
background-color: #1C76FD; |
|||
} |
|||
.curFont { |
|||
color: #A6A4A4; |
|||
} |
|||
.activeFont { |
|||
color: #D9D9D9; |
|||
} |
|||
.nodata { |
|||
width: 200px; |
|||
margin-top: 50px; |
|||
} |
|||
} |
|||
.reviewRight{ |
|||
flex: 1; |
|||
//background-color: #ececf1; |
|||
} |
|||
.review-head { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-bottom: 16px; |
|||
} |
|||
.review-content { |
|||
width: 100%; |
|||
height: calc( 100vh - 50px - 32px - 42px - 48px - 15px); |
|||
padding: 16px; |
|||
background: #ffffff; |
|||
overflow-x: auto; |
|||
} |
|||
.vision{ |
|||
display: inline-block; |
|||
width: 24px; |
|||
height: 24px; |
|||
line-height: 24px; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
color: #1E79FF; |
|||
font-weight: 600; |
|||
margin-right: 8px; |
|||
background-color: #EBF6FF; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<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: 'sunAxis', |
|||
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('/defocused/getSecDefocusedLine', { params: { |
|||
patientId: this.patientId |
|||
}}).then(res => { |
|||
this.loading = false |
|||
console.log(res) |
|||
this.chartData = res.data.data |
|||
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.checkDate).format('l')) |
|||
this.typeList.OD.push([item.checkDate, item.lhgdOd]) |
|||
this.legendData[0] = 'OD' |
|||
this.typeList.OS.push([item.checkDate, item.lhgdOs]) |
|||
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