<view class="container">
<view class="tab">
<text class="{{tabName == 'ts' ? 'current': ''}}" data-type="ts" bindtap="tabChart">分时</text>
<text class="{{tabName == 'ts5' ? 'current': ''}}" data-type="ts5" bindtap="tabChart">五日</text>
</view>
<view class="content tab-content" wx:if="{{tabName == 'ts'}}">
<view class="stock">
<text>股票：{{stock}} - {{code}}</text>
<text>时间：{{time}}</text>
<text>昨收：{{yc}}</text>
</view>
<view class="canvas-wrap">
<canvas canvas-id="time-sharing" class="stage" style="width: 100%; height: 200px">
</canvas>
<canvas canvas-id="time-sharing-b" class="stage" style="width: 100%; height: 80px">
</canvas>
<canvas canvas-id="time-sharing-axis" class="stage axis-stage" style="width: 100%; height: 280px" bindlongtap="axisStart" bindtouchmove="axisMove" bindtouchend="axisStop">
</canvas>
</view>
<view class="btn-area">
<text class="btn" hover-class="btn-hover" bindtap="reset">重置</text>
<text class="btn" hover-class="btn-hover" bindtap="dynamic">模拟动态变化</text>
<picker class="btn" mode="selector" value="{{timerIndex}}" range="{{timerArray}}" bindchange="bindTimeChange">
<view class="picker">
动态变更频率: {{timerArray[timerIndex]}}
</view>
</picker>
<text class="p text">data index: {{dataIndex}}</text>
<text class="p text">ts1 render time: {{ts1RenderTime}}ms</text>
<text class="p text">ts2 render time: {{ts2RenderTime}}ms</text>
<text class="p text">本demo的模拟数据前16条是未开盘的数据，实际情况请根据各业务接口变化，metaData1()和metaData2()方法同理。</text>
</view>
</view>
<view class="content tab-content" wx:if="{{tabName == 'ts5'}}">
<view class="stock">
<text>股票名称：{{stock}} - {{code}}</text>
<text>时间：{{time}}</text>
<text>昨收：{{yc}}</text>
</view>
<canvas canvas-id="time-sharing-5day" class="stage" style="width: 100%; height: 200px">
</canvas>
<canvas canvas-id="time-sharing-5day-b" class="stage" style="width: 100%; height: 80px">
</canvas>
<view class="btn-area">
<text class="p text">ts1 render time: {{ts1RenderTime}}ms</text>
<text class="p text">ts2 render time: {{ts2RenderTime}}ms</text>
<text class="p text">5日图相当于5天的分时图连接起来，所以其实还是分时图,只有时间轴上有区别。</text>
</view>
</view>
</view>
|
.stock{
padding-bottom: 20rpx;
font-size: 24rpx;
}
.stock text{
display: block;
}
.canvas-wrap{
position: relative;
}
.canvas-wrap .axis-stage{
position: absolute;
top: 0;
left: 0;
}
|
/**
* Created by ChenChao on 2016/9/27.
*/
var app = getApp();
var storage = require('../../utils/storage');
var ts = require('../../utils/wxChart/time-sharing');
var axisShow = require('../../utils/wxChart/axis-show');
var ts1, ts2; //分时
var tsd51, tsd52; //五日
var tsAxisShow; //分时手势坐标
var getOptionTimeSharing1 = function (type, width) {
return {
name: type || 'time-sharing',
width: width || 'auto',
height: 200,
axis: {
row: 4,
col: 4,
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
color: '#cdcdcd'
},
xAxis: {
data: []
},
yAxis: [
{
type: 'line',
lineColor: '#2F6098',
background: 'rgba(53,125,222,0.1)',
/*background: function () { //渐变背景在IOS上会影响均线颜色，这个应该是小程序canvas的bug
return ['rgba(53,125,222,0.3)', 'rgba(0,0,0,0)'];
},*/
data: []
},
{
type: 'line',
lineColor: '#A96F3E',
data: []
}
],
callback: function (time) {
var page = getCurrentPages();
page = page[page.length - 1];
page.setData({
ts1RenderTime: time
});
}
};
};
var getOptionTimeSharing2 = function (type, width) {
return {
name: type || 'time-sharing-b',
width: width || 'auto',
height: 80,
axis: {
row: 2,
col: 4,
showEdg: true,
showX: true,
showY: true,
paddingTop: 5,
paddingBottom: 14,
paddingLeft: 0,
paddingRight: 0,
color: '#cdcdcd'
},
xAxis: {
times: ['09:30', '15:00'],
data: []
},
yAxis: [
{
type: 'bar',
color: [],
data: [],
showMax: true
}
],
callback: function (time) {
var page = getCurrentPages();
page = page[page.length - 1];
page.setData({
ts2RenderTime: time
});
}
};
};
var getOptionTimeSharingAxis = function () {
return {
};
};
var timer = null;
Page({
data: {
tabName: '',
ts: {},
ts5: {},
stock: '',
code: '',
time: '',
yc: '',
dataIndex: 0,
ts1RenderTime: 0,
ts2RenderTime: 0,
timerIndex: 4,
timerArray: ['50ms', '100ms', '200ms', '500ms', '1000ms'],
isShowAxis: false
},
onLoad: function () {
var tsData = storage.getTsData();
var ts5Data = storage.getTs5Data();
this.setData({
dataIndex: 0,
ts: tsData,
ts5: ts5Data
});
this.tabChart({
target: {
dataset: {
type: 'ts'
}
}
});
},
onHide: function() {
clearInterval(timer);
},
tabChart: function (e) {
this.clearTimer();
var type = e.target.dataset.type;
var data = this.data[type];
this.setData({
tabName: type,
stock: data.name,
code: data.code,
time: data.info.time,
yc: data.info.yc
});
this['init-' + type]();
},
'init-ts': function () {
var data = this.data.ts;
ts1 = ts('time-sharing').init(getOptionTimeSharing1());
this.renderTs1(data);
ts2 = ts('time-sharing-b').init(getOptionTimeSharing2());
this.renderTs2(data);
tsAxisShow = axisShow('time-sharing-axis', {
//todo: 配置项
type: 'ts',
height: 280,
width: 'auto',
maxY: 100,
minY: 0
});
tsAxisShow.init();
},
'init-ts5': function () {
var data = this.data.ts5;
tsd51 = ts('time-sharing-5day').init(getOptionTimeSharing1('time-sharing-5day'));
tsd52 = ts('time-sharing-5day-b').init(getOptionTimeSharing2('time-sharing-5day'));
tsd51.metaData1(data, getOptionTimeSharing1('time-sharing-5day'));
tsd51.draw();
tsd52.metaData2(data, getOptionTimeSharing2('time-sharing-5day'));
tsd52.draw();
},
renderTs1: function (data) {
ts1.metaData1(data, getOptionTimeSharing1());
ts1.draw();
},
renderTs2: function (data) {
ts2.metaData2(data, getOptionTimeSharing2());
ts2.draw();
},
clearTimer: function () {
clearInterval(timer);
this.setData({
dataIndex: 0
});
},
reset: function () {
this.clearTimer();
var data = storage.getTsData();
this.renderTs1(data);
this.renderTs2(data);
},
dynamic: function () {
var that = this;
var data = storage.getTsData();
var origin = data.data.slice(0);
var index = 0;
var times = [50, 100, 200, 500, 1000];
clearInterval(timer);
timer = setInterval(function () {
index += 1;
if(index > 241 + 16){
clearInterval(timer);
return;
}
data.data = origin.slice(0, index);
that.renderTs1(data);
that.renderTs2(data);
that.setData({
dataIndex: index
});
}, times[this.data.timerIndex]);
},
bindTimeChange: function (e) {
var index = e.detail.value;
this.setData({
timerIndex: index === '' ? 4 : index
});
this.dynamic();
},
axisStart: function (e) {
var x = e.touches[0].x;
var y = e.touches[0].y;
this.data.isShowAxis = true;
tsAxisShow.start(x, y);
},
axisMove: function (e) {
if(this.data.isShowAxis){
var x = e.touches[0].x;
var y = e.touches[0].y;
tsAxisShow.move(x, y);
}
},
axisStop: function () {
this.data.isShowAxis = false;
tsAxisShow.stop();
}
});
|
模板简介：该模板名称为【微信小程序股市分时图demo设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
