vue surgical anesthesia single adaptive hand anesthesia chart BS platform

Surgical anesthesia drape

Insert image description here
Although vue is used in the title, the anesthesia order is not limited to the vue framework, because the anesthesia order is developed using D3, and the generation logic does not depend on any front-end framework. If you want to introduce it, you only need to pass in the necessary parameters and instantiate it directly. .

Online experience address: https://2guliang.top/temperature/anesthesia.

online experience

The lower polyline points are draggable.

If it helps, please click start. Penguin: 1534815114

Features

The chart data is bound to the view, and you only need to call the redraw method to update the data without refreshing.
Adaptive drawing. The code is developed using relative units, which means it can be displayed adaptively at any size.
Strong scalability. All positions are calculated based on data, so you can modify the customization by modifying the fields.

The core code is in src/components/chart.js. For the interface documentation, please see the out/global.html file.

Instructions

Refer to the src/chart.vue file

1. Introduce components

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. Update data

updateData() {
  this.cur = !this.cur
  if (this.cur) {
    this.chart.reRender(dataNew)
  } else {
    this.chart.reRender(data)
  }
}

Call the reRender method and pass in new data to update the page.

3. Obtain the modified new data.
The lineUpdate callback parameter will return the modified data.

Chart configuration

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)The method is to create the constructor of the Surgical Anesthesia Single Chart class. This method receives a optionsparameter that is used to initialize the chart's configuration, data and callback function.

The main functions of the constructor are:

Destructuring optionsthe object, obtaining the el, data, and callBackparameters. The DOM element used elto specify the chart datais the data source of the chart and callBackis a callback function that can be executed when a specific event occurs.
Define the default marginobject and set the top, right, bottom, and left margins of the chart.
Initialize some global variables such as currentItem, lastYearand zoomK. These variables will be used in subsequent chart drawing and updating processes.
Configure various size and style parameters of the chart, such as line height, text width, number of cells, etc. These configurations affect the layout and appearance of the chart.
Initialize an elementobject named to store D3 objects. For example, updateLinean array is used to store line chart elements that need to be updated.
Deep copy the input data and preprocess the data to ensure data correctness and compatibility.
Call init()the method to initialize the chart container using the specified DOM element.
Call initMark()the method to initialize the icon used.
Call drawAxis()the method to draw the X-axis.
Call drwaBg()the method to draw background lines.
Call drawText()the method to draw background static text.
Call loadTopData()the method to draw the upper half of the data content based on the data.
Call bottomData()the method to draw the bottom data.

When creating an instance, the constructor will be automatically called to complete the initialization and basic drawing of the chart. Later, the chart can be updated and operated through instance methods.

Chart method

Visualized surgical anesthesia chart, the specific method is as follows:

Initializing the container: Using the init(query) method, the chart container can be initialized through the DOM selector. This step is necessary before creating the chart.
Preprocess data: Use the preprocessData() method to preprocess chart data. This helps ensure data accuracy and compatibility.
Drawing the background: Use the drwaBg() method to draw all background lines. This helps create a nice, clean chart.
Draw the X-axis: Use the drawAxis() method to draw the X-axis. This is the basic representation of time in a chart.
Draw the timeline: Use the renderX() method to draw the X timeline. This displays time-related information in the chart.
Draw background static text: Use the drawText() method to draw background static text. This helps provide more information in the chart.
Load top data: Use the loadTopData() method to draw the data content of the upper half of the chart based on the data.
Plot the bottom data: Use the bottomData() method to plot the data at the bottom of the chart.
Initialization icon: Use the initMark() method to initialize the icon used. This helps to display data-related icons in the chart.
Redraw the entire chart data: Use the reRender(data) method to redraw the entire chart based on the new data.
Redraw top data: Use the reRenderTopData() method to redraw the data in the upper half of the chart.
Redraw bottom data: Use the reRenderBottom(content, data) method to redraw the data at the bottom of the chart.
Add text to a rectangular area: Use the addTextInRect(param0) method to render text vertically centered based on the rectangular area.
Draw dynamic text: Use the addTextInRectByData(param0) method to draw dynamic text.
Set the Y-axis label: Use the setLabelYaxis(content, sacle, gap, transform, title, color) method to set the label on the Y-axis. It can be assigned a scale, spacing, offset, title, and text color.
Bold time line: Use the utils_boldLine() method to thicken the time line. This helps emphasize important events on the timeline.
Calculate nodes within a time range: Use the getTimeRange(start, end) method to calculate nodes between the start time and end time. This helps determine time intervals on the chart.
Generate a sequence of numbers: Use the generateNumberSequence(target, step) method to generate an array based on intervals. This can help you create a regular sequence of numbers in your chart.
Data grouping: Use the groupBy(data) method to group data. This helps display different categories of data more clearly in the chart.

Some source code screenshots

Insert image description here