@real2sport/depth-chart

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

功能

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

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

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

预览

详见 预览.

示意图

depth2025.mp4

使用方式

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>

3.调用

示例项目

示例：example/App.vue

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