vue 手术麻醉单 自适应 手麻图表 BS平台 |
您所在的位置：网站首页 › 麻醉处方单怎么写样本图片大全 › vue 手术麻醉单 自适应 手麻图表 BS平台 |
vue 手术麻醉单 自适应 手麻图表 BS平台
|
手术麻醉单
在线体验 下方的折线点可拖动。 有帮助请帮忙点个 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) 方法对数据进行分组。这有助于在图表中更清晰地显示不同类别的数据。 部分源码截图
|
虽然在标题中使用了 vue， 但是麻醉单并不局限于 vue 框架，因为麻醉单是使用 D3 开发，生成逻辑不依赖任何的前端框架，想要引入只需传入必要的参数直接实例化即可。
【本文地址】