Vue-Depth-Chart

Configurable Depth Chart component based on Vue

English | 简体中文 | Article

• 日间模式

• 夜间模式

Installation

You can install and save an entry to your package.json with the following command:

npm i vue-depth-chart

Usage

Globally reference vue-depth-chart in main.js, you can use it directly in any component (note that the corresponding css should be introduced in the component)

• main.js

import Vue from 'vue'
import App from './App.vue'

import "vue-depth-chart"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• App.vue

<template>
  <div id="app">
    <vue-depth-chart :data="data" :customizeOptions="options" :theme="theme" />
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      options: {
        width: 780,
        height: 540,
      },
      theme: "day",
      data: {
        buy: [
          { price: 10977.76, amount: 0.303 },
          { price: 10977.63, amount: 0.462 },
          ...more items
        ],
        sell: [
          { price: 10986, amount: 52.896 },
          { price: 10985.91, amount: 48.57 },
          ...more items
        ],
      },
    };
  },
};
</script>
<style scoped>
@import "~vue-depth-chart/dist/vue-depth-chart.css";
</style>

Config Options

• Basic configuration

Options	Description	Day mode	Night mode
width	Viewable width of depth map	780	780
height	Visual height of depth map	540	540
initOffset	Initial offset, to solve line blur	0.5	0.5
bgColor	Overall background color	rgba(255,255,255,0.1)	rgba(0,0,0,0.9)

• Watermark configuration

Options	Description	Day mode	Night mode
watermaskType	Watermark type, optional text(text) image(picture)	image	image
watermaskContent	Watermark content, when watermaskType=text, it should be a specific text string, when watermaskType=image, it should be Is the corresponding image base64 string	data:image/png;base64,..	data:image/png;base64,..

• Line configuration

Options	Description	Day mode	Night mode
gridLineColor	Grid line color	#ddd	#333
rulerLineColor	Ruler line color color	#999	rgb(47,47,47)

• Shaft configuration

Options	Description	Day mode	Night mode
xAxisGridSpace	x-axis background grid spacing	90	90
yAxisGridSpace	y-axis background grid spacing	30	30
xAxisFontColor	x-axis ruler scale font color	#666	#999
yAxisFontColor	y-axis ruler scale font color	#666	#999
xAxisFontSize	x-axis ruler scale font size	12px Aria	12px Aria
yAxisFontSize	y-axis ruler scale font size	12px	12px Aria
yAxisShadowColor	y-axis ruler scale shadow color	#fff	#333

• Pitch configuration

Options	Description	Day mode	Night mode
bottomSpace	The distance between the depth map and the y-axis	8	8
buySellSpace	End-point spacing of buy and sell orders	10	10

• Basic configuration of prompt box

Options	Description	Day mode	Night mode
tipWidth	Tip width	120	120
tipHeight	Tip height	60	60
tipLocationLineColor	Tip Location Line Color	#999	#999
tipLocationDotRadius	Tip Location Dot Radius	5	5
tipType	The type of the tip type of the mouse movement, axis (on the xy axis) mouse (absolute positioning display following the mouse position)	mouse	```mouse` ``

• Prompt box (sale) configuration

Options	Description	Day mode	Night mode
tipBuyLocationDotBgColor	The background color of the dots of the pay prompt box	#fff	#fff
tipBuyBorderColor	Border color of the tipBuy box	#67c23a	#67c23a
tipBuyBgColor	Background color of the prompt box to pay	#f0f9eb	#f0f9eb
tipBuyTextColor	Prompt text color of the buy order prompt box	#67c23a	#67c23a
tipSellLocationDotBgColor	Dot background color of the sell order prompt box	#fff	#fff
tipSellBorderColor	Border color of the sell order tip box	#f56c6c	#f56c6c
tipSellBgColor	Sell order prompt box background color	#fef0f0	#fef0f0
tipSellTextColor	Tips text color of the sell order prompt box	#f56c6c	#f56c6c

• Buy and sell strokes and fill configuration

Options	Description	Day mode	Night mode
buyStrokeColor	Buy Stroke Color	rgb(111,168,0)	rgb(111,168,0)
sellStrokeColor	Sell Stroke Color	rgb(234,0,112)	rgb(234,0,112)
buyLinearGradientArray	buy order fill gradient array (top to bottom)	["rgb(141,186,51)", "rgb(160,197,87)", "rgb(189,215,138)", "rgb(228,238,206)", " rgb(250,250,241)"]	["rgb(80,120,3)", "rgb(72,106,4)", "rgb(51,74,5)", "rgb(35,49, 7)", "rgb(20,25,8)"]
sellLinearGradientArray	Sell order fill gradient array (top to bottom)	["rgb(255,148,152)", "rgb(255,164,172)", "rgb(255,192,197)", "rgb(255,228,230)", "rgb(255,249,249) "]	["rgb(217,45,127)", "rgb(172,37,101)", "rgb(115,27,68)", "rgb(64,19,39)", "rgb(26,13,18)"]