微信小程序demo推荐：股票；动态分时图、K线图
说明[*]本示例K线交易量（底部柱子）的颜色变化规则为：当前现价（收盘价） - 前一条现价（收盘价） 决定的，大于等于0为红（涨），小于0为绿（跌）。这里可能有的计算规则是以交易量来计算的。
[*]数据为真实接口数据，处理后存储在模块里。由于使用者不同，接口数据格式肯定有不同，所以绘前的metadata1()和metadata2()方法为数据转化接口。
[*]js设置的canvas大小实际上是以px为单位的，100%宽度的可设置'auto'，如页面中要指定canvas大小，则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档：WXSS尺寸单位
[*]正在施工中：在图上手势移动显示坐标线和数据明细。
文档配置文档参考：wiki
<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: ,
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.setData({
kl1RenderTime: time
});
}
};
};
var getOptionKline2 = function (type) {
return {
name: type || 'dk',
width: 'auto',
height: 80,
average: ,
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.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();
}
}();
};
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();
}
}();
};
var typeList = ;
var minType = type + '-' + typeList;
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.dataShow;
ma10Arr = yAxis1.dataShow;
ma20Arr = yAxis1.dataShow;
ma5bArr = yAxis2.dataShow;
ma10bArr = yAxis2.dataShow;
ma20bArr = yAxis2.dataShow;
this.showLastAverage();
},
showLastAverage: function () {
this.setData({
ma5: ma5Arr,
ma10: ma10Arr,
ma20: ma20Arr,
ma5b: ma5bArr,
ma10b: ma10bArr,
ma20b: ma20bArr
});
}
});
</font></font>
**** Hidden Message *****
感谢楼主分享 回复就能查看了吗 OKOKOK!OKOKOKOK! 我擦 太棒了 看看好不好用吧 加油 OK！！！！！！！！！！！！！！！！ 撒打发萨芬撒打发和 666666666666666666666 本帖最后由 wh0822 于 2019-8-28 16:24 编辑
这个真的很厉害了，很实用PS下载下来学习一下
页:
[1]
2