<div style="margin-top: 20px; position: relative;">
<div style="font-size: 16px; color: #333; font-weight: 600;">{{ $t('treatmentData.treatment24') }}</div>
<div :id="'event'+item.useDate" style="width: 100%; height: 240px; position: relative; margin-top: 15px;"></div>
<div :id="'event-1'+item.useDate" style="width: 100%;height: 100px; overflow: hidden; margin-top: 0px; margin-left: 2px; background-color: rgba(0,0,0,0) !important; position: absolute; bottom: -10px; left: -10px;"></div>
</div>
处理数据
if (this.echartListCpapDay[y].idName == 'event') {
this.eventData = resData.eventTrend.list[x];
if (this.eventData == null) {
this.monitorData.CA = [];
this.monitorData.FL = [];
this.monitorData.RERA = [];
this.monitorData.Snore = [];
this.monitorData.PB = [];
this.monitorData.OA = [];
this.monitorData.HY = [];
} else {
this.sxBtn('CA',0,x);
this.sxBtn('FL',1,x);
this.sxBtn('RERA',2,x);
this.sxBtn('Snore',3,x);
this.sxBtn('PB',4,x);
this.sxBtn('OA',5,x);
this.sxBtn('HY',6,x);
}
this.echatEvent(x,this.comTime[x]);
}
sxBtn(val,index,valx) {
let colors = ['#31d3e8', '#5b92d9','#c06de9','#ff9767','#ece000','#83e952','#2c3039'];
if (this.eventData[val].count > 0) {
this.eventData[val].list.map(item => {
this.eventList[valx].push(
{
itemStyle: { normal: { color: colors[index] } },
name: val,
value: [index, item.start_time, item.end_time]
}
)
})
// console.log(this.eventList)
}
},
echatEvent(valx,valName) {
let that = this;
let chartDom = document.getElementById('event'+valName);
let myChart = echarts.init(chartDom);
let colors = ['#31d3e8', '#5b92d9','#c06de9','#ff9767','#ece000','#83e952','#2c3039']; //三种状态的颜色
let state = ['CA','FL','RERA','Snore','PB','OA','HY']; //三种状态
// console.log(this.time[0],this.time[this.time.length - 1])
// echart配置
let option = {
title: [
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Hypopnea' : ': 低通气',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '3%',
left: '5%'
},
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Obstructive Apnea' : ': 阻塞性睡眠呼吸暂停',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '15%',
left: '5%'
},
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Periodic Breathing' : ': 周期性呼吸',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '26%',
left: '5%'
},
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Snoring' : ': 打鼾',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '38%',
left: '7%'
},
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Respiratory Effort'+ '\n'+'-Related Arousal' : ': 呼吸努力相关觉醒',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '50%',
left: '7%'
},
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Flow Limitation' : ': 气流限制',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '61%',
left: '5%'
},
{
subtext: this.bsZh != "zh" && this.bsZh != "tw" ? ': Central Apnea' : ': 中枢性睡眠呼吸暂停',
subtextStyle: {
color: '#2C3039',
fontSize: 11,
lineHeight: 16
},
top: '72%',
left: '5%'
},
],
color: colors,
tooltip: {
// trigger: 'axis',
formatter: function (params) {
// console.log(params)
return params.name + ':' + timeBtn(params.value[1]) + '~' + timeBtn(params.value[2]);
}
},
legend: {
orient: "vertical",
top: "7%",
left: '0%',
// left: 'left',
itemHeight: 18,
data: ['HY','OA','PB','Snore','RERA','FL','CA'],
formatter:function(name){
return name;
},
},
grid: {
left: '18%',
right: '3%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'time',
interval: 3600 * 1000, //以一个小时递增
min: this.patientDetail.allTrend[valx].time != null ? this.patientDetail.allTrend[valx].time[0] : 0, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
// max: this.time[this.time.length - 1],
max: this.patientDetail.allTrend[valx].time != null ? this.patientDetail.allTrend[valx].time[this.patientDetail.allTrend[valx].time.length - 1] : 0,
show: false,
axisLabel: {
formatter: function (value) {
let that = this;
return formatDate(new Date(value),'hh:mm')
function formatDate(value, fmt) {
let getDate = new Date(value);
let o = {
'M+': getDate.getMonth() + 1,
'd+': getDate.getDate(),
'h+': getDate.getHours(),
'm+': getDate.getMinutes(),
's+': getDate.getSeconds(),
'q+': Math.floor((getDate.getMonth() + 3) / 3),
'S': getDate.getMilliseconds()
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt;
}
},
},
axisLine: {
show: true,
lineStyle: {
color: "#333",
width: 1,
type: "solid"
},
},
splitLine: {show: false}
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#333",
width: 1,
type: "solid"
},
},
data: ['CA','FL','RERA','Snore','PB','OA','HY']
},
series: [
// 用空bar来显示三个图例
{ name: state[0], type: 'bar', data: [] },
{ name: state[1], type: 'bar', data: [] },
{ name: state[2], type: 'bar', data: [] },
{ name: state[3], type: 'bar', data: [] },
{ name: state[4], type: 'bar', data: [] },
{ name: state[5], type: 'bar', data: [] },
{ name: state[6], type: 'bar', data: [] },
{
type: 'custom',
renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1];
// 根据时间计算事件大小
let eventNN = 0;
let nam = (end[0] - start[0]);
if (that.time.length > 720) {
eventNN = 1;
nam = (end[0] - start[0]) < 1 ? (end[0] - start[0])*10 : (end[0] - start[0])
}
if (that.time.length > 1440) {
eventNN = 1;
nam = (end[0] - start[0]) < 1 ? (end[0] - start[0])*30 : (end[0] - start[0])
}
if (that.time.length < 400) {
eventNN = 2;
nam = (end[0] - start[0]) < 1 ? (end[0] - start[0])*10 : (end[0] - start[0])
}
if (that.time.length < 60) {
eventNN = 2;
nam = (end[0] - start[0])/20
}
return {
type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
x: start[0],
y: start[1] - height / 2,
width: nam,
// width: (end[0] - start[0])*10,
height: height
}, { // 当前坐标系的包围盒。
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
},
encode: {
x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
y: 0// data 中『维度0』对应到 Y 轴
},
data: this.eventList[valx]
}
]
};
option && myChart.setOption(option);
},
效果如下图
