@real2sport/depth-chart

交易平台自定义深度图表组件，使用vue3和vue-konva开发

功能

1、自适应屏幕分辨率，宽度、高度自适应

2、支持价格、数量、小数位精度控制

3、支持所有元素的颜色、样式控制

预览

详见 预览.

示意图

使用方式

1. 安装

npm i @real2sport/depth-chart

2. 引用

import { createApp } from 'vue'
import App from './App.vue'
import depthChart from '@real2sport/depth-chart'
// vue3 全局引用
const app = createApp(App)
app.use(depthChart)
app.mount('#app')

<!-- 组件引用 -->
<script setup lang="ts">
import { depthChart } from '@real2sport/depth-chart'
</script>

2.1 全部可选配置

// 深度图数据结构
interface IDepthItem {
  price: number
  amount: number
  totalAmount: number
}
// 深度图配置项
interface IDepthItemPropsOptions {
  width: number // 总宽
  height: number // 总高
  marginX: number // 右侧数量宽度
  marginY: number // 底部价格高度
  fontSize: number // // 坐标轴字体大小
  fontColor: string // 坐标轴字体颜色
  bidsColor: string // 买盘颜色
  asksColor: string // 卖盘颜色
  bidsBgColor: string // 买盘背景颜色
  asksBgColor: string // 卖盘背景颜色
  dottedBgColor: string // 虚线背景色
  axisColor: string // 中线及刻度线颜色
  tipFontSize: number // 提示字体大小
  tipColor: string // 飘窗字体颜色
  axisXBgColor: string // X坐标轴背景色
  axisYBgColor: string // Y坐标轴背景色
  axisXBorderColor: string // X坐标轴边框色
  axisYBorderColor: string // Y坐标轴边框色
  axisLineWidth: number // 刻度线宽度
  tipPriceText: string // 提示价格文字
  tipTotalText: string // 提示总价文字
  wheel: number // 默认鼠标滚轮步长，数值越大，展示的数据量越多
  isRedUp: boolean // 默认false红跌绿涨，true红涨绿跌
}

3.调用

示例项目

示例：example/App.vue

<depthChart :options="options" :symbolData="symbolData" :depthData="depthData"></depthChart>