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')
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