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