烛台图库– TradingVue.js

烛台图库– TradingVue.js

插件名称:trading-vue-js

发布时间:2020年5月9日

插件作者:tvjsx

官网 演示 GitHub下载

TradingVue.js是功能丰富的Vue.js图表​​库,可为交易者生成高度可定制的烛台和迷你图。

变更日志:

v0.7.0(09/15/2020)

  • 支持皮肤

v0.6.1(08/17/2020)

  • 错误修正

v0.6.0(08/15/2020)

  • 错误修正

v0.5.2(07/18/2020)

  • 错误修正

v0.5.1(06/15/2020)

  • 基于索引的渲染模式(隐藏周末间隔+ sup Renko)
  • 对数刻度模式
  • 接口(预览)
  • 性能修复
  • 缩放到当前的蜡烛模式
  • 像素完美的蜡烛,烛芯
  • 图表绘制工具
  • 价格水平
  • 自定义网格高度
  • Sidear和Botbar嵌入式着色器
  • 添加了RangeTool
  • 强制图表时间范围(覆盖自动检测的时间范围)
  • 更新了DataCube

安装和下载:

# NPM
$ npm install trading-vue-js --save

如何使用它:

1.安装并导入库。

import TradingVue from 'trading-vue-js'

2.基本用法。

// 你的模板
<template>
  <trading-vue :data="this.$data"></trading-vue>
</template>
export default {
  name: 'app',
  components: { TradingVue },
  data() {
    return {
      ohlcv: [
        // 数据放这里
      ]
    }
  }
}

3.默认props。

titleTxt: {
  type: String,
  default: 'TradingVue.js'
},
id: {
  type: String,
  default: 'trading-vue-js'
},
width: {
  type: Number,
  default: 800
},
height: {
  type: Number,
  default: 421
},
colorTitle: {
  type: String,
  default: '#42b883'
},
colorBack: {
  type: String,
  default: '#121826'
},
colorGrid: {
  type: String,
  default: '#2f3240'
},
colorText: {
  type: String,
  default: '#dedddd'
},
colorTextHL: {
  type: String,
  default: '#fff'
},
colorScale: {
  type: String,
  default: '#838383'
},
colorCross: {
  type: String,
  default: '#8091a0'
},
colorCandleUp: {
  type: String,
  default: '#23a776'
},
colorCandleDw: {
  type: String,
  default: '#e54150'
},
colorWickUp: {
  type: String,
  default: '#23a77688'
},
colorWickDw: {
  type: String,
  default: '#e5415088'
},
colorWickSm: {
  type: String,
  default: '#bdbec0'
},
colorVolUp: {
  type: String,
  default: '#79999e42'
},
colorVolDw: {
  type: String,
  default: '#ef535042'
},
colorPanel: {
  type: String,
  default: '#565c68'
},
colorTbBack: {
  type: String
},
colorTbBorder: {
  type: String,
  default: '#8282827d'
},
font: {
  type: String,
  default: Const.ChartConfig.FONT
},
toolbar: {
  type: Boolean,
  default: false
},
data: {
  type: Object,
  required: true
},
// Your overlay classes here
overlays: {
  type: Array,
  default: function () { return [] }
},
// Overwrites ChartConfig values,
// see constants.js
chartConfig: {
  type: Object,
  default: function () { return {} }
},
legendButtons: {
  type: Array,
  default: function () { return [] }
},
indexBased: {
  type: Boolean,
  default: false
}
相关插件