手术麻醉单
虽然在标题中使用了 vue, 但是麻醉单并不局限于 vue 框架,因为麻醉单是使用 D3 开发,生成逻辑不依赖任何的前端框架,想要引入只需传入必要的参数直接实例化即可。
在线体验地址: https://2guliang.top/temperature/anesthesia 。
下方的折线点可拖动。
有帮助请帮忙点个 start 。企鹅:1534815114
特点
- 图表数据与视图绑定,只需要调用重绘方法,即可无刷新的更新数据。
- 自适应绘制。代码使用相对单位开发,这意味着可以自适应任何尺寸展示。
- 可扩展性强。所有的位置都是基于数据计算,所以修改字段即可修改定制。
核心代码在 src/components/chart.js 接口文档请看 out/global.html文件
使用方法
参照 src/chart.vue 文件
1、 引入组件
new Chart({
el: 'chart-content',
// 传入事件函数
callBack: {
onBrokenline: this.onBrokenline.bind(this),
onlineClick: this.onlineClick.bind(this),
onlineChartClick: this.onlineChartClick.bind(this),
tootipShow: this.changeTootip.bind(this),
lineUpdate: debounce(this.onDataChange.bind(this), 100),
},
// 传入数据
data,
})
2、更新数据
updateData() {
this.cur = !this.cur
if (this.cur) {
this.chart.reRender(dataNew)
} else {
this.chart.reRender(data)
}
}
调用 reRender 方法, 传入新数据,即可更新页面。
3、获取修改后的新数据
lineUpdate 回调参数会把修改后的数据返回
图表配置
constructor(options) {
const { el, data, callBack } = options
const margin = { top: 0, right: 0, bottom: 0, left: 0 }
this.callBack = callBack
// start 做全局变量使用
this.currentItem = null
this.lastYear = null
this.zoomK = 1
// end 做全局变量使用
// 配置数据
this.config = {
margin,
// 表头高度
headerLineHeight: 24,
lineHeight: 20,
//折线行高
lineChartHeight: 28,
// 左侧文字宽度
leftTextWidth: 25,
// 格子数量
rowCount: 25,
// 总行数
lineCount: 18,
//麻醉用药行数
toplineCount: 10,
// 折线总行数
lineChartCount: 11,
rowWidth: 28,
preRow: 110,
afterRow: 90,
width: 900 - margin.left - margin.right,
height: 900 - margin.top - margin.bottom,
// 点图行高
pointLineHeight: 80,
}
// 存储D3对象
this.element = {
updateLine: [],
}
this.data = JSON.parse(JSON.stringify(data))
this.preprocessData()
this.init(el)
this.initMark()
this.drawAxis()
this.drwaBg()
this.drawText()
this.loadTopData()
this.bottomData()
}
constructor(options)
方法是创建手术麻醉单图表类的构造函数。该方法接收一个 options
参数,用于初始化图表的配置、数据和回调函数。
构造函数的主要作用是:
-
解构
options
对象,获取el
,data
, 和callBack
参数。其中el
用于指定图表的 DOM 元素,data
是图表的数据源,callBack
是一个回调函数,可以在特定事件发生时执行。 -
定义默认的
margin
对象,设置图表的上、右、下、左边距。 -
初始化一些全局变量,如
currentItem
,lastYear
和zoomK
。这些变量在后续的图表绘制和更新过程中会用到。 -
配置图表的各种尺寸和样式参数,例如行高、文字宽度、格子数量等。这些配置会影响图表的布局和外观。
-
初始化一个名为
element
的对象,用于存储 D3 对象。例如,updateLine
数组用于存储需要更新的折线图元素。 -
深拷贝输入的数据,并对数据进行预处理,以确保数据的正确性和兼容性。
-
调用
init()
方法,使用指定的 DOM 元素初始化图表容器。 -
调用
initMark()
方法,初始化用到的图标。 -
调用
drawAxis()
方法,绘制 X 轴。 -
调用
drwaBg()
方法,绘制背景线条。 -
调用
drawText()
方法,绘制背景静态文字。 -
调用
loadTopData()
方法,根据数据绘制上半部分的数据内容。 -
调用
bottomData()
方法,绘制底部的数据。
在创建实例时,构造函数会被自动调用,完成图表的初始化和基本绘制。后续可以通过实例方法对图表进行更新和操作。
图表方法
可视化的手术麻醉单图表,具体方法如下:
- 初始化容器: 使用 init(query) 方法,可以通过 DOM 选择器初始化图表容器。这一步在创建图表之前是必要的。
- 预处理数据: 使用 preprocessData() 方法,对图表数据进行预处理。这有助于确保数据的正确性和兼容性。
- 绘制背景: 使用 drwaBg() 方法绘制所有背景线条。这有助于创建一个美观、整洁的图表。
- 绘制 X 轴: 使用 drawAxis() 方法绘制 X 轴。这是图表中时间的基本表示。
- 绘制时间轴: 使用 renderX() 方法绘制 X 时间轴。这样可以在图表中显示出与时间相关的信息。
- 绘制背景静态文字: 使用 drawText() 方法绘制背景静态文字。这有助于在图表中提供更多信息。
- 加载顶部数据: 使用 loadTopData() 方法根据数据绘制图表上半部分的数据内容。
- 绘制底部数据: 使用 bottomData() 方法绘制图表底部的数据。
- 初始化图标: 使用 initMark() 方法初始化用到的 icon。这有助于在图表中显示出与数据相关的图标。
- 重绘整个图表数据: 使用 reRender(data) 方法根据新数据重绘整个图表。
- 重绘顶部数据: 使用 reRenderTopData() 方法重绘图表上半部分的数据。
- 重绘底部数据: 使用 reRenderBottom(content, data) 方法重绘图表底部的数据。
- 添加文本到矩形区域: 使用 addTextInRect(param0) 方法根据矩形区域,垂直居中渲染文字。
- 绘制动态文字: 使用 addTextInRectByData(param0) 方法绘制动态文字。
- 设置 Y 轴标签: 使用 setLabelYaxis(content, sacle, gap, transform, title, color) 方法设置 Y 轴上的标签。可以为其指定比例尺、间隔、偏移量、标题和文本颜色。
- 加粗时间线条: 使用 utils_boldLine() 方法加粗时间线条。这有助于强调时间轴上的重要事件。
- 计算时间范围内的节点: 使用 getTimeRange(start, end) 方法计算开始时间和结束时间之间的节点。这有助于确定图表中的时间区间。
- 生成数字序列: 使用 generateNumberSequence(target, step) 方法根据间隔生成数组。这可以帮助您在图表中创建规律的数字序列。
- 数据分组: 使用 groupBy(data) 方法对数据进行分组。这有助于在图表中更清晰地显示不同类别的数据。
部分源码截图