用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    182

    帖子

    945

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-3-3 15:22:42 柿霖不是林 咫尺尊享 楼主 81191
    说明
    • 本示例K线交易量(底部柱子)的颜色变化规则为:当前现价(收盘价) - 前一条现价(收盘价) 决定的,大于等于0为红(涨),小于0为绿(跌)。这里可能有的计算规则是以交易量来计算的。
    • 数据为真实接口数据,处理后存储在模块里。由于使用者不同,接口数据格式肯定有不同,所以绘前的metadata1()和metadata2()方法为数据转化接口。
    • js设置的canvas大小实际上是以px为单位的,100%宽度的可设置'auto',如页面中要指定canvas大小,则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档:WXSS尺寸单位
    • 正在施工中:在图上手势移动显示坐标线和数据明细。
    文档

    配置文档参考:wiki








    [HTML] 纯文本查看 复制代码
    <font style="color:rgb(51, 51, 51)"><font face="-apple-system, BlinkMacSystemFont,">/**
     * Created by ChenChao on 2016/9/27.
     */
     
    var app = getApp();
    var storage = require('../../utils/storage');
    var kl = require('../../utils/wxChart/k-line');
    var getOptionKline1 = function (type) {
        return {
            name: type || 'dk',
            width: 'auto',
            height: 160,
            average: [5, 10, 20],
            axis: {
                row: 4,
                col: 5,
                showX: false,
                showY: true,
                showEdg: true,
                paddingTop: 0,
                paddingBottom: 1,
                paddingLeft: 0,
                paddingRight: 0,
                color: '#cdcdcd'
            },
            xAxis: {
                data: [],
                averageLabel: []
            },
            yAxis: [],
            callback: function (time) {
                var page = getCurrentPages();
                page = page[page.length - 1];
                page.setData({
                    kl1RenderTime: time
                });
            }
        };
    };
    var getOptionKline2 = function (type) {
        return {
            name: type || 'dk',
            width: 'auto',
            height: 80,
            average: [5, 10, 20],
            axis: {
                row: 1,
                col: 5,
                showX: false,
                showY: true,
                showEdg: true,
                paddingTop: 0,
                paddingBottom: 14,
                paddingLeft: 0,
                paddingRight: 0,
                color: '#cdcdcd'
            },
            xAxis: {
                times: [],
                data: [],
                averageLabel: []
            },
            yAxis: [],
            callback: function (time) {
                var page = getCurrentPages();
                page = page[page.length - 1];
                page.setData({
                    kl2RenderTime: time
                });
            }
        };
    };
    var kLine, kLineB;
    var ma5Arr, ma10Arr, ma20Arr,
        ma5bArr, ma10bArr, ma20bArr;
     
    Page({
        data: {
            ma5: '',
            ma10: '',
            ma20: '',
            ma5b: '',
            ma10b: '',
            ma20b: '',
            tabName: '',
            stock: '',
            code: '',
            time: '',
            yc: '',
            kl1RenderTime: 0,
            kl2RenderTime: 0,
            minIndex: 3,
            minArray: ['5分钟', '15分钟', '30分钟', '60分钟']
        },
        onLoad: function () {
            //默认切换到日K
            this.tabChart({
                target: {
                    dataset: {
                        type: 'dk'
                    }
                }
            });
        },
        tabChart: function (e) {
            var type = e.target.dataset.type;
            var getDataByType = function (type) {
                return {
                    'dk': function () {
                        return storage.getDkData();
                    },
                    'wk': function () {
                        return storage.getWkData();
                    },
                    'mk': function () {
                        return storage.getMkData();
                    }
                }[type]();
            };
            var data = getDataByType(type);
            this.setData({
                tabName: type,
                stock: data.name,
                code: data.code,
                time: data.info.time,
                yc: data.info.yc
            });
            this.draw(data, type);
        },
        tabMinChart: function (e) {
            var type = 'mink';
            var index = e.detail.value;
            index = index=== '' ? 3 : index;
            var getDataByType = function (type) {
                return {
                    'mink-5': function () {
                        return storage.getMin5Data();
                    },
                    'mink-15': function () {
                        return storage.getMin15Data();
                    },
                    'mink-30': function () {
                        return storage.getMin30Data();
                    },
                    'mink-60': function () {
                        return storage.getMin60Data();
                    }
                }[type]();
            };
            var typeList = [5, 15, 30, 60];
            var minType = type + '-' + typeList[index];
            var data = getDataByType(minType);
            this.setData({
                tabName: type,
                minIndex: index,
                stock: data.name,
                code: data.code,
                time: data.info.time,
                yc: data.info.yc
            });
            this.draw(data, minType);
        },
        draw: function (data, type) {
            kLine = kl('k-line').init(getOptionKline1(type));
            kLine.metaData1(data, getOptionKline1(type));
            kLine.draw();
     
            kLineB = kl('k-line-b').init(getOptionKline2(type));
            kLineB.metaData2(data, getOptionKline2(type));
            kLineB.draw();
     
            var yAxis1 = kLine.options.yAxis;
            var yAxis2 = kLineB.options.yAxis;
            ma5Arr = yAxis1[1].dataShow;
            ma10Arr = yAxis1[2].dataShow;
            ma20Arr = yAxis1[3].dataShow;
            ma5bArr = yAxis2[1].dataShow;
            ma10bArr = yAxis2[2].dataShow;
            ma20bArr = yAxis2[3].dataShow;
            this.showLastAverage();
        },
        showLastAverage: function () {
            this.setData({
                ma5: ma5Arr[ma5Arr.length - 1],
                ma10: ma10Arr[ma10Arr.length - 1],
                ma20: ma20Arr[ma20Arr.length - 1],
                ma5b: ma5bArr[ma5bArr.length - 1],
                ma10b: ma10bArr[ma10bArr.length - 1],
                ma20b: ma20bArr[ma20bArr.length - 1]
            });
        }
    });
    </font></font>







    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    感谢楼主分享
    回复就能查看了吗
    OKOKOK!OKOKOKOK!
    我擦 太棒了
    看看好不好用吧
    2017-10-18 14:37:40 qsxtdx 新人求带
    7#
    加油              OK!!!!!!!!!!!!!!!!
    撒打发萨芬撒打发和
    666666666666666666666
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X