vue 手术麻醉单 自适应 手麻图表 BS平台

手术麻醉单

虽然在标题中使用了 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 参数，用于初始化图表的配置、数据和回调函数。

构造函数的主要作用是：

1. 解构 options 对象，获取 el, data, 和 callBack 参数。其中 el 用于指定图表的 DOM 元素，data 是图表的数据源，callBack 是一个回调函数，可以在特定事件发生时执行。

2. 定义默认的 margin 对象，设置图表的上、右、下、左边距。

3. 初始化一些全局变量，如 currentItem, lastYear 和 zoomK。这些变量在后续的图表绘制和更新过程中会用到。

4. 配置图表的各种尺寸和样式参数，例如行高、文字宽度、格子数量等。这些配置会影响图表的布局和外观。

5. 初始化一个名为 element 的对象，用于存储 D3 对象。例如，updateLine 数组用于存储需要更新的折线图元素。

6. 深拷贝输入的数据，并对数据进行预处理，以确保数据的正确性和兼容性。

7. 调用 init() 方法，使用指定的 DOM 元素初始化图表容器。

8. 调用 initMark() 方法，初始化用到的图标。

9. 调用 drawAxis() 方法，绘制 X 轴。

10. 调用 drwaBg() 方法，绘制背景线条。

11. 调用 drawText() 方法，绘制背景静态文字。

12. 调用 loadTopData() 方法，根据数据绘制上半部分的数据内容。

13. 调用 bottomData() 方法，绘制底部的数据。

在创建实例时，构造函数会被自动调用，完成图表的初始化和基本绘制。后续可以通过实例方法对图表进行更新和操作。

图表方法

可视化的手术麻醉单图表，具体方法如下：

1. 初始化容器: 使用 init(query) 方法，可以通过 DOM 选择器初始化图表容器。这一步在创建图表之前是必要的。
2. 预处理数据: 使用 preprocessData() 方法，对图表数据进行预处理。这有助于确保数据的正确性和兼容性。
3. 绘制背景: 使用 drwaBg() 方法绘制所有背景线条。这有助于创建一个美观、整洁的图表。
4. 绘制 X 轴: 使用 drawAxis() 方法绘制 X 轴。这是图表中时间的基本表示。
5. 绘制时间轴: 使用 renderX() 方法绘制 X 时间轴。这样可以在图表中显示出与时间相关的信息。
6. 绘制背景静态文字: 使用 drawText() 方法绘制背景静态文字。这有助于在图表中提供更多信息。
7. 加载顶部数据: 使用 loadTopData() 方法根据数据绘制图表上半部分的数据内容。
8. 绘制底部数据: 使用 bottomData() 方法绘制图表底部的数据。
9. 初始化图标: 使用 initMark() 方法初始化用到的 icon。这有助于在图表中显示出与数据相关的图标。
10. 重绘整个图表数据: 使用 reRender(data) 方法根据新数据重绘整个图表。
11. 重绘顶部数据: 使用 reRenderTopData() 方法重绘图表上半部分的数据。
12. 重绘底部数据: 使用 reRenderBottom(content, data) 方法重绘图表底部的数据。
13. 添加文本到矩形区域: 使用 addTextInRect(param0) 方法根据矩形区域，垂直居中渲染文字。
14. 绘制动态文字: 使用 addTextInRectByData(param0) 方法绘制动态文字。
15. 设置 Y 轴标签: 使用 setLabelYaxis(content, sacle, gap, transform, title, color) 方法设置 Y 轴上的标签。可以为其指定比例尺、间隔、偏移量、标题和文本颜色。
16. 加粗时间线条: 使用 utils_boldLine() 方法加粗时间线条。这有助于强调时间轴上的重要事件。
17. 计算时间范围内的节点: 使用 getTimeRange(start, end) 方法计算开始时间和结束时间之间的节点。这有助于确定图表中的时间区间。
18. 生成数字序列: 使用 generateNumberSequence(target, step) 方法根据间隔生成数组。这可以帮助您在图表中创建规律的数字序列。
19. 数据分组: 使用 groupBy(data) 方法对数据进行分组。这有助于在图表中更清晰地显示不同类别的数据。

部分源码截图