@winner-fed/quote-graph

quote graph

Usage no npm install needed!

<script type="module">
  import winnerFedQuoteGraph from 'https://cdn.skypack.dev/@winner-fed/quote-graph';
</script>

README

quoteview

A library for quoteview.

Build Setup

 
<template>
  <quote-view
    :cid='cid'
    :code='code'
    :token='token'
    :params='params'
    :appkey='appkey'
    :threshold='threshold'
    :throttle='throttle'
    :option='option'
    :graph-config='graphConfig'
    :period-black-list='periodBlackList'
    :multi-main-modules='multiMainModules'
    :multi-main-auths='multiMainAuths'
    :multi-foot-modules='multiFootModules'
    :multi-foot-auths='multiFootAuths'
    @touchMove='touchMove'
    @tapGraph='tapTrendJZ'
  >
    <div slot='header'></div>
  </quote-view>
</template>
<script>
// setConfig修改graph默认参数,格式与graphConfig一致
import {QuoteView, setConfig} from 'quoteview';
export default {
  name: 'Main',
  data() {
    return {
      cid: '',
      code: '',
      appkey: undefined, // 埋点key
      token: undefined, // 接口access_token
      params: {}, // 组件light参数
      periodBlackList: [], // 分时K线period黑名单
      threshold: 0, // 数据缓存默认时间间隔
      throttle: 10000, // 定时请求时间间隔
      /**
       * [multiModules 将需要展示的模块相加即可]
       * 主视图模块
       * const TREND_KEY = 1; // 分时
       * const MA_KEY = 2; // 均线
       * const JZ_KEY = 4; // 九转
       * const KD_KEY = 8; // KD密码
       */
      multiMainModules: 15, // 模块权限
      multiMainAuths: 15, // 用户权限
      /**
       * 辅视图模块
       * const AMOUNT_KEY = 1; // 成交量
       * const MACD_KEY = 2; // MACD
       * const KDJ_KEY = 4;  // KDJ
       * const ENE_KEY = 8; // ENE
       * const ELECTRIC_KEY = 16;  // 电波
       * const FUNDFLOW_KEY = 32;  // 资金博弈
       * const FUNDFLOWDIR_KEY = 64;  // 资金流向
       */
      multiFootModules: 127, // 模块权限
      multiFootAuths: 127, // 用户权限
      option: {
        showTabBar: true, // 是否显示分时K线tab切换栏
        showFullScreenBtn: true, // 是否显示全屏按钮
        showSideDetail: true, // 是否显示分时五档明细成交量
        showFundflow: true, // 是否显示分时五档的成交量
        supportFullScreen: true, // 是否支持全屏
        supportKlineRight: true, // 是否支持除复权
        supportKlineScale: true, // 是否支持K线缩放
        supportKlineFootMenu: true, // 是否显示全屏K线菜单栏
        supportGestures: true, // 是否支持手势操作
        showCallAuction: false // 是否展示集合竞价
      },
      /**
       * [graphConfig 绘图参数,实例单独样式时merge使用]
       * 具体可merge参数见src/viewModel/config.js
       * @type {Object}
       */
      graphConfig: {
        /*** 主视图 ***/
        MainContext: {
          size: {
            top: 0.1,
          }
        },
        /*** 辅视图 ***/
        FootContext: {
          size: {
            bottom: 0.2,
          }
          axisX: {
            top: 0.82,
          }
        },
        Content: {
          drawTitle: false,
        },
      },
      touchMove: function(data) {
        console.log(data)
      },
      tapTrendJZ: function(data) {
        console.log(data)
      },
    }
  },
  components: {QuoteView},
}
</script>