vue-kline-bte

基于Vue框架,使用ECharts绘制K线,该K线用于BTE产品

Usage no npm install needed!

<script type="module">
  import vueKlineBte from 'https://cdn.skypack.dev/vue-kline-bte';
</script>

README

K线

基于Vue框架,使用ECharts制作,适用于BTE产品的K线

使用说明

  • 导入vue-kline-bte包,在template中使用VueKLineBTE组件
  • 接收的props:
    • configuration,配置项,包含如下属性:
      1. loadChartOption:加载的ECharts图表选项
      2. loadMarkPointOption:加载的MarkPoint选项
      3. requestModule:请求的服务器端模块。默认:future(kline:只有K线以及相关指标、实时点评数据,future:在K线基础上,还有压力线、净流量、异常大单等数据)
      4. timeInterval:定时请求数据的时间间隔

      注:默认加载完整的K线图表选项,每1分钟请求一次期货数据。

    • show-indicators:Array 要显示哪些指标(可用指标:'MA', 'BOLL', 'PRESSURELINE', 'REALTIMESOLUTION', 'ABNORMALTRANSACTION', 'VOL', 'ABNORMALVOLUME', 'MACD', 'KDJ', 'RSI')。指标名都要大写
    • request-param,请求参数,包含如下属性:
      1. base: 'BTC', // 币种
      2. quote: 'QUARTER', // 币对
      3. exchange: 'okex', // 交易所
      4. type: '1m', // 时间类型
      5. size: '500' // 请求的点数量
  • 提交的事件:
    • getDataOnSuccess({ kline, markPoint, price}):获取数据成功后被调用,告知外层组件获取数据成功,以便外层组件可以对数据进行操作(比如:是否有实时点评数据,没有则不显示实时点评按钮)。
    • tooltipOnChange({availableHeight, grids, gridGroups}):触发tooltip时调用。告知外层组件,当前的tooltip数据对象,以便显示tooltip

注:可以参考example目录下的范例

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report