血压曲线图echarts 折线配置项内容和展示
配置项如下
option = {
title: {
text: '血压曲线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['心率', '收缩压', '舒张压', '平均血压', '血压上限', '血压下限']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false,
splitNumber: 12,
splitLine: {
show: false
},
label: {
show: true,
//formatter: function(params) {
// return echarts.format.formatTime('yyyy-MM-dd', params);
//},
formatter: function(value) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getHours()), date.getMinutes()];
return texts.join(':');
}
},
},
yAxis: [{
//name: '血压',
type: 'value',
max: 200,
min: 0,
splitLine: {
show: false
},
},
{
name: '次/分',
type: 'value',
max: 300,
min: 0,
splitLine: {
show: false
},
}
],
series: [{
name: '心率',
type: 'line',
yAxisIndex: 1,
data: [
[1521684000, 80],
[1521685800, 80],
[1521687600, 80],
[1521689400, 80],
//=========================
[1521691200, 80],
[1521698400, 80],
[1521705600, 80],
[1521712800, 80],
[1521720000, 80],
[1521727200, 80],
[1521734400, 80],
[1521741600, 80],
[1521748800, 80],
[1521756000, 80],
[1521763200, 80],
[1521770400, 80]
]
},
{
name: '收缩压',
type: 'line',
data: [
[1521684000, 130],
[1521685800, 130],
[1521687600, 130],
[1521689400, 130],
//=========================
[1521691200, 130],
[1521698400, 130],
[1521705600, 130],
[1521712800, 130],
[1521720000, 130],
[1521727200, 130],
[1521734400, 130],
[1521741600, 130],
[1521748800, 130],
[1521756000, 130],
[1521763200, 130],
[1521770400, 130]
],
areaStyle: {
color: '#8ec6ad',
}
},
{
name: '舒张压',
type: 'line',
data: [
[1521684000, 90],
[1521685800, 90],
[1521687600, 90],
[1521689400, 90],
//=========================
[1521691200, 90],
[1521698400, 90],
[1521705600, 90],
[1521712800, 90],
[1521720000, 90],
[1521727200, 90],
[1521734400, 90],
[1521741600, 90],
[1521748800, 90],
[1521756000, 90],
[1521763200, 90],
[1521770400, 90]
],
areaStyle: {
color: '#fff',
opacity: 1
}
},
{
name: '平均血压',
type: 'line',
data: [
[1521684000, 110],
[1521685800, 110],
[1521687600, 110],
[1521689400, 110],
//=========================
[1521691200, 110],
[1521698400, 110],
[1521705600, 110],
[1521712800, 110],
[1521720000, 110],
[1521727200, 110],
[1521734400, 110],
[1521741600, 110],
[1521748800, 110],
[1521756000, 110],
[1521763200, 110],
[1521770400, 110]
]
},
{
name: '血压上限',
type: 'line',
step: 'start',
data: [
[1521684000, 140],
[1521685800, 140],
[1521687600, 140],
[1521689400, 140],
//=========================
[1521691200, 140],
[1521698400, 140],
[1521705600, 140],
[1521712800, 140],
[1521720000, 140],
[1521727200, 140],
[1521734400, 120],
[1521741600, 120],
[1521748800, 120],
[1521756000, 120],
[1521763200, 140],
[1521770400, 140]
]
},
{
name: '血压下限',
type: 'line',
step: 'start',
data: [
[1521684000, 95],
[1521685800, 95],
[1521687600, 95],
[1521689400, 95],
//=========================
[1521691200, 95],
[1521698400, 95],
[1521705600, 95],
[1521712800, 95],
[1521720000, 95],
[1521727200, 95],
[1521734400, 75],
[1521741600, 75],
[1521748800, 75],
[1521756000, 75],
[1521763200, 95],
[1521770400, 95]
]
},
{
type: 'line',
markLine: {
data: [{
name: '2018-03-22 13:00:00',
label: {
formatter: '{b}'
},
//xAxis: '2018-03-22 13:00:00'
xAxis: 1521694800
},
{
name: '2018-03-22 21:00:00',
label: {
formatter: '{b}'
},
//xAxis: '2018-03-22 21:00:00'
xAxis: 1521723600
}
],
}
},
{
type: 'line',
markArea: {
data: [
[{
name: '夜间区域',
xAxis: 1521727200
}, {
xAxis: 1521756000
}],
]
},
z:9,
zlevel:9
}
]
};
截图如下
