首页 > 小程序教程 > 微信小程序股市时间设置k线图设计制作开发教程

微信小程序股市时间设置k线图设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序股市时间设置k线图设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
    <view class="tab">
        <text class="{{tabName == 'dk' ? 'current': ''}}" data-type="dk" bindtap="tabChart">日K</text>
        <text class="{{tabName == 'wk' ? 'current': ''}}" data-type="wk" bindtap="tabChart">周K</text>
        <text class="{{tabName == 'mk' ? 'current': ''}}" data-type="mk" bindtap="tabChart">月K</text>
        <picker mode="selector" value="{{minIndex}}" range="{{minArray}}"
                class="{{tabName == 'mink' ? 'current': ''}}" data-type="mink" bindchange="tabMinChart">
            <view class="picker">
                {{minArray[minIndex]}}<view class="dropDownIcon"></view>
            </view>
        </picker>
    </view>
    <view class="content tab-content">
        <view class="stock">
            <text>股票:{{stock}} - {{code}}</text>
            <text>时间:{{time}}</text>
            <text>昨收:{{yc}}</text>
        </view>
        <view class="kline-average">
            <text class="ma5">MA5:{{ma5}}</text>
            <text class="ma10">MA10:{{ma10}}</text>
            <text class="ma20">MA20:{{ma20}}</text>
        </view>
        <canvas canvas-id="k-line" class="stage" style="width: 100%; height: 160px;">
        </canvas>
        <view class="kline-average">
            <text class="ma5">MA5:{{ma5b}}</text>
            <text class="ma10">MA10:{{ma10b}}</text>
            <text class="ma20">MA20:{{ma20b}}</text>
        </view>
        <canvas canvas-id="k-line-b" class="stage" style="width: 100%; height: 80px;">
        </canvas>
    </view>
    <view class="btn-area">
        <text class="p text">kl1 render time: {{kl1RenderTime}}ms</text>
        <text class="p text">kl2 render time: {{kl2RenderTime}}ms</text>
    </view>
</view>
 
二、wxss样式文件代码如下:
.kline-average{
    height: 40rpx;
    line-height: 40rpx;
    padding-right: 10rpx;
    text-align: right;
}
.kline-average text{
    font-size: 24rpx;
    margin-left: 40rpx;
}
.ma5 {
    color: #6a6969;
}

.ma10 {
    color: #f69a43;
}

.ma20 {
    color: #edb2eb;
}
.stock{
    padding-bottom: 20rpx;
    font-size: 24rpx;
}
.stock text{
    display: block;
}
三、js页面代码如下:
/**
 * 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]
        });
    }
});

模板简介:该模板名称为【微信小程序股市时间设置k线图设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 27,711次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
表格式简历模板 微信图片 企业网站 微信公众平台 单页式简历模板 html5 微信模板 微信文章 微信素材 自适应
您可能会喜欢的其他模板