@winner-fed/quote-graph

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;  // 资金流向
       * const RSI_KEY = 128;  // RSI
       * const BRAR_KEY = 256; // BRAR
       * const DPO_KEY = 512; // DPO
       * const CYC_KEY = 1024; // CYC
       * const EXPMA_KEY = 2048; // EXPMA
       * const ASI_KEY = 4096; // ASI
       * const WVAD_KEY = 8192; // WVAD
       */
      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>

主要业务逻辑相关源码 目录结构

src
│  build.js
│  main.js
│  main.vue
│
├─assets
│  ├─image
│  │      dianbo.png
│  │      electric.png
│  │      fullscreen.png
│  │      k_enlarge_pink.png
│  │      k_narrow_pink.png
│  │      load.gif
│  │
│  └─style
│          index.scss
│          mixin.scss
│
├─controller
│  │  cache.js
│  │  index.js
│  │  util.js
│  │
│  └─datamanager
│      │  api.js // 管理网络API请求
│      │  config.js // 管理API请求相关配置项
│      │  index.js // 负责业务逻辑的管理，处于db的下游
│      │
│      └─database
│              basedb.js // 所有db的基类（以下的klinedb、trenddb）
│              chainmap.js // 链式操作函数集合
│              datamap.js // 封装一下Map的set,get,clear等操作，以便后续进行扩展
│              klinedb.js // 保存各个K线的除复权数据
│              trenddb.js // 保存除kline除复权以外的其他数据
│
├─math
│  ├─matrix
│  │      index.js
│  │
│  └─matrix2d
│          index.js
│
├─util
│      index.js
│
├─view
│  │  class.js
│  │
│  ├─script
│  │      index.js
│  │      side.js
│  │      tab.js
│  │
│  └─vue
│          index.vue
│          side.vue
│          tab.vue
│
└─viewModel
    │  config.js
    │  index.js
    │
    ├─additionalcontext
    │      context.js
    │      volumnpie.js
    │
    ├─basecomponent
    │      index.js
    │
    ├─basecontext
    │      index.js
    │      package.json
    │
    ├─component
    │      index.js
    │      package.json
    │
    ├─dectorator // 修饰器
    │  ├─checkauthdectorator
    │  │      index.js
    │  │
    │  ├─footdectorator
    │  │      index.js
    │  │
    │  ├─klineavgdectorator
    │  │      index.js
    │  │
    │  ├─klinefootdectorator
    │  │      index.js
    │  │
    │  ├─klinejqjzdectorator
    │  │      index.js
    │  │
    │  ├─klinekddectorator
    │  │      index.js
    │  │
    │  ├─klineswandectorator
    │  │      index.js
    │  │      
    │  ├─maindectorator
    │  │      index.js
    │  │
    │  ├─trendfivefootdectorator
    │  │      index.js
    │  │
    │  ├─trendjqjzdectorator
    │  │      index.js
    │  │
    │  └─trendonefootdectorator
    │          index.js
    │
    ├─electric
    │      index.js
    │
    ├─kline
    │      index.js
    │
    ├─klineene
    │      index.js
    │
    ├─klinekdj
    │      index.js
    │
    ├─klineturnover
    │      index.js
    │
    ├─macd
    │      index.js
    │
    ├─trend
    │      index.js
    │
    ├─trendcapital
    │      index.js
    │
    ├─trendfive
    │      index.js
    │
    ├─trendfiveturnover
    │      index.js
    │
    ├─trendfundflow
    │      index.js
    │
    ├─trendone
    │      index.js
    │
    ├─trendoneturnover
    │      index.js
    │
    └─trendturnover
            index.js