查看: 375|回复: 0

股票分时图K线图小程序源码

[复制链接]
发表于 2019-12-9 09:22:43 | 显示全部楼层 |阅读模式
gp.gif


说明


本示例K线交易量(底部柱子)的颜色变化规则为:当前现价(收盘价) – 前一条现价(收盘价) 决定的,大于等于0为红(涨),小于0为绿(跌)。这里可能有的计算规则是以交易量来计算的。


数据为真实接口数据,处理后存储在模块里。由于使用者不同,接口数据格式肯定有不同,所以绘前的metadata1()和metadata2()方法为数据转化接口。


js设置的canvas大小实际上是以px为单位的,100%宽度的可设置’auto’,如页面中要指定canvas大小,则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档:WXSS尺寸单位


正在施工中:在图上手势移动显示坐标线和数据明细。


文档配置文档参考:


1.png


2.png


3.png


代码示例:


  1. <font style="color:rgb(51, 51, 51)"><font face="-apple-system, BlinkMacSystemFont,">/**
  2. * Created by ChenChao on 2016/9/27.
  3. */

  4. var app = getApp();
  5. var storage = require('../../utils/storage');
  6. var kl = require('../../utils/wxChart/k-line');
  7. var getOptionKline1 = function (type) {
  8.     return {
  9.         name: type || 'dk',
  10.         width: 'auto',
  11.         height: 160,
  12.         average: [5, 10, 20],
  13.         axis: {
  14.             row: 4,
  15.             col: 5,
  16.             showX: false,
  17.             showY: true,
  18.             showEdg: true,
  19.             paddingTop: 0,
  20.             paddingBottom: 1,
  21.             paddingLeft: 0,
  22.             paddingRight: 0,
  23.             color: '#cdcdcd'
  24.         },
  25.         xAxis: {
  26.             data: [],
  27.             averageLabel: []
  28.         },
  29.         yAxis: [],
  30.         callback: function (time) {
  31.             var page = getCurrentPages();
  32.             page = page[page.length - 1];
  33.             page.setData({
  34.                 kl1RenderTime: time
  35.             });
  36.         }
  37.     };
  38. };
  39. var getOptionKline2 = function (type) {
  40.     return {
  41.         name: type || 'dk',
  42.         width: 'auto',
  43.         height: 80,
  44.         average: [5, 10, 20],
  45.         axis: {
  46.             row: 1,
  47.             col: 5,
  48.             showX: false,
  49.             showY: true,
  50.             showEdg: true,
  51.             paddingTop: 0,
  52.             paddingBottom: 14,
  53.             paddingLeft: 0,
  54.             paddingRight: 0,
  55.             color: '#cdcdcd'
  56.         },
  57.         xAxis: {
  58.             times: [],
  59.             data: [],
  60.             averageLabel: []
  61.         },
  62.         yAxis: [],
  63.         callback: function (time) {
  64.             var page = getCurrentPages();
  65.             page = page[page.length - 1];
  66.             page.setData({
  67.                 kl2RenderTime: time
  68.             });
  69.         }
  70.     };
  71. };
  72. var kLine, kLineB;
  73. var ma5Arr, ma10Arr, ma20Arr,
  74.     ma5bArr, ma10bArr, ma20bArr;

  75. Page({
  76.     data: {
  77.         ma5: '',
  78.         ma10: '',
  79.         ma20: '',
  80.         ma5b: '',
  81.         ma10b: '',
  82.         ma20b: '',
  83.         tabName: '',
  84.         stock: '',
  85.         code: '',
  86.         time: '',
  87.         yc: '',
  88.         kl1RenderTime: 0,
  89.         kl2RenderTime: 0,
  90.         minIndex: 3,
  91.         minArray: ['5分钟', '15分钟', '30分钟', '60分钟']
  92.     },
  93.     onLoad: function () {
  94.         //默认切换到日K
  95.         this.tabChart({
  96.             target: {
  97.                 dataset: {
  98.                     type: 'dk'
  99.                 }
  100.             }
  101.         });
  102.     },
  103.     tabChart: function (e) {
  104.         var type = e.target.dataset.type;
  105.         var getDataByType = function (type) {
  106.             return {
  107.                 'dk': function () {
  108.                     return storage.getDkData();
  109.                 },
  110.                 'wk': function () {
  111.                     return storage.getWkData();
  112.                 },
  113.                 'mk': function () {
  114.                     return storage.getMkData();
  115.                 }
  116.             }[type]();
  117.         };
  118.         var data = getDataByType(type);
  119.         this.setData({
  120.             tabName: type,
  121.             stock: data.name,
  122.             code: data.code,
  123.             time: data.info.time,
  124.             yc: data.info.yc
  125.         });
  126.         this.draw(data, type);
  127.     },
  128.     tabMinChart: function (e) {
  129.         var type = 'mink';
  130.         var index = e.detail.value;
  131.         index = index=== '' ? 3 : index;
  132.         var getDataByType = function (type) {
  133.             return {
  134.                 'mink-5': function () {
  135.                     return storage.getMin5Data();
  136.                 },
  137.                 'mink-15': function () {
  138.                     return storage.getMin15Data();
  139.                 },
  140.                 'mink-30': function () {
  141.                     return storage.getMin30Data();
  142.                 },
  143.                 'mink-60': function () {
  144.                     return storage.getMin60Data();
  145.                 }
  146.             }[type]();
  147.         };
  148.         var typeList = [5, 15, 30, 60];
  149.         var minType = type + '-' + typeList[index];
  150.         var data = getDataByType(minType);
  151.         this.setData({
  152.             tabName: type,
  153.             minIndex: index,
  154.             stock: data.name,
  155.             code: data.code,
  156.             time: data.info.time,
  157.             yc: data.info.yc
  158.         });
  159.         this.draw(data, minType);
  160.     },
  161.     draw: function (data, type) {
  162.         kLine = kl('k-line').init(getOptionKline1(type));
  163.         kLine.metaData1(data, getOptionKline1(type));
  164.         kLine.draw();

  165.         kLineB = kl('k-line-b').init(getOptionKline2(type));
  166.         kLineB.metaData2(data, getOptionKline2(type));
  167.         kLineB.draw();

  168.         var yAxis1 = kLine.options.yAxis;
  169.         var yAxis2 = kLineB.options.yAxis;
  170.         ma5Arr = yAxis1[1].dataShow;
  171.         ma10Arr = yAxis1[2].dataShow;
  172.         ma20Arr = yAxis1[3].dataShow;
  173.         ma5bArr = yAxis2[1].dataShow;
  174.         ma10bArr = yAxis2[2].dataShow;
  175.         ma20bArr = yAxis2[3].dataShow;
  176.         this.showLastAverage();
  177.     },
  178.     showLastAverage: function () {
  179.         this.setData({
  180.             ma5: ma5Arr[ma5Arr.length - 1],
  181.             ma10: ma10Arr[ma10Arr.length - 1],
  182.             ma20: ma20Arr[ma20Arr.length - 1],
  183.             ma5b: ma5bArr[ma5bArr.length - 1],
  184.             ma10b: ma10bArr[ma10bArr.length - 1],
  185.             ma20b: ma20bArr[ma20bArr.length - 1]
  186.         });
  187.     }
  188. });
  189. </font>
复制代码
源码下载:


游客,如果您要下载源码或者查看隐藏内容请回复



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表