vue-depth-chart

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)"]`