0.2.0 • Published 5 years ago
dzhyun-kchart v0.2.0
dzhyun-kchart
参考 https://github.com/chxj1992/kline 基于大智慧公司业务实现的PC端绘图组件。
注意：此组件依赖于dzhyunjs获取数据，必须事先配置好vue插件
dzhyun-kline
绘制k线图
props
| 属性 | 说明 | 类型 | 默认值 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| obj | 股票代码，必须 | String | 无 | |||||||||||||||
| period | k线周期，可选项[1min | 5min | 15min | 30min | 60min | 1day | week | month | season | halfyear | year] | String | 无 | |||||
| currentIndics | 当前选择的指标，可选项[NONE | MACD | KDJ | RSI] | String | NONE | ||||||||||||
| mIndic | 主指标，可选项[NONE | MA] | String | MA | ||||||||||||||
| theme | 主题颜色，可选项[Dark | Light | Custom] | String | Dark | |||||||||||||
| themes | 自定义主题配置 | Object | {} | |||||||||||||||
| reverseColor | 是否反色，true表示红涨绿跌，false表示绿涨红跌 | Boolean | true | |||||||||||||||
| pricePrecision | 价格小数位数 | Number | 2 | |||||||||||||||
| split | 除权标记，0(不复权),1(前复权),2(后复权) | Number | 1 | |||||||||||||||
| drawingTool | 画图工具，初始化时必须为光标或者十字光标，可选项[Cursor光标 | CrossCursor十字光标 | SegLine线段 | StraightLine直线 | RayLine射线 | ArrowLine箭头 | HoriSegLine水平线段 | HoriStraightLine水平直线 | HoriRayLine水平射线 | VertiStraightLine垂直直线 | PriceLine价格线 | TriParallelLine价格通道线 | BiParallelLine平行直线 | BiParallelRayLine平行射线 | DrawFibRetrace斐波纳契回调 | DrawFibFans斐波纳契扇形] | String | CrossCursor |
| defaultDrawingTool | 默认画线工具，可选项[Cursor | CrossCursor] | String | CrossCursor | ||||||||||||||
| toolInfos | 缓存的画线工具的信息,格式为{1min: {}, 5min: {}} | Object | {} |
events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-mouse-move | 鼠标移动时选中的数据 | 选中的的数据 |
| on-tool-change | 使用绘图工具结束后，组件会向外发送此事件重置当前选中的画图工具 | drawingTool的可选项 |
| save-tool-info | 准备保存画线工具的信息,格式{obj: {1min: {}, 5min: {}}} | 无 |
methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| show | 组件mounted后主动调用此方法，开始绘图 | 无 |
| clearTools | 清除当前图表上所有的画图工具 | 无 |
dzhyun-minchart
绘制分时图
props
| 属性 | 说明 | 类型 | 默认值 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| obj | 股票代码，必须 | String | 无 | |||||||||||||||
| theme | 主题颜色，可选项[Dark | Light | Custom] | String | Dark | |||||||||||||
| themes | 自定义主题配置 | Object | {} | |||||||||||||||
| reverseColor | 是否反色，true表示红涨绿跌，false表示绿涨红跌 | Boolean | true | |||||||||||||||
| pricePrecision | 价格小数位数 | Number | 2 | |||||||||||||||
| prefix | 集合竞价标记，0(无集合竞价),1(带集合竞价) | Number | 0 | |||||||||||||||
| ySplitNumber | 分时图主图x轴分割线(水平分割线)的数量 | Number | 0 | |||||||||||||||
| drawingTool | 画图工具，初始化时必须为光标或者十字光标，可选项[Cursor光标 | CrossCursor十字光标 | SegLine线段 | StraightLine直线 | RayLine射线 | ArrowLine箭头 | HoriSegLine水平线段 | HoriStraightLine水平直线 | HoriRayLine水平射线 | VertiStraightLine垂直直线 | PriceLine价格线 | TriParallelLine价格通道线 | BiParallelLine平行直线 | BiParallelRayLine平行射线 | DrawFibRetrace斐波纳契回调 | DrawFibFans斐波纳契扇形] | String | CrossCursor |
| defaultDrawingTool | 默认画线工具，可选项[Cursor | CrossCursor] | String | CrossCursor | ||||||||||||||
| toolInfos | 缓存的画线工具的信息,格式为{} | Object | {} |
events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-mouse-move | 鼠标移动时选中的数据 | 选中的的数据 |
| on-tool-change | 使用绘图工具结束后，组件会向外发送此事件重置当前选中的画图工具 | drawingTool的可选项 |
| save-tool-info | 准备保存画线工具的信息,格式{obj: {}} | 无 |
methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| show | 组件mounted后主动调用此方法，开始绘图 | 无 |
| clearTools | 清除当前图表上所有的画图工具 | 无 |
高清屏适配
在 html文件头部(业务代码之前)引用 hidpi-canvas.js