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

• Watermark configuration

• Line configuration

• Shaft configuration

• Pitch configuration

• Basic configuration of prompt box

• Prompt box (sale) configuration

• Buy and sell strokes and fill configuration