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