html 绘制体温单,使用zrender.js绘制体温单效果
时间: 2023-10-03 14:05:28 浏览: 57
使用 zrender.js 绘制体温单的步骤如下:
1. 引入 zrender.js 库文件和 echarts.min.js 库文件。
```html
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/zrender/5.2.0/zrender.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
```
2. 创建一个 div 容器用于显示图表。
```html
<div id="main" style="width: 600px;height:400px;"></div>
```
3. 使用 echarts.init 方法创建一个 echarts 实例。
```javascript
var myChart = echarts.init(document.getElementById('main'));
```
4. 配置 echarts 图表的参数,使用 zrender.js 绘制体温单。
```javascript
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
},
yAxis: {
type: 'value',
min: 35,
max: 42
},
series: [{
data: [36.5, 37, 37.2, 36.8, 37.1, 37.3, 36.9],
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#0099CC'
}
}
}]
};
myChart.setOption(option);
```
以上代码中,我们使用了 echarts 的 xAxis、yAxis 和 series 等配置项,同时将 type 设置为 line,表示绘制线条,将 smooth 设置为 true,表示平滑曲线,使用 itemStyle 设置线条的颜色为蓝色。
通过以上步骤,我们就可以使用 zrender.js 绘制出一个简单的体温单效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)