zrender.js绘制体温单

使用 zrender.js 绘制体温单的步骤如下：

1. 引入 zrender.js 库文件。

<script src="https://cdn.bootcdn.net/ajax/libs/zrender/5.2.0/zrender.min.js"></script>

2. 创建一个 div 容器用于显示图表。

<div id="main" style="width: 600px;height:400px;"></div>

3. 创建一个 zrender.js 实例。

var zr = zrender.init(document.getElementById('main'));

4. 创建一个矩形背景。

var rect = new zrender.Rect({
    shape: {
        x: 10,
        y: 10,
        width: 580,
        height: 380
    },
    style: {
        fill: '#fff',
        stroke: '#000',
        lineWidth: 2
    }
});
zr.add(rect);

以上代码中，我们使用了 zrender.js 的 Rect 类创建了一个矩形，设置了矩形的位置、大小，样式为白色填充、黑色边框、线条宽度为 2。

5. 创建一个水平坐标轴。

var xAxis = new zrender.Line({
    shape: {
        x1: 30,
        y1: 350,
        x2: 570,
        y2: 350
    },
    style: {
        stroke: '#000',
        lineWidth: 2
    }
});
zr.add(xAxis);

以上代码中，我们使用了 zrender.js 的 Line 类创建了一条直线，设置了直线的起点和终点位置，样式为黑色线条、线条宽度为 2。

6. 创建一个垂直坐标轴。

var yAxis = new zrender.Line({
    shape: {
        x1: 30,
        y1: 30,
        x2: 30,
        y2: 350
    },
    style: {
        stroke: '#000',
        lineWidth: 2
    }
});
zr.add(yAxis);

以上代码中，我们同样使用了 zrender.js 的 Line 类创建了一条直线，设置了直线的起点和终点位置，样式为黑色线条、线条宽度为 2。

7. 创建坐标轴刻度。

for (var i = 0; i <= 8; i++) {
    var tick = new zrender.Line({
        shape: {
            x1: 30 + i * 60,
            y1: 350,
            x2: 30 + i * 60,
            y2: 340
        },
        style: {
            stroke: '#000',
            lineWidth: 2
        }
    });
    zr.add(tick);
}

以上代码中，我们使用了一个 for 循环创建了 9 个刻度，每个刻度之间间隔为 60 像素。

8. 创建体温曲线。

var tempData = [36.5, 37, 37.2, 36.8, 37.1, 37.3, 36.9];
var tempLine = new zrender.Polyline({
    shape: {
        points: []
    },
    style: {
        stroke: '#0099CC',
        lineWidth: 2,
        lineCap: 'round'
    }
});
for (var i = 0; i < tempData.length; i++) {
    var x = 30 + i * 60;
    var y = 350 - (tempData[i] - 35) * 20;
    tempLine.shape.points.push([x, y]);
}
zr.add(tempLine);

以上代码中，我们使用了 zrender.js 的 Polyline 类创建了一个折线，设置了折线的样式为蓝色线条、线条宽度为 2、线条端点样式为圆形，然后通过 for 循环遍历温度数据，计算出每个数据点的坐标位置，并添加到折线的 points 属性中。

通过以上步骤，我们就可以使用 zrender.js 绘制出一个简单的体温单效果。