| | |
| | | { deep: true } |
| | | ); |
| | | |
| | | watch( |
| | | () => props.height, |
| | | () => { |
| | | generateKtvListEchart(pageData.value.ktvList); |
| | | generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord); |
| | | } |
| | | ); |
| | | |
| | | /** 生成ktv趋势图 */ |
| | | const generateKtvListEchart = (ktvList: KtvItem[]) => { |
| | | if (!ktvListEchartRef.value) return; |
| | |
| | | color: "#70CAAE", |
| | | }, |
| | | itemStyle: { |
| | | color: "#70CAAE", |
| | | color: (params: any) => getColor(params.value), |
| | | }, |
| | | }, |
| | | ], |
| | |
| | | }; |
| | | |
| | | chart.setOption(option, true); // 第二个参数为 true 表示全量更新 |
| | | }; |
| | | |
| | | const getColor = (val: number) => { |
| | | if (val < 1.2) return "#FE0201"; // 红色 |
| | | if (val <= 1.6) return "#70CAAE"; // 绿色 |
| | | return "#FE6500"; // 橙色 |
| | | }; |
| | | |
| | | /** 生成血压脉搏趋势图 */ |
| | |
| | | |
| | | const option = { |
| | | grid: [ |
| | | { top: "10%", height: "25%", left: 30, right: 20 }, |
| | | { top: "38%", height: "25%", left: 30, right: 20 }, |
| | | { top: "66%", height: "25%", left: 30, right: 20 }, |
| | | { top: "5%", height: "28%", left: 40, right: 20, containLabel: true }, |
| | | { top: "35%", height: "28%", left: 40, right: 20, containLabel: true }, |
| | | { top: "65%", height: "28%", left: 40, right: 20, containLabel: true }, |
| | | ], |
| | | tooltip: { |
| | | trigger: "axis", |
| | |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | gridIndex: 0, |
| | | show: false, |
| | | }, |
| | | { |
| | | type: "category", |
| | |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | gridIndex: 1, |
| | | show: false, |
| | | }, |
| | | { |
| | | type: "category", |
| | |
| | | axisLabel: { show: true }, // 最下面一层显示时间轴 |
| | | splitLine: { show: false }, |
| | | gridIndex: 2, |
| | | show: false, |
| | | }, |
| | | ], |
| | | yAxis: [ |
| | |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | min: "dataMin", // 自动以数据最小值为最小值 |
| | | max: "dataMax", |
| | | min: 0, |
| | | max: 300, |
| | | interval: 2, |
| | | gridIndex: 0, |
| | | }, |
| | | { |
| | |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | min: "dataMin", // 自动以数据最小值为最小值 |
| | | max: "dataMax", |
| | | min: 0, |
| | | max: 300, |
| | | interval: 2, |
| | | gridIndex: 1, |
| | | }, |
| | | { |
| | |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | min: "dataMin", // 自动以数据最小值为最小值 |
| | | max: "dataMax", |
| | | min: 0, |
| | | max: 300, |
| | | interval: 2, |
| | | gridIndex: 2, |
| | | }, |
| | | ], |