kd-lane-chart-v3

kd-lane-chart

泳道图（KdLaneContainer）+ 实时曲线（frameLayout）Vue 2 组件包。

注意： 旧包 kd-lane-container 和 kd-curve-v2 已不再推荐使用，请迁移至此统一包。

---

安装

npm install kd-lane-chart

依赖

依赖	版本
vue	^2.6.0
element-ui	^2.15.14
echarts	*
vuedraggable	^2.24.3
v-click-outside	^2.1.3
resize-detector	^0.3.0
lodash-es	^4.18.1

---

快速开始

import Vue from "vue";
import { KdLaneContainer, frameLayout } from "kd-lane-chart";

// 全局注册（也可按需单独注册）
Vue.use(KdLaneContainer);
Vue.use(frameLayout);

或在组件内局部使用：

import { KdLaneContainer, frameLayout } from "kd-lane-chart";

export default {
  components: {
    KdLaneContainer,
    frameLayout,
  },
};

---

KdLaneContainer（泳道图）

泳道图组件，用于展示钻井相关的车道数据。

基本用法

<template>
  <kd-lane-container
    :config="config"
    :datas="datas"
    theme-name="dark"
  />
</template>

<script>
export default {
  data() {
    return {
      config: { /* 泳道图配置 */ },
      datas: { /* 数据 */ },
    };
  },
};
</script>

Props

参数	类型	说明
config	Object	泳道图配置
datas	Object	数据
themeName	String	主题：white / dark / gray

---

frameLayout（实时曲线）

实时曲线图表容器，支持井深/时间两种曲线类型、实时/历史数据、多主题、滚动加载等。

基本用法

<template>
  <frame-layout
    ref="frameLayout"
    :depthConfig="depthConfig"
    :timeConfig="timeConfig"
    :curveDatas="curveDatas"
    :themeName="themeName"
    :toolBarConfig="toolBarConfig"
    :parameterPanelConfig="parameterPanelConfig"
    :WellBitDepthTimePlotConfig="WellBitDepthTimePlotConfig"
    :warningData="warningData"
    @template-change="onTemplateChange"
    @line-change="onLineChange"
    @chart-scroll="onChartScroll"
    @updateSettings="onUpdateSettings"
    @visibleDataChange="onVisibleDataChange"
    @dialogFunction="onDialog"
    @refresh="onRefresh"
  >
    <template v-for="lane in headerSlotName" :slot="lane.laneId">
      <div class="header-slot">{{ lane.laneName }}</div>
    </template>
    <template v-for="lane in contentSlotName" :slot="lane.laneId">
      <div class="content-slot">
        <resizeEcharts autoresize :options="contentSlotOptions[lane.contentKey]" />
      </div>
    </template>
  </frame-layout>
</template>

Props

参数	类型	说明
depthConfig	Object	井深配置（templates、params）
timeConfig	Object	时间配置（templates、params）
curveDatas	Object	曲线数据，{ type: "replace" / "append", data: [...] }
themeName	String	主题：white / dark / gray
toolBarConfig	Object	工具栏配置
parameterPanelConfig	Object	参数面板配置
WellBitDepthTimePlotConfig	Object	井深-钻头-时间曲线面板配置
warningData	Array	预警数据

事件

事件	参数	说明
@template-change	data	模板变更
@line-change	line	曲线变更
@chart-scroll	{ direction, currentData }	图表滚动（方向 top/bottom）
@updateSettings	{ key, value, settings }	设置变更
@visibleDataChange	{ firstValue, lastValue }	可见数据范围变更
@dialogFunction	{ type, start, end }	弹窗（1-井深段，2-时间段，3-导出）
@refresh	—	刷新
@onCustomMenuClicked	—	自定义菜单点击

曲线数据格式

// 初始化/替换数据
curveDatas: { type: "replace", data: [...] }

// 追加数据（实时更新）
curveDatas: { type: "append", data: generator() }

---

License

MIT