用echarts做兼容ie8的三测单（体温单） 代码全
$.fn.extend({
/**
*
* @param {
* UrineOutputData: 尿量数据
* OutputData: 出量数据
* InputData: 入量数据
* shitData: 大便数据
* pressureData: 血压数据
* pulseData: 脉搏数据
* temperatureData: 体温数据
* breathData: 呼吸数据
* mouthTemperature: 日期
* } options
* @returns
*/
HmThermometer: function (options) {
var defaults = {
UrineOutputData:[
['2021-12-01 08:00:01', 172],
['2021-12-02 11:00:00',null],
['2021-12-03 12:00:00', 154],
['2021-12-04 14:00:00', 88],
['2021-12-05 19:00:00','' ],
['2021-12-06 22:59:59', 127],
['2021-12-07 21:00:00', 110]
],
OutputData: [
['2021-12-01 05:00:01', 36.2],
['2021-12-02 06:00:00', 36.6],
['2021-12-03 12:00:00', 37.4],
['2021-12-04 16:00:00', 37.8],
['2021-12-05 18:00:00', 37.9],
['2021-12-06 23:59:59', 38.2],
['2021-12-07 09:00:00', 39.1]
] ,
InputData: [
['2021-12-01 08:00:01', 172],
['2021-12-02 11:00:00',],
['2021-12-03 12:00:00', 154],
['2021-12-04 14:00:00', undefined],
['2021-12-05 19:00:00', 137],
['2021-12-06 22:59:59', 127],
['2021-12-07 21:00:00', 110]
],
shitData: [
['2021-12-01 05:00:01', 36.2],
['2021-12-02 06:00:00', 36.6],
['2021-12-03 12:00:00', 37.4],
['2021-12-04 16:00:00', 37.8],
['2021-12-05 18:00:00', 37.9],
['2021-12-06 23:59:59', 38.2],
['2021-12-07 09:00:00', 39.1]
] ,
pressureData: [
{ diastolicPressure: 82, systolicPressure: 120, time: '2021-12-01 04:00:01' },
{ diastolicPressure: 42, systolicPressure: 100, time: '2021-12-02 00:00:00' },
{ diastolicPressure: 52, systolicPressure: 110, time: '2021-12-03 12:00:00' },
{ diastolicPressure: 92, systolicPressure: 111, time: '2021-12-04 16:00:00' },
{ diastolicPressure: 52, systolicPressure: 112, time: '2021-12-05 20:00:00' },
{ diastolicPressure: 62, systolicPressure: 113, time: '2021-12-06 23:59:59' },
{ diastolicPressure: 72, systolicPressure: 114, time: '2021-12-07 24:00:00' }
] ,
pulseData: [
['2021-12-01 08:00:01', 172],
['2021-12-02 11:00:00',166],
['2021-12-03 12:00:00', 154],
['2021-12-04 14:00:00', 88],
['2021-12-05 19:00:00', 137],
['2021-12-06 22:59:59', 127],
['2021-12-07 21:00:00', 110]
] ,
temperatureData: [
['2021-12-01 00:00:01', 36.2],
['2021-12-01 03:00:01', 37.7],
['2021-12-01 03:10:01', 37.7],
['2021-12-01 04:00:01', 37.7],
['2021-12-01 05:00:01', 37.7],
['2021-12-01 06:00:01', 37.7],
['2021-12-01 07:00:01', 37.7],
['2021-12-01 08:00:01', 37.7],
['2021-12-01 09:00:01', 37.7],
['2021-12-01 22:00:01', 36.6],
['2021-12-01 08:00:01', null],
['2021-12-02 06:00:00', 36.6],
['2021-12-03 12:00:00', undefined],
['2021-12-04 16:00:00', 37.8],
['2021-12-05 18:00:00', 37.9],
['2021-12-06 23:59:59', ''],
['2021-12-07 09:00:00', 39.1]
],
breathData: [
['2021-12-01 04:00:01', 82],
['2021-12-02 00:00:00', 78],
['2021-12-03 12:00:00', 84],
['2021-12-04 16:00:00', 66],
['2021-12-05 20:00:00', 77],
['2021-12-06 23:59:59', 67],
['2021-12-07 23:00:00', 50]
],
mouthTemperature: [
'2021-12-01',
'2021-12-02',
'2021-12-03',
'2021-12-04',
'2021-12-05',
'2021-12-06',
'2021-12-07',
],
//三条折线颜色
pigment: {
breathColor: 'black',
temperatureColor: 'blue',
pulseColor: 'red',
},
//天数
dayTemperature: [
'第一天',
'第二天',
'第三天',
'第四天',
'第五天',
'第六天',
'第七天',
]
};
var opts = $.extend({}, defaults, options);
opts.container = this;
/*
* 网格线组件使用时需要计算宽度
* 建议整理好数据逻辑后直接传入
* */
// 前端配置不可删除
var configFile = [
"血压(mmHg)",
"大便/次",
"入量 ml",
"出量 ml",
"尿量 ml",
]
// 中间展示维度
var lefts = 20, // 左边距离
tops = 100, // 上边距离
rowSpacing = 15, // 每小格宽度
tRowNum = 2, // 头部行数
mRowNum = 42;// 中部行数
// 左侧坐标轴第一行数
var YAxisDataTop = [
{
name: '脉 搏',
position: [lefts + rowSpacing - 5, tops + rowSpacing - 10],
},
{
name: '(次/分)',
position: [lefts + rowSpacing - 5, tops + rowSpacing + 6]
},
{
name: 180,
position: [lefts + rowSpacing - 2, tops + 2 * rowSpacing + 5],
},
{
name: '体 温',
position: [lefts + 4 * rowSpacing - 5, tops + rowSpacing - 10],
},
{
name: '(℃)',
position: [lefts + 4 * rowSpacing, tops + rowSpacing + 6]
},
{
name: 42,
position: [lefts + 4 * rowSpacing + 3, tops + 2 * rowSpacing + 5]
},
{
name: '呼 吸',
position: [lefts + 7 * rowSpacing - 2, tops + rowSpacing - 10],
},
{
name: '(次/分)',
position: [lefts + 7 * rowSpacing - 6, tops + rowSpacing + 6]
},
{
name: 90,
position: [lefts + 7 * rowSpacing + 4, tops + 2 * rowSpacing + 5]
}
];
// 三测单左侧轴数据
var YAxisData = [
[160, 41, 80],
[140, 40, 70],
[120, 39, 60],
[100, 38, 50],
[80, 37, 40],
[60, 36, 30],
[40, 35, 20]
];
var thermometer = {
opts: opts,
//初始化体温表
init: function () {
var _t = this;
opts.container.renderTpl($thermometer_tpl['thermometer/tpl/echartsTm'], {}, function () {
//初始化配置
_t.componentDidMount()
});
},
//初始化配置
componentDidMount: function () {
var self = this;
// lefts左边距离 top上边距离 rowSpacing每小格宽度 columnNum计算有多少列
var tableDatas = { 'left': lefts, 'top': tops, 'rowSpacing': rowSpacing, 'columnNum': (7 + 1) * 6 + 3 };
var whStyle = {
'height': tops + 50 + (mRowNum + configFile.length) * rowSpacing,
'width': lefts * 2 + ((7 + 1) * 6 + 3) * rowSpacing < 962 ? 800 : lefts * 2 + ((7 + 1) * 6 + 3) * rowSpacing
};
$('#sk-orign-thermometer').css(whStyle);
// 获取echarts 画板
self.renderECharts(tableDatas, whStyle);
},
/**
* 获取echarts 画板
* @param {*
* tableDatas:[{lefts:0,top:0,rowSpacing:0,columnNum:0}] 配置数据对象 lefts左边距离 top上边距离 rowSpacing每小格宽度 columnNum计算有多少列
* whStyle:{height:0,width:0}, 高度和宽度
* } options
* @returns
*/
renderECharts: function (tableDatas, whStyle) {
var self = this;
//整张图核心就是动态循环graphic里面的数据，[{type: 'line',...},{type: 'text',..},{type: 'circle',...}] line：折线，纵轴线，横轴线，text：文案，circle：圆点
// 整合全部图表数据
var tableData = self.getTableData(tableDatas);
var myChart = echarts.init(document.getElementById('sk-orign-thermometer'));
if (whStyle) {
myChart._zr.painter._height = whStyle.height;
myChart._zr.painter._width = whStyle.width;
}
myChart.clear();
myChart.setOption({
title: {
show: true,
text: '体 温 单',
textStyle: {
color: '#000',
fontWeight: 'bold',
fontSize: 22,
align: 'left'
},
left: 'center',
top: '20px',
},
toolbox: {
feature: {
saveAsImage: {}
},
right: 30,
top: 10,
},
tooltip: {
trigger: 'item',
formatter: ''
},
graphic: tableData
});
//兼容ie8
window.onresize = myChart.resize;
myChart.resize()
},
/**
* 绘制图表
* @param {*
* TSSParam:[{lefts:0,top:0,rowSpacing:0,columnNum:0}] 配置数据对象 left左边距离 tops上边距离 rowSpacing每小格宽度 columnNum计算有多少列
* } options
* @returns
*/
getTableData: function ($TSSParam) {
var list = [], // 图表数组
inspectionCycle = [2, 6, 10, 14, 18, 22], // 巡查间隔数组
columnNum = $TSSParam.columnNum,// 列数
bRowNum = configFile.length,// 尾部行数
tDataKeys = ['日 期', '住院天数']
//日期 天数
var TimeDateList = this.getTabTime();
/*获取头部部分：水平线 纵向线、以及文字数据录入*/
var headerTextList = this.getHeaderTextList(tDataKeys, columnNum);
/*坐标轴数据绘制*/
var yAxisList = this.getYAxisList();
/*中间部分：水平线、纵向线、坐标轴以及数据录入*/
var middleList = this.getMiddleList(columnNum, inspectionCycle);
/*页脚部分：水平线、纵向线、以及文字 configFile:bDataKeys*/
var bottomList = this.getBottomList(configFile, bRowNum, columnNum);
list = list.concat(TimeDateList, headerTextList, yAxisList, middleList, bottomList);
//折线数据
//得到[x,y]轴坐标
var coordinate = this.produceData(opts.breathData, 1);//呼吸
var Tempernate = this.produceData(opts.temperatureData, 2);//体温
var pulseTnate = this.produceData(opts.pulseData, 3);//脉搏
//再把得到的【x,y】轴坐标直接加入echarts配置里面
var breathingList = this.getBrokenLineList(coordinate, opts.pigment.breathColor);//呼吸
var temperaList = this.getBrokenLineList(Tempernate, opts.pigment.temperatureColor);//体温
var pulseList = this.getBrokenLineList(pulseTnate, opts.pigment.pulseColor)//脉搏
list = list.concat(breathingList, temperaList, pulseList);
//圆点和折线坐标一摸一样
var breathingDot = this.getDotList(coordinate, opts.pigment.breathColor, opts.breathData, '呼吸', '次/分');
var temperaDot = this.getDotList(Tempernate, opts.pigment.temperatureColor, opts.temperatureData, '体温', '(℃)');
var pulseDot = this.getDotList(pulseTnate, opts.pigment.pulseColor, opts.pulseData, '脉搏', '(次/分)');
list = list.concat(breathingDot, temperaDot, pulseDot);
//下面表格数据
var pressureList = this.getTableList(opts.pressureData, 1);//血压
var shitList = this.getTableList(opts.shitData, 2);//大便
var InputList = this.getTableList(opts.InputData, 3);//入量
var OutputList = this.getTableList(opts.OutputData, 4);//出量
var UrineOutputList = this.getTableList(opts.UrineOutputData, 5);//尿量
list = list.concat(pressureList, shitList, InputList, OutputList, UrineOutputList);
return list;
},
/**
* 构造数据
* @param {*
* data:表数据
* type:1：呼吸 ,2:体温 ,3:脉搏
* } options
* @returns
*/
produceData: function (data, type) {
var list = [];
for (var i = 0; i < data.length; i++) {
if (!data[i][1]) {
list.push([]);
continue
}
switch (type) {
case 1:
list.push([this.timeToX(data[i][0]), this.frequencyToY(data[i][1])])
break
case 2:
list.push([this.timeToX(data[i][0]), this.temperatureToY(data[i][1])])
break
case 3:
list.push([this.timeToX(data[i][0]), this.pulseToY(data[i][1])])
break
default:
return []
}
}
return list
},
//日期
getTabTime: function () {
var TimeList = [];
var first = '';
var two = '';
var mData = opts.mouthTemperature;//日期数据
var dData = opts.dayTemperature;//天数数据
//日期
for (var i = 0; i < mData.length; i++) {
first += 6 * rowSpacing//文字离左边距离都是固定的
var template = {
type: 'text',
top: tops - (tRowNum + 1) * rowSpacing + rowSpacing / 3,//固定参数
left: first,
cursor: 'auto',
style: {
text: mData[i],
fontSize: '12px',
color: '#000'
}
};
//第一个的时候得加上左边全部的距离 left：20是图离echarts的外壳距离
if (i == 0) {
first = rowSpacing * 10 + lefts;
template.left = first;
}
TimeList.push(template);
}
//天数
for (var j = 0; j < dData.length; j++) {
two += 6 * rowSpacing//文字离左边距离都是固定的
var daytemplate = {
type: 'text',
top: tops - tRowNum * rowSpacing + rowSpacing / 3,//固定参数132
left: two,
cursor: 'auto',
style: {
text: dData[j],
fontSize: '12px',
color: '#000'
}
};
//第一个的时候得加上左边全部的距离
if (j == 0) {
two = rowSpacing * 10 + lefts;
daytemplate.left = two;
}
TimeList.push(daytemplate);
}
return TimeList
},
/*获取头部部分：水平线 纵向线、以及文字数据录入*/
getHeaderTextList: function (tDataKeys, columnNum) {
var listHTML = [];
for (var i = 0; i <= tRowNum; i++) {
var leftDistance = 0, lineLength = 0;
//这里是头部超过三个的时候
if (i > 2 && i !== tRowNum) {
leftDistance = left + 6 * rowSpacing;
lineLength = (columnNum - 6) * rowSpacing
}
else {
leftDistance = lefts;
lineLength = columnNum * rowSpacing
}
listHTML.push({
type: 'line',
top: tops + (i - 3) * rowSpacing,
left: leftDistance,
cursor: 'auto',
style: {
stroke: !i ? '#000' : '#999',
lineWidth: 1,
},
shape: {
x1: 0,
y1: 0,
x2: lineLength,
y2: 0
}
});
}
for (var j = 0; j <= columnNum; j++) {
listHTML.push({
type: 'line',
top: tops - 3 * rowSpacing,
left: lefts + j * rowSpacing,
cursor: 'auto',
style: {
stroke: !j || j === columnNum ? '#000' : '#999',
lineWidth: 1,
},
shape: {
x1: 0,
y1: 0,
x2: 0,
y2: !j || (j > 3 && !((j - 3) % 6)) ? tRowNum * rowSpacing : 0
}
});
// 添加头部数据文字
if (!(j % 6)) {
for (var k = 0; k < tRowNum; k++) {
var template = {
type: 'text',
top: null,
left: null,
cursor: 'auto',
style: {
text: null,
fontSize: '12px',
color: '#000'
}
};
if (!j) {
template.top = tops - (tRowNum + 1 - k) * rowSpacing + rowSpacing / 3;
template.left = lefts + 5;
template.style.text = tDataKeys[k];
}
else {
if (j === columnNum) break;
var count = j / 6;
template.top = tops - (tRowNum + 1 - k) * rowSpacing + 4;
template.left = lefts + (count * 6 + 3) * rowSpacing + 5;
}
listHTML.push(template);
}
}
}
return listHTML
},
/*坐标轴数据绘制*/
getYAxisList: function () {
var yAxisList = [];
for (var i = 0; i < YAxisDataTop.length; i++) {
var stroke = '', fill = '';
if (YAxisDataTop[i].name === '脉 搏') {
stroke = fill = 'red';
} else if (YAxisDataTop[i].name === '体 温') {
stroke = fill = 'blue';
}
else {
stroke = fill = '#000';
}
var template = {
type: 'text',
top: YAxisDataTop[i].position[1],
left: YAxisDataTop[i].position[0],
cursor: 'auto',
style: {
text: YAxisDataTop[i].name,
fill: fill,
fontSize: '12px',
color: '#000',
stroke: stroke
}
};
yAxisList.push(template);
}
return yAxisList
},
/*中间部分：水平线、纵向线、坐标轴以及数据录入*/
getMiddleList: function (columnNum, inspectionCycle) {
var middleList = [];
for (var key = 0; key <= mRowNum; key++) {
var leftDistance = 0, lineLength = 0;
if (key > 2 && key !== mRowNum) {
leftDistance = lefts + 9 * rowSpacing;
lineLength = (columnNum - 9) * rowSpacing
}
else {
leftDistance = lefts;
lineLength = columnNum * rowSpacing
}
middleList.push({
type: 'line',
top: tops + (key - 1) * rowSpacing,
left: leftDistance,
cursor: 'auto',
style: {
stroke: key === mRowNum || !((key - 2) % 5) ? '#999' : '#ccc',
lineWidth: 1,
},
shape: {
x1: 0,
y1: 0,
x2: lineLength,
y2: 0
}
});
// 添加左侧y轴文字
var count = Math.floor((key - 1) / 5) - 1;
if (key !== 2 && key !== mRowNum && (key - 1) % 5 === 1 && count < 7) {
for (var keys = 0; keys < YAxisData[count].length; keys++) {
var lDistance = 0;
if (keys == 0) {
if (YAxisData[count][keys] >= 100) {
lDistance = lefts + rowSpacing - 2;
}
else {
lDistance = lefts + rowSpacing + 2;
}
}
else if (keys == 1) {
lDistance = lefts + 4 * rowSpacing + 3;
}
else {
lDistance = lefts + 7 * rowSpacing + 4;
}
var template = {
type: 'text',
top: tops + (key - 1) * rowSpacing + 4,
left: lDistance,
cursor: 'auto',
style: {
text: YAxisData[count][keys],
fontSize: '12px',
color: '#000'
}
};
middleList.push(template);
}
}
}
for (var index = 0; index <= columnNum; index++) {
var lineLength = 0;
if (index >= 9 || index === 0 || index === 3 || index === 6) {
if (index === 3 || index === 6) lineLength = (mRowNum - 1) * rowSpacing;
else lineLength = mRowNum * rowSpacing;
}
var $stroke;
if (!((index - 3) % 6)) {
if (index === columnNum) $stroke = '#000';
else if (index === 3 || index === 6) $stroke = '#999';
else $stroke = 'red';
}
else {
if (!index || index === columnNum) $stroke = '#000';
else if (index === 6) $stroke = '#999';
else $stroke = '#ccc'
}
middleList.push({
type: 'line',
cursor: 'auto',
top: index === 3 || index === 6 ? tops : tops - rowSpacing,
left: lefts + index * rowSpacing,
style: {
stroke: $stroke,
lineWidth: 1,
},
shape: {
x1: 0,
y1: 0,
x2: 0,
y2: lineLength
}
});
/*添加巡查时间刻度*/
var template = {
type: 'text',
top: tops - 10,
left: inspectionCycle[index % 6] >= 10
? lefts + (index + 3) * rowSpacing + 3
: lefts + (index + 3) * rowSpacing + 7,
cursor: 'auto',
style: {
text: inspectionCycle[index % 6],
fontSize: '12px',
color: '#000'
}
};
if (index >= 6 && index < columnNum - 3) {
middleList.push(template);
}
else if (index === 0) {
template.left = lefts + 5;
template.style.text = '时间';
middleList.push(template);
}
}
return middleList;
},
/*页脚部分：水平线、纵向线、以及文字*/
getBottomList: function (bDataKeys, bRowNum, columnNum) {
var bottomList = [];
//水平线
for (var keys = 0; keys <= bRowNum; keys++) {
bottomList.push({
type: 'line',
cursor: 'auto',
//mRowNum 42中部行数
top: tops + (mRowNum + keys - 1) * rowSpacing,
left: lefts,
style: {
stroke: keys === bRowNum - 1 ? '#000' : '#999',
lineWidth: 1,
},
shape: {
x1: 0,
y1: 0,
x2: columnNum * rowSpacing,
y2: 0
}
});
}
//纵向线
for (var indexs = 0; indexs <= columnNum; indexs++) {
var lineLength = 0;
if (indexs >= 9) {
if (!((indexs - 3) % 6)) {
lineLength = (bRowNum) * rowSpacing;
}
//第一行每行中间出现横杠 暂时不需要
// else if (!(indexs % 3)) {
// lineLength = rowSpacing;
// }
}
else if (indexs === 0) {
lineLength = (bRowNum) * rowSpacing;
}
bottomList.push({
type: 'line',
cursor: 'auto',
top: tops + (mRowNum - 1) * rowSpacing,
left: lefts + indexs * rowSpacing,
style: {
stroke: !indexs || indexs === columnNum ? '#000' : '#999',
lineWidth: 1,
},
shape: {
x1: 0,
y1: 0,
x2: 0,
y2: lineLength
}
});
// 添加页脚数据集
if (!(indexs % 6)) {
var count = indexs / 6;
for (var k = 0; k < bRowNum; k++) {
if (indexs === columnNum) break;
if (!count) {// 第一列
var template = {
type: 'text',
top: null,
left: null,
cursor: 'auto',
style: {
text: null,
fontSize: '12px',
color: '#000'
}
};
template.top = tops + (mRowNum - 1 + k) * rowSpacing + rowSpacing / 3;
template.left = lefts + 5;
template.style.text = bDataKeys[k];
bottomList.push(template);
}
}
}
}
return bottomList
},
//整合折线
getBrokenLineList: function (data, pigment) {
var zhexianList = [];
var template = {}
for (var i = 0; i < data.length; i++) {
if (data[i + 1] && data[i + 1].length) {
template = {
type: 'line',
shape: {
x1: data[i][0],//第一个折线点 x轴
y1: data[i][1],//第一个折线点 y轴
x2: data[i + 1][0], //第二个折线点 x轴
y2: data[i + 1][1]//第二个折线点 y轴
},
style: {
fill: null,
stroke: pigment,
lineWidth: 1
},
}
} else {//下一条数据没有就换成圆点就行
template = {
type: 'circle',
shape: {
cx: data[i][0],
cy: data[i][1],
r: 2
},
style: {
fill: null,
stroke: pigment,
lineWidth: 1
}
}
}
zhexianList.push(template);
}
return zhexianList
},
//圆点
getDotList: function (data, pigment, list, text, Company) {
var yuandianList = [];
//存储鼠标滑上去的内容数组
var tooltipArr = [];
var ciNum = null;
//一个小时内有二条数据，折线点就会重叠，鼠标滑上去就显示一条数据，这里把二条数据都一起显示
for (var j = 0; j < list.length; j++) {
if (ciNum == j) {
continue
}
if (data[j + 1] && data[j + 1].length) { //有下一条数据
if (list && list[j + 1]) {
var tiemFirst = list[j][0].replace(/-/g, "/");
var currentDate = new Date(Date.parse(tiemFirst.replace(/-/g, "/")));
var tiemNext = list[j + 1][0].replace(/-/g, "/");
var starttime = new Date(Date.parse(tiemNext.replace(/-/g, "/")));
currentDate = Number(currentDate);
starttime = Number(starttime);
var laterHour = Math.round((starttime - currentDate) / 1000 / 60 / 60);//一定要四舍五入不然格子算不准 /1000:秒/60:分钟/60:小时
if (!laterHour) {
ciNum = j + 1//记录下一次就不去循环了，下一条数据已经有了
tooltipArr[j] = list[j][0] + text + '：' + list[j][1] + Company + '</br>' + list[j + 1][0] + text + '：' + list[j + 1][1] + Company
tooltipArr[j + 1] = list[j][0] + text + '：' + list[j][1] + Company + '</br>' + list[j + 1][0] + text + '：' + list[j + 1][1] + Company
} else {
tooltipArr[j] = list[j][0] + '</br>' + text + '：' + list[j][1] + Company
ciNum = '';
}
}
} else {
tooltipArr[j] = list[j][0] + '</br>' + text + '：' + list[j][1] + Company
}
}
for (var i = 0; i < data.length; i++) {
var template = {
type: 'circle',
shape: {
cx: data[i][0],
cy: data[i][1],
r: 2
},
tooltip: {
trigger: 'item',
formatter: tooltipArr[i]
},
style: {
fill: null,
stroke: pigment,
lineWidth: 1
}
}
yuandianList.push(template);
}
return yuandianList
},
//底部表格
getTableList: function (data, type) {
var tableList = [];
var first = '';
//日期
for (var i = 0; i < data.length; i++) {
first += 6 * rowSpacing //文字离左边距离都是固定的
var template = {
type: 'text',
top: (44 + type) * rowSpacing + tops - 54,
left: first,
cursor: 'auto',
style: {
text: type == 1 ? data && data[i] ? data[i].diastolicPressure + '/' + data[i].systolicPressure : '' : data[i][1],
fontSize: '12px',
color: '#000'
}
};
//第一个的时候得加上左边全部的距离 left：20是图离echarts的外壳距离
if (i == 0) {
first = rowSpacing * 10 + lefts;
template.left = first;
}
tableList.push(template);
}
return tableList
},
// 呼吸转化为y轴坐标
frequencyToY: function (frequency) {
//得到离90的距离多少格子 向下取整
var remainder = (90 - frequency) / 2;
//不是偶数就得到格子得一半
var multiplier = frequency % 2 == 0 ? 0 : remainder % 2 == 0 ? 0 : 5;
return Math.floor(remainder) * rowSpacing + tops + 20 + multiplier;
},
// 时间日期转化为x轴坐标
timeToX: function (time) {
var startDate = opts.mouthTemperature[0] + ' 00:00:00'
//兼容ie8 时间必须是0000/00/00才能计算
var currentDate = new Date(Date.parse(time.replace(/-/g, "/")));
var starttime = new Date(Date.parse(startDate.replace(/-/g, "/")));
currentDate = Number(currentDate);
starttime = Number(starttime);
var linegezi = (rowSpacing * 9) + lefts;//前面有9个格子加到图表壳子的20距离
var laterHour = Math.round((currentDate - starttime) / 1000 / 60 / 60);// 一定要四舍五入不然格子算不准 /1000:秒/60:分钟/60:小时
var laterNum = laterHour * ((6 * rowSpacing) / 24)//每小时在格子上面的距离
return linegezi + laterNum
},
// 体温转化为y轴坐标
temperatureToY: function (temperature) {
//得到离42的距离多少格子 ps:substr(-1) ie8不兼容
var tempStr = (temperature * 10).toString()
var later = tempStr.substr((tempStr).length - 1, 1)
later === '0' && (later = 10)
return Math.floor(42 - temperature) * 5 * rowSpacing + ((10 - later) / 2) * rowSpacing + tops + 20
},
// 脉搏转化为y轴坐标
pulseToY: function (pulse) {
//得到离180的距离多少格子
var remainder = (180 - pulse) / 4;
//不是偶数就得到格子得一半
var multiplier = remainder % 2 == 0 ? 0 : 10;
return Math.ceil(((180 - pulse) / 4)) * rowSpacing + tops + 20 - multiplier;
}
};
thermometer.init();
return thermometer;
}
});
效果图
用echarts做兼容ie8的三测单（体温单） 代码全的更多相关文章
- 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- 兼容ie8 rgba()用法 滤镜filter的用法
原文 http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...
- 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面
尽管说IE6除了苛刻要求的一部分,我们一直没能考虑,但WIN7内置的浏览器IE8还需要支持. 在本文中,基本这种方法的优点,我个人认为,这是准备少.我们不需要在网上找了很多照片,使材料,你只要准备好了 ...
- 快速记录 IE8 下三个问题
快速记录 IE8 下三个问题 昨天 pc 端网站上灰度,发现多个在 IE8 下的问题,描述和解决方案如下: 第一个问题是 css 文件过大 现象 把项目所有的 css 打包成单个文件,在现代的浏览器下 ...
- css 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- 兼容IE8
由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...
- # bug 查找 (一) 快速记录 IE8 下三个问题
bug 查找 (一) 快速记录 IE8 下三个问题 昨天 pc 端网站上灰度,发现多个在 IE8 下的问题,描述和解决方案如下: 第一个问题是 css 文件过大 现象 把项目所有的 css 打包成单个 ...
- 一个小方法解决RGBA不兼容IE8
原网页http://blog.csdn.net/leihope_/article/details/70158902 要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如 ...
- 项目兼容ie8技术要点
好久没有写博客了,因为最近公司项目要调ie8兼容,一直在忙这事,终于竣工了,跟大家分享下这老掉牙的浏览器是如何搞定的...本人新手一枚,欢迎大家指教 项目是使用的jeecg框架,后台使用的java,前 ...
- 如何使用videojs兼容IE8浏览器
需要在服务器下运行 首先我们需要下载videojs包 https://github.com/videojs/video.js/releases 这里简单写了一个小栗子 <!DOCTYPE htm ...
随机推荐
- DIV CSS遮罩层（弹窗窗口）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CF513F2 题解
题意 传送门 有 \(a+b+1\) 个会动的棋子,在一个大小为 \(n\times m\) 的棋盘上,棋盘上有一些点有障碍.棋子中,有 \(a\) 个红色棋子,\(b\) 个蓝色棋子,和 \(1\) ...
- 打卡node day03 --http 内置模块
1.内置模块 http 2.加上校验 3.cheerio 可以使用jq 里的选择器 4.结合使用 5.获取的数据是http 路径 拿到具体的图片 6.循环图片
- C++实现线性表-顺序表的合并操作代码
#include<iostream>#include<cstdlib>//C++动态分配存储空间using namespace std;#define OK 1#define ...
- Pytest之参数化
在unittest测试中,有参数化的概念,那么在pytest中也有. 如何理解参数化: 当对一个测试函数进行测试时,通常会给函数传递多组参数.比如测试账号登陆,我们需要模拟各种千奇百怪的账号密码.可以 ...
- vue3 微信支付和支付宝支付 H5和微信内置浏览器
vue3微信支付和支付宝支付 // 判断是否为微信内置浏览器 let browser: any = navigator.userAgent.toLowerCase(); let isWechat: a ...
- Java-token生成
1. 引入jar包 <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt< ...
- 一种基于Modbus的工业通信网关设计
近年来,随着工业自动化领域的发展,工业现场对网络的可靠性及成本有极高的要求.传统基于串口的工业网关可以满足工业现场的应用,但却要付出高额成本.一种基于 ModBus 设计的工业通信网关就走进人们的眼中 ...
- Mysql学习：1、mysql安装及配置及连接Navicat
1.下载地址: https://dev.mysql.com/downloads/windows/installer/8.0.html 2.安装流程: a.选自定义安装:custom. b. 在下一步的 ...
- unable to access 'http://*****/': The requested URL returned error: 414
git拉取gitlab项目: unable to access 'http://git.yijiago.com/meimeng/lsyjg_java.git/': The requested URL ...