Skip to content

N
NodeJS_629197

weixin_47563380 / NodeJS_629197
与 Fork 源项目一致

Fork自 inscode / NodeJS

通知 1
Star 0
Fork 0
N
NodeJS_629197
提交 de7eb7d3 编写于 作者: W weixin_47563380
浏览文件
操作

Tue Aug 27 13:49:00 CST 2024 inscode

上级 b1040fdf
隐藏空白更改
内联 并排
Showing with 4725 addition and 39 deletion
test/app.js
浏览文件 @ de7eb7d3
// app.js
App({ App({
onLaunch() { globalData: {
// 展示本地存储能力 navHeight: 0,
const logs = wx.getStorageSync('logs') || [] navTop: 0,
logs.unshift(Date.now()) windowHeight: 0
wx.setStorageSync('logs', logs) },
onLaunch: function (options) {
// 登录 var _this = this;
wx.login({ let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => { success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId //导航高度
} let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop; //navTop
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
},
}) })
}, },
globalData: { })
userInfo: null \ No newline at end of file
}
})
test/app.json
浏览文件 @ de7eb7d3
{ {
"pages": [ "pages": [
"pages/test5/test5", "pages/testnav/testnav",
"pages/test4/test4", "components/customtabbar/index",
"pages/test3/test3", "pages/testtar/testtar",
"pages/test2/test2", "pages/message/message",
"pages/test1/test1", "pages/home/home",
"pages/test/test", "pages/test7/test7",
"pages/index/index", "pages/quxiantu1/quxiantu1",
"pages/logs/logs" "pages/contact/contact",
], "pages/mulbutton/mulbutton",
"window": { "pages/testview/testview",
"navigationBarTextStyle": "black", "pages/checkbox/checkbox",
"navigationBarTitleText": "林涛测试用", "pages/quxiantu/quxiantu",
"navigationBarBackgroundColor": "#ffffff" "pages/droplist/droplist",
}, "pages/perinfochart/perinfochart",
"style": "v2", "pages/test10/test10",
"componentFramework": "glass-easel", "pages/test9/test9",
"sitemapLocation": "sitemap.json", "pages/test8/test8",
"lazyCodeLoading": "requiredComponents" "pages/test6/test6",
} "pages/test5/test5",
"pages/test4/test4",
"pages/test3/test3",
"pages/test2/test2",
"pages/test1/test1",
"pages/test/test",
"pages/index/index",
"pages/productSearch/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "林涛测试用",
"navigationBarBackgroundColor": "#ffffff"
},
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/icon_API.png",
"selectedIconPath": "/images/icon_API_HL.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/icon_API.png",
"selectedIconPath": "/images/icon_API_HL.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/icon_API.png",
"selectedIconPath": "/images/icon_API_HL.png"
}
]
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
\ No newline at end of file
test/components/footerbuton/footerbutton.js 0 → 100644
浏览文件 @ de7eb7d3
// components/footerbutton.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleClick: function (e) {
const index = e.currentTarget.dataset.index;
// 这里可以添加点击按钮时的逻辑
console.log('按钮被点击了:' + index);
this.triggerEvent('navigatetonewpage', { url: '/pages/home/home' });
// 如果需要向父页面传递数据或事件，可以使用this.triggerEvent('eventName', detail)
}
}
})
\ No newline at end of file
test/components/footerbuton/footerbutton.json 0 → 100644
浏览文件 @ de7eb7d3
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
test/components/footerbuton/footerbutton.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--components/footerbutton.wxml-->
<text>components/footerbutton.wxml</text>
<view class="footer-button">
<button bindtap="handleClick">点击我</button>
</view>
\ No newline at end of file
test/components/footerbuton/footerbutton.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* components/footerbutton.wxss */
.footer-button {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 50px;
background-color: #1aad19;
color: #ffffff;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
\ No newline at end of file
test/components/mytabbar/mytabbar.json.js 0 → 100644
浏览文件 @ de7eb7d3
// components/mytabbar/mytabbar.json.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/components/mytabbar/mytabbar.json.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--components/mytabbar/mytabbar.json.wxml-->
<text>components/mytabbar/mytabbar.json.wxml</text>
\ No newline at end of file
test/custom-tab-bar/index.ts 0 → 100644
浏览文件 @ de7eb7d3
// index.ts
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [
{
"pagePath": "/pages/home/home",
"iconPath": "/image/icon_component.png",
"selectedIconPath": "/image/icon_component_HL.png",
"text": "首页"
},
{
"pagePath": "/pages/calender/calender",
"iconPath": "/image/icon_API.png",
"selectedIconPath": "../image/icon_API_HL.png",
"text": "日历"
},
{
"pagePath": "/pages/my/my",
"iconPath": "/image/icon_API.png",
"selectedIconPath": "/image/icon_API_HL.png",
"text": "我的"
}
]
},
attached() {
},
methods: {
switchTab(e: any) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url: url })
this.setData({
selected: data.index
})
}
}
})
test/custom-tab-bar/index.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
<view class="tab-bar-border"></view>
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<image class="tab-bar-item-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="tab-bar-item-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
</view>
</view>
test/custom-tab-bar/index.wxss 0 → 100644
浏览文件 @ de7eb7d3
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item-image {
width: 27px;
height: 27px;
}
.tab-bar-item-view {
font-size: 10px;
}
test/pages/checkbox/checkbox.js 0 → 100644
浏览文件 @ de7eb7d3
const app = getApp()
Page({
data: {
//设置单选内容
items: [{
name: 'male',
value: '男',
checked: "true" //设置默认值
},
{
name: 'famale',
value: '女'
},
]
},
//单选
radioChange: function (e) {
//获取单选数据
console.log(e.detail.value) //输出的是{{item.name}}的值
// var 示例
if (true) {
var a = 10;
}
console.log(a); // 输出 10，因为 var 声明的变量具有函数作用域（在这里是全局作用域）
// let 示例
if (true) {
let b = 20;
console.log(b); // 报错 ReferenceError: b is not defined，因为 let 声明的变量具有块级作用域,只在大括号内有用。
}
// const 示例
const PI = 3.14;
//PI = 3.14159; // 报错 TypeError: Assignment to constant variable.，因为 const 声明的常量不能被重新赋值
},
})
\ No newline at end of file
test/pages/checkbox/checkbox.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/checkbox/checkbox.wxml 0 → 100644
浏览文件 @ de7eb7d3
<view class="pop_line">
<view class="pop_left">性别</view>
<view class="pop_right">
<radio-group bindchange="radioChange">
<label wx:for-items="{{items}}" wx:key="index">
<radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.name}}" checked="{{item.checked}}" />
{{item.value}}
</label>
</radio-group>
</view>
</view>
\ No newline at end of file
test/pages/checkbox/checkbox.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/checkbox/checkbox.wxss *//* 行信息 */
.pop_line{
display: flex;
width:90%;
margin:4%;
}
.pop_left{
width:30%;
}
.pop_right{
width:70%;
text-align: left;
}
\ No newline at end of file
test/pages/contact/contact.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/contact/contact.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/contact/contact.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/contact/contact.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/contact/contact.wxml-->
<text>pages/contact/contact.wxml</text>
\ No newline at end of file
test/pages/contact/contact.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/contact/contact.wxss */
\ No newline at end of file
test/pages/droplist/droplist.js 0 → 100644
浏览文件 @ de7eb7d3
Page({
/**
* 页面的初始数据
*/
data: {
tihuoWay: "门店自提",
select: false,
},
// swiperChange: function (e) {
// // console.log(e)
// if (e) {
// let current = e.detail.current;
// let source = e.detail.source;
// if (source === "touch") {
// this.setData({
// index: current,
// });
// }
// }
// console.log(this.data.index)
// },
bindShowMsg() {
this.setData({
select: !this.data.select,
});
},
mySelect(e) {
var name = e.currentTarget.dataset.name;
this.setData({
tihuoWay: name,
select: false,
});
},
});
test/pages/droplist/droplist.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/droplist/droplist.wxml 0 → 100644
浏览文件 @ de7eb7d3
<view class='list-msg'>
<view>下拉框</view>
<view class='list-msg2' bindtap='bindShowMsg'>
<text>{{tihuoWay}}</text>
</view>
<view class="select_box" wx:if="{{select}}">
<view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>
<view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>
<view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>
</view>
</view>
<text>文件基本原理在</text>
<!-- <view class='list-msg'>
<view class="select_box" wx:if="{{select}}">
<view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>
<view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>
<view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>
</view>
</view> -->
test/pages/droplist/droplist.wxss 0 → 100644
浏览文件 @ de7eb7d3
.list-msg {
display: flex;
padding: 0 20rpx;
background-color: #fff;
position: relative;
}
.list-msg1 {
height: 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.list-msg .list-msg2 {
height: 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
padding: 0 10rpx;
}
.select_box {
background-color: #eee;
padding: 0 10rpx;
width: 93%;
position: absolute;
top: 130rpx;
z-index: 1;
overflow: hidden;
animation: myfirst 0.5s;
}
.select_one {
height: 60rpx;
line-height: 60rpx;
border-bottom: 1px solid #ccc;
}
test/pages/home/home.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
},
toTestnav(){
wx.navigateTo({
url: '/pages/testnav/testnav',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/home/home.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/home/home.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view bind:tap="toTestnav">跳转到toTestnav</view>
\ No newline at end of file
test/pages/home/home.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/home/home.wxss */
\ No newline at end of file
test/pages/message/message.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/message/message.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/message/message.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/message/message.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text>
\ No newline at end of file
test/pages/message/message.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/message/message.wxss */
\ No newline at end of file
test/pages/perinfochart/perinfochart.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/experience/tests/tests.js
let curve = {
mW: 345, //canvas宽
mH: 250, //canvas高
mCenter: 180, //中心点
hCenter: 125, //中心点
points: []
};
Page({
/**
* 页面的初始数据
*/
data: {
// 数字提示
numShiow: false,
tipLeft: 10, //提示的x坐标
tipHeight: 10, //提示线条的高度
curveColText: ['140','120','100', '80', '60', '40', '20', '0'], //y轴
// 主要数据
curve: {
bgColor: "#ffffff",
date: ["09-08", "09-09", "09-11", "09-12", "09-14", "09-16", "09-17", "09-18", "09-28"],
lineColor: "#050505",
list: [62, 67, 76, 70, 76, 85, 85, 88, 57],
name: "血压",
xData: [],
},
tipIndex: 0,
whatShow: false,
getshow: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let {curveColText } = this.data //y坐标
let {bgColor,date,lineColor,list,xData } = this.data.curve //y坐标
let curveCanvas = wx.createCanvasContext('curveCanvas');
let lines = wx.createCanvasContext('lines');
this.drawLines(list, lines);
this.drawCurve(curveCanvas, curveColText, date, list, xData, lineColor, bgColor);
},
// gundong
scrollCanvas: function (e) {
console.log(e);
let index = e.currentTarget.dataset.index
var canvasLen = e.detail.scrollLeft;
this.setData({
indexScroll: index,
canvasLen: canvasLen
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
// 获取坐标
getZuoBiao(e) {
let indexs = e.currentTarget.dataset.indexs
let index = e.target.dataset.index
let x = e.detail.x
this.setData({
tipIndexs: indexs,
tipIndex: index
})
console.log(e)
let tipHeight =this.data.curve.xData[index].y
let tipLeft =this.data.curve.xData[index].x
console.log('x坐标',x)
console.log(tipHeight)
this.setData({
numShiow: true,
tipLeft:tipLeft-10,
tipHeight:tipHeight
})
let score = this.data.curve.list[index]
console.log(this.data.curve.list[index])
console.log(this.data.curve.date[index])
this.setData({
score: score,
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
//
// 曲线
drawCurve(curveCtx, curveColText, curveText, curveData, xData, LineColor, colorEnd) {
this.drawLineBg(curveCtx); //画横纵坐标框架
this.drawLineColText(curveColText, curveCtx); //绘制纵坐标文字
this.drawLineRowText(curveText, curveCtx, xData); //绘制横坐标文字
this.drawCurveCtx(curveData, curveCtx, xData, LineColor, colorEnd); //绘制曲线
curveCtx.draw();
},
// 阴影
drawLines(curveData, curveCtx) {
this.drawCurveCtxs(curveData, curveCtx); //绘制曲线
curveCtx.draw();
},
drawCurveCtx(mData, lineCtx, xData, LineColor, colorEnd) {
curve.points = [];
for (let i = 0; i < mData.length; i++) {
curve.points.push({
x: 29.5 + i * 52,
y: 200 - mData[i] / 100 * 150
});
}
this.drawCurvePath(curve.points, lineCtx, LineColor, colorEnd);
// 获取y轴做线条高度
curve.points.forEach((v, i) => {
xData[i].y = v.y
})
},
// 阴影
drawCurveCtxs(mData, lineCtx) {
curve.points = [];
for (let i = 0; i < mData.length; i++) {
curve.points.push({
x: 29.5 + i * 52,
y: 200 - mData[i] / 100 * 150
});
}
this.drawCurvePaths(curve.points, lineCtx);
},
// 绘制曲线背景
drawCurvePath(path, ctx, LineColor, colorEnd) {
var point = getControlPoint(path);
ctx.beginPath();
const grd = ctx.createLinearGradient(174, 180, 200, 0);
grd.addColorStop(0, '#ffffff');//曲线下部背景色
//grd.addColorStop(0.8, colorEnd);
//grd.addColorStop(1, colorEnd);
ctx.setFillStyle(grd);
ctx.setGlobalAlpha(0.8);
ctx.beginPath();
ctx.moveTo(29, 200);
ctx.lineTo(curve.points[0].x, curve.points[0].y);
var int = 0;
for (let i = 0; i < curve.points.length; i++) {
if (i == 0) {
ctx.quadraticCurveTo(point[0].x, point[0].y, curve.points[1].x, curve.points[1].y);
int = int + 1;
} else if (i < curve.points.length - 2) {
ctx.bezierCurveTo(point[int].x, point[int].y, point[int + 1].x, point[int + 1].y, curve.points[i + 1].x, curve.points[i + 1].y);
int += 2;
} else if (i == curve.points.length - 2) {
ctx.quadraticCurveTo(point[point.length - 1].x, point[point.length - 1].y, curve.points[curve.points.length - 1].x, curve.points[curve.points.length - 1].y);
}
}
ctx.lineTo(curve.points[curve.points.length - 1].x, 200);
ctx.fill();
ctx.closePath();
//this.drawCurveSign(point, ctx, LineColor)
this.drawCurveSign(point, ctx, '#000000')//曲线的颜色。#000000是黑色。
},
// 绘制点加线
drawCurveSign(point, ctx, LineColor) {
// 绘制线
ctx.beginPath();
//ctx.setStrokeStyle(LineColor);
ctx.setStrokeStyle('#000000');
ctx.setGlobalAlpha(1);
ctx.setLineWidth(4);
var int = 0;
ctx.moveTo(curve.points[0].x - 20, curve.points[0].y);
for (var i = 0; i < curve.points.length; i++) {
if (i == 0) {
ctx.quadraticCurveTo(point[0].x, point[0].y, curve.points[1].x, curve.points[1].y);
int = int + 1;
} else if (i < curve.points.length - 2) {
ctx.bezierCurveTo(point[int].x, point[int].y, point[int + 1].x, point[int + 1].y, curve.points[i + 1].x, curve.points[i + 1].y);
int += 2;
} else if (i == curve.points.length - 2) {
ctx.quadraticCurveTo(point[point.length - 1].x, point[point.length - 1].y, curve.points[curve.points.length - 1].x, curve.points[curve.points.length - 1].y);
}
}
ctx.stroke();
// 绘制点
// ctx.beginPath();
// ctx.setGlobalAlpha(1);
// for (let i = 0; i < curve.points.length; i++) {
// ctx.beginPath();
// ctx.arc(curve.points[i].x, curve.points[i].y, 5, 0, 2 * Math.PI);
// console.log('点',curve.points[i].x, curve.points[i].y, 5, 0, 2 * Math.PI)
// ctx.setFillStyle("#3388FF");
// ctx.fill();
// ctx.closePath();
// }
},
// 阴影
// 绘制曲线背景
drawCurvePaths(path, ctx) {
var point = getControlPoint(path);
ctx.beginPath();
this.drawCurveSigns(point, ctx)
},
drawCurveSigns(point, ctx) {
// 绘制线
ctx.beginPath();
//ctx.setStrokeStyle("rgba(0,0,0,0.05)");
ctx.setStrokeStyle('#ffffff');
// ctx.setStrokeStyle("red");
ctx.setGlobalAlpha(1);
ctx.setLineWidth(4);
var int = 0;
ctx.moveTo(curve.points[0].x - 20, curve.points[0].y);
for (var i = 0; i < curve.points.length; i++) {
if (i == 0) {
ctx.quadraticCurveTo(point[0].x, point[0].y, curve.points[1].x, curve.points[1].y);
int = int + 1;
} else if (i < curve.points.length - 2) {
ctx.bezierCurveTo(point[int].x, point[int].y, point[int + 1].x, point[int + 1].y, curve.points[i + 1].x, curve.points[i + 1].y);
int += 2;
} else if (i == curve.points.length - 2) {
ctx.quadraticCurveTo(point[point.length - 1].x, point[point.length - 1].y, curve.points[curve.points.length - 1].x, curve.points[curve.points.length - 1].y);
}
}
ctx.stroke();
},
// 画横坐标
drawLineBg(lineCtx) {
lineCtx.setStrokeStyle("#ece8d1");//横线颜色。
for (let i = 0; i < 6; i++) {
lineCtx.moveTo(curve.mCenter - 160, 50 + 30 * i);
lineCtx.lineTo(curve.mCenter + 160, 50 + 30 * i);
lineCtx.stroke();
}
},
// 绘制横坐标文字
drawLineRowText(mData, lineCtx, xData) {
console.log('mData:'+mData[1])
lineCtx.setFillStyle("#000000");
lineCtx.setFontSize(12); //设置字体
for (let i = 0; i < mData.length; i++) {
if (mData.length >= 3 && mData[1] != '') {
lineCtx.fillText(mData[i], 20 + i * 49, 220);
xData.push({
tiem: mData[i],
x: 20 + i * 49,
y: 0
})
// lineCtx.fillText(mData[i][1], 15 + i * 65, 235);
} else if (mData[1] == '') {
// 数据小于等于2的时候的坐标
lineCtx.fillText(mData[i], 60 + i * 90, 220);
// lineCtx.fillText(mData[i][1], 35 + i * 80, 235);
xData.push({
tiem: mData[i],
x: 20 + i * 49,
y: 0
})
} else if (mData[2] == '') {
// 数据小于等于1的时候的坐标
lineCtx.fillText(mData[i], 20 + i * 90, 220);
// lineCtx.fillText(mData[i][1], 35 + i * 80, 235);
xData.push({
tiem: mData[i],
x: 20 + i * 49,
y: 0
})
}
}
// this.setData({
// xData: xData
// })
},
// 绘制纵坐标文字
drawLineColText(mData, lineCtx) {
lineCtx.beginPath();
lineCtx.setFillStyle("#000000");
for (let i = 0; i < 6; i++) {
lineCtx.fillText(mData[i], 10, 55 + 30 * i);
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 日历
onDayClick: function (event) {
console.log(event.detail)
wx.showToast({
title: '日期被点击，具体信息请看Console信息',
icon: 'none'
})
},
onRangeComplete: function (event) {
console.log(event.detail)
var begin = new Date(event.detail.begin);
var end = new Date(event.detail.end);
// + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
var begintime = begin.getFullYear() + '-' + (begin.getMonth() + 1) + '-' + begin.getDate();
var endtime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
console.log(begintime)
console.log(endtime)
this.setData({
beginDate: begintime,
endDate: endtime
})
this.getJieGuo(begintime, endtime)
},
onMonthChange: function (event) {
console.log(event.detail)
wx.showToast({
title: '月份变换，具体信息请看Console信息',
icon: 'none'
})
},
})
// quxian
// 折线变曲线
let Vector2 = function (x, y) {
this.x = x;
this.y = y;
};
Vector2.prototype = {
"length": function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
"normalize": function () {
let inv = 1 / this.length() == Infinity ? 0 : 1 / this.length();
return new Vector2(this.x * inv, this.y * inv);
},
"add": function (v) {
return new Vector2(this.x + v.x, this.y + v.y);
},
"multiply": function (f) {
return new Vector2(this.x * f, this.y * f);
},
"dot": function (v) {
return this.x * v.x + this.y * v.y;
},
"angle": function (v) {
return Math.acos(this.dot(v) / (this.length() * v.length())) * 180 / Math.PI;
}
};
function getControlPoint(path) {
let rt = 0.3;
let count = path.length - 2;
let arr = [];
for (let i = 0; i < count; i++) {
let a = path[i];
let b = path[i + 1];
let c = path[i + 2];
let v1 = new Vector2(a.x - b.x, a.y - b.y);
let v2 = new Vector2(c.x - b.x, c.y - b.y);
let v1Len = v1.length();
let v2Len = v2.length();
let centerV = v1.normalize().add(v2.normalize()).normalize();
let ncp1 = new Vector2(centerV.y, centerV.x * -1);
let ncp2 = new Vector2(centerV.y * -1, centerV.x);
if (ncp1.angle(v1) < 90) {
let p1 = ncp1.multiply(v1Len * rt).add(b);
let p2 = ncp2.multiply(v2Len * rt).add(b);
arr.push(p1, p2);
} else {
let p1 = ncp1.multiply(v2Len * rt).add(b);
let p2 = ncp2.multiply(v1Len * rt).add(b);
arr.push(p2, p1);
}
}
return arr;
};
test/pages/perinfochart/perinfochart.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/perinfochart/perinfochart.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/perinfochart/perinfochart.wxml-->
<view class="efficacy">
<!-- 曲线 -->
<view class="chartsBox">
<view style="display:flex;justify-content: space-between;">
<view class="efficacyName" style="color:{{curve.lineColor}}">{{curve.name}}
<view style="background:{{curve.lineColor}}"></view>
</view>
</view>
<view class="canvasBox">
<scroll-view class="temp_day_box" scroll-x bindscroll='scrollCanvas'>
<canvas canvas-id='curveCanvas' id='curveCanvas' class='curveCanvas'> </canvas>
<canvas canvas-id='lines' id='lines' class='lines'> </canvas>
<view class="xCoordinate" bindtap="getZuoBiao" >
<view class="xCoordinateTime{{index}} xCoordinateTime" wx:for="{{curve.date}}" wx:key="index" data-index="{{index}}" >
{{item}}
<!-- 分数提示线 -->
<cover-view class="scoreTip" wx-if="{{numShiow&&index==tipIndex}}">
<cover-view class="scoreBg" style="height:{{144}}px;">
<cover-view class="score" style="top:-{{180-tipHeight}}px;color:{{curve.lineColor}}">{{score}}</cover-view>
<cover-view class="scoreBox" style="top:-{{174-tipHeight}}px;background:{{curve.lineColor}}"></cover-view>
</cover-view>
<cover-view class="scoreLine" style="height:{{190-tipHeight}}px;background:{{curve.lineColor}}"></cover-view>
</cover-view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
test/pages/perinfochart/perinfochart.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/perinfochart/perinfochart.wxss */
/* pages/curveCharts/curveCharts.wxss *//* pages/experience/tests/tests.wxss */
.efficacy{
/* width: 100%; */
/* height: 1000px; */
background: #ffffff;
padding:30rpx;
}
/* 曲线 */
.efficacyName {
color: #ffffff;
font-size: 26rpx;
font-weight: bold;
display: flex;
margin-bottom: 30rpx;
line-height: 30rpx;
}
.efficacyName>view {
width: 26rpx;
height: 26rpx;
margin-left: 10rpx;
border-radius: 4rpx;
}
.chartsBox{
position: relative;
width: 100%;
margin-bottom:40rpx;
}
.canvasBox{
width:690rpx;
height:420rpx;
position: relative;
background: rgb(255, 255, 255);
border-radius: 30rpx;
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
overflow: auto;
overflow-y:hidden;
/* overflow-x:scroll; */
}
.curveCanvas{
/* width:100%; */
width:450px;
height:500rpx;
position: relative;
left: -10px;
top: -28px;
}
.xCoordinate{
position: absolute;
top: 0;
/* left:30rpx; */
display: flex;
/* width: 690rpx; */
height: 100%;
overflow: auto;
}
.xCoordinateTime{
padding-left:4rpx;
font-size:20rpx;
color: #fff;
/* color: red; */
width: 98rpx;
}
.lines{
/* width:100%; */
width:450px;
position: absolute;
top: -21px;
left: -10px;
}
canvas{
width:none;
height: none;
}
.scoreTip{
position: absolute;
top:0;
height:345rpx;
}
.scoreBg{
width:80rpx;
height:170rpx;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
position: relative;
}
.score{
color: #ffffff;
font-size: 20rpx;
position: relative;
bottom: 10rpx;
top: 10rpx;
}
.scoreBox{
width: 12rpx;
height: 12rpx;
background:#ffffff;
border-radius: 50%;
position: relative;
bottom: 10rpx;
top: 10rpx;
}
.scoreLine{
width:8rpx;
height:119px;
background:#ece8d1;
border-radius:3rpx;
position: absolute;
left:0;
right: 0;
bottom:8rpx;
margin:auto;
}
test/pages/productSearch/index.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/productSearch/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/productSearch/index.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/productSearch/index.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/productSearch/index.wxml-->
<text>pages/productSearch/index.wxml</text>
\ No newline at end of file
test/pages/productSearch/index.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/productSearch/index.wxss */
\ No newline at end of file
test/pages/quxiantu/quxiantu.js 0 → 100644
浏览文件 @ de7eb7d3
var wxCharts = require('../../utils/wxcharts');
var app = getApp();
var lineChart = null;
Page({
data: {
},
touchHandler: function (e) {
console.log(lineChart.getCurrentDataIndex(e));
lineChart.showToolTip(e, {
// background: '#7cb5ec'
});
},
createSimulationData: function () {
var categories = [];
var data = [];
for (var i = 0; i < 10; i++) {
categories.push('AA-' + (i + 1));
data.push(Math.random()*(20-10)+10);
}
// data[4] = null;
return {
categories: categories,
data: data
}
},
updateData: function () {
var simulationData = this.createSimulationData();
var series = [{
name: '身高',
data: simulationData.data,
format: function (val, name) {
return val.toFixed(2) + '万';
}
}];
lineChart.updateData({
categories: simulationData.categories,
series: series
});
},
onLoad: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
console.log('windowWidth:'+windowWidth)
} catch (e) {
console.error('getSystemInfoSync failed!');
}
var simulationData = this.createSimulationData();
lineChart = new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: simulationData.categories,
animation: true,
background: '#f5f5f5',
series: [{
name: '高量1',
data: simulationData.data,
format: function (val, name) {
return val.toFixed(2) + '两';
}
}, {
name: '低量2',
data: [11, 24, 29, 15, null, 21, 32, 23, 45, 21],
format: function (val, name) {
return val.toFixed(2) + '斤';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '体重 (公斤 KG)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
}
});
test/pages/quxiantu/quxiantu.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/quxiantu/quxiantu.wxml 0 → 100644
浏览文件 @ de7eb7d3
<view>
<button type="primary" bindtap="updateData">更新数据</button>
</view>
<view class="container">
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
</view>
test/pages/test10/test10.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/test10/test10.js
Page({
/**
* 页面的初始数据
*/
data: {
date: '2021-01-01',
},
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取当前日期，并格式化为YYYY-MM-DD
let today = new Date().toISOString().split('T')[0];
this.setData({
date: today
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/test10/test10.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/test10/test10.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/test10/test10.wxml-->
<picker mode="date" header-text="选择时间" value="{{date}}" bindchange="bindDateChange">
<view class="font30">
<text class="color3">填报时间:</text>
<text class="separatetype">空空</text>
<text class="color6">{{date}}</text>
</view>
</picker>
\ No newline at end of file
test/pages/test10/test10.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/test10/test10.wxss */
.separatetype{
width: 100px;
color: white;
font-size: 10px;
}
\ No newline at end of file
test/pages/test5/test5.js
浏览文件 @ de7eb7d3
...@@ -44,10 +44,10 @@ Page({ ...@@ -44,10 +44,10 @@ Page({
age: 99 age: 99
}); // 增加新记录 }); // 增加新记录
obj.records.push({ /* obj.records.push({
name: '222', name: '222',
age: 129 age: 129
}); // 增加新记录 }); // 增加新记录 */
// 第三步：存回对象 // 第三步：存回对象
wx.setStorageSync('obj', obj); wx.setStorageSync('obj', obj);
}, },
......
test/pages/test6/test6.js
浏览文件 @ de7eb7d3
...@@ -12,7 +12,8 @@ Page({ ...@@ -12,7 +12,8 @@ Page({
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad(options) {
console.log('test6 onLoad')
console.log(options.searchstr)
}, },
/** /**
......
test/pages/test7/test7.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/commodity/commodity-search/index.js
const App = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
// 自定义顶部导航
navHeight: App.globalData.navHeight,
navTop: App.globalData.navTop,
// 图标
leftIcon: "/images/banner1.jpg",
searchIcon: "/images/icon_API.png",
upperLeftArrow: "/images/icon_API.png",
recommend: [ //热门推荐
{
title: "冰箱"
},
{
title: "红魔手机"
},
{
title: "洗衣机"
},
{
title: "电视机"
},
{
title: "冰箱 双门"
},
{
title: "海尔洗衣机 滚筒"
},
{
title: "手机自营"
},
{
title: "小天鹅洗衣机全自动"
},
{
title: "手机"
},
{
title: "笔记本"
}
],
historyStorage: [], //历史搜索
historyStorageShow: false,
hotsearch1: [{ title: "林涛" }, { title: "背带裙" }, { title: "牛仔裤男" }, { title: "运动 休闲男鞋" }, { title: "蕾丝连衣裙" }, { title: "电视" }, { title: "长裙" }, { title: "oppo" }, { title: "蓝牙耳机" }, { title: "女包" }, { title: "格力空调" }, { title: "魅族" }],
inputValue: "", //输入框输入的值
replaceValue: "", //替换输入框的值
eye: true, //显示隐藏
searchresult: false,
// searchResult: [{ result: "苹果手机" }, { result: "手机支架" }, { result: "手机自营" }, { result: "手机套" }, { result: "手机膜" }, { result: "手机卡" }, { result: "手机报" }, { result: "苹果手机壳" }, { result: "手机车载支架" }]//虚拟的查询结果
},
// 点击返回上一级
goBack: function () {
// let pages = getCurrentPages(); //获取小程序页面栈
// let beforePage = pages[pages.length - 2]; //获取上个页面的实例对象
// beforePage.setData({
// txt: "修改数据了"
// })
// beforePage.goUpdate(); //触发上个页面自定义的go_update()方法
wx.navigateBack({
delta: 1
})
},
/**
* 获取顶部固定高度
*/
attached: function () {
this.setData({
navHeight: App.globalData.navHeight,
navTop: App.globalData.navTop,
})
},
/**
* 热门搜索显示隐藏
*/
reye: function () {
this.setData({
eye: !this.data.eye
})
},
/**
* 清除
*/
remove: function () {
var _this = this
wx: wx.showModal({
content: '确认清除所有历史记录?',
success: function (res) {
if (res.confirm) {
wx: wx.removeStorage({
key: 'historyStorage',
success: function (res) {
_this.setData({
historyStorage: []
})
wx.setStorageSync("historyStorage", [])
},
})
} else {
console.log("点击取消")
}
},
})
},
/**
* 获取input的值
*/
getInputValue(e) {
// console.log("获取到了", e.currentTarget.dataset.value)
// console.log("获取value值",e.detail) // {value: "ff", cursor: 2}
this.setData({
inputValue: e.detail.value
})
// this.setData({
// searchresult: true,
// })
},
/**
* 点击搜索提交跳转并存储历史记录
*/
searchbegin: function (e) {
let _this = this
var data = e.currentTarget.dataset;
_this.data.replaceValue = e.currentTarget.dataset.postname
// _this.data.replaceValue =
wx: wx.setStorage({
key: 'historyStorage',
data: _this.data.historyStorage.concat(_this.data.inputValue).reverse(),
data: _this.data.historyStorage.concat(_this.data.replaceValue).reverse()
})
// console.log(_this.data.inputValue)
// console.log(_this.data.historyStorage)
// console.log(data['postname'])
if (data['postname'] == '') {
wx.showToast({
title: '请先输入品牌或商品',
icon: 'none'
})
} else {
console.log('redirectTo:'+data['postname'])
wx.redirectTo({
url: '/pages/test6/test6?searchstr='+data['postname']
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 历史搜索
let that = this;
that.searchtype = options.searchtype;
wx.getStorage({
key: 'historyStorage',
success: function (res) {
// console.log(res.data)
that.setData({
historyStorageShow: true,
historyStorage: res.data
})
}
})
this.setData({
inputValue: options.inputValue
})
this.data.inputValue = options.inputValue
// console.log(this.data.inputValue)
},
goUpdate: function () {
this.onLoad()
// console.log("我更新啦")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
test/pages/test7/test7.json 0 → 100644
浏览文件 @ de7eb7d3
{
"navigationStyle": "custom",
"usingComponents": {}
}
\ No newline at end of file
test/pages/test7/test7.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/test7/test7.wxml-->
<!--pages/commodity/commodity-search/index.wxml-->
<!-- 自定义顶部导航 S -->
<view class="navbar custom-class" style='height:{{navHeight}}px;'>
<view class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;'>
<image style="width: 17.5px; height: 18px; padding-top: 3px;" src="{{leftIcon}}" catchtap="goBack"></image>
</view>
<view class='navbar-title' style='top:{{navTop}}px'>
<view class="search-input">
<span class="search-con">
<view class="center-30f2b4d">
<!-- 自定义区域 -->
<image class="icon" src="{{searchIcon}}" catchtap="searchbegin" data-postname="{{inputValue}}"></image>
<input class="search-size" confirm-type="search" value="{{inputValue}}" type="text" bindinput="getInputValue" placeholder="搜索品牌或商品 林涛" placeholder-class="phcolor" bindconfirm="searchbegin" data-postname="{{inputValue}}"></input>
</view>
</span>
</view>
</view>
</view>
<!-- 自定义顶部导航 E -->
<view class="read-in" style="margin-top: {{navHeight}}px">
<!-- 最近搜索 S -->
<view class="headline" wx:if="{{historyStorage.length!=0}}" hidden="{{historyStorageShow?false:true}}">
<view class="head-headline justify">
<view class="headline-size">搜索历史</view>
<view class="icon-right size" catchtap="remove"><image src="/images/icon_component.png"></image></view>
</view>
<!-- 最近搜索内容 S -->
<view class="lately-main">
<view class="chunk" wx:for="{{historyStorage}}" wx:key="index" bindtap='searchbegin' data-index='{{index}}' data-postname="{{item}}">
<text>{{item}}</text>
</view>
</view>
<!-- 最近搜索内容 E -->
</view>
<!-- 最近搜索 E -->
<!-- 热门搜索 S -->
<view class="headline">
<view class="head-headline">
<view class="headline-size">搜索发现</view>
</view>
<!-- 热门推荐内容 S -->
<view class="lately-main">
<view class="chunk" wx:for="{{hotsearch1}}" wx:key="index" catchtap="searchbegin" bindtap="getInputValue" data-postname="{{item.title}}">
<text>{{item.title}}</text>
</view>
</view>
<!-- 热门推荐内容 E -->
</view>
<!-- 热门搜索 E -->
</view>
<!--搜索结果-->
<view class="searchresult" wx:if="{{inputValue != ''}}" hidden="{{searchresult}}" >
<view class="result" wx:for="{{searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{{item.result}}">
<view>{{item.result}}</view>
<image src="{{upperLeftArrow}}"></image>
</view>
</view>
<view class="searchresult" wx:if="{{inputValue != ''}}" hidden="{{searchresult?false:true}}" >
<view class="result" wx:for="{{searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{{item.result}}">
<view>{{item.result}}</view>
<image src="{{upperLeftArrow}}"></image>
</view>
</view>
\ No newline at end of file
test/pages/test7/test7.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/commodity/commodity-search/index.wxss */
page {
background: white;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 10;
flex-shrink: 0;
}
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 40px;
padding-right: 120px;
height: 33px;
line-height: 33px;
position: fixed;
left: 0;
z-index: 10;
color: #333;
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
}
.navbar-action-wrap {
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
left: 10px;
z-index: 11;
line-height: 1;
padding-top: 4px;
padding-bottom: 4px;
position: fixed;
}
.navbar-action-group {
border-radius: 20px;
overflow: hidden;
}
.navbar-action_item {
padding: 3px 0;
color: #333;
}
.navbar-action-group .navbar-action_item {
border-right: 1px solid #f0f0f0;
padding: 3px 14px;
}
.icon-right image {
width: 25rpx;
height: 26rpx;
}
.navbar-action-group .last {
border-right: none;
}
.navbar-title-size {
font-size: 10px;
margin-right: 20rpx;
align-self: center;
margin: 0 auto;
}
.navbar-title-size.active {
color: red;
border-bottom: 2px solid red;
}
.scroll-box {
position: absolute;
height: 100%;
}
.search-input {
width: 100%;
height: 28px;
line-height: 28px;
background: #f6f6f6;
border-radius: 30rpx;
/* margin-top: 2px; */
font-size: 25rpx;
}
.search-con {
display: flex;
align-items: center;
}
.search-con .center-30f2b4d {
height: 28px;
line-height: 28px;
flex: 1;
display: flex;
align-items: center;
}
.search-con .center-30f2b4d .icon {
width: 15px;
height: 15px;
align-self: center;
margin: 0 10px;
}
.search-con .center-30f2b4d .search-size {
width: 70%;
font-size: 12px;
font-family: "微软雅黑";
}
.phcolor {
color: #999999;
}
/* nav E */
/* 标题部分 */
.read-in {
padding: 0 40rpx;
}
.headline {
padding-top: .5rem;
}
.head-headline {
width: 100%;
height: 45rpx;
position: relative;
display: flex;
font-size: 28rpx;
font-weight: bold;
align-items: center;
justify-content: space-between;
}
/* 内容部分 */
.lately-main {
margin-top: 20rpx;
overflow: hidden;
}
.lately-main .chunk {
display: inline-block;
font-size: 24rpx;
line-height: 20rpx;
padding: 10rpx 21rpx;
background: #f5f5f5;
margin-right: 20rpx;
border: 1px solid #DCDCDC;
border-radius: 18.5rpx;
color: #666666;
margin-bottom: 26rpx;
/* float: left; */
}
.searchresult {
margin-top: 20px;
position: absolute;
top: 55px;
left: 0;
width: 100%;
background: #fff;
}
.result {
height: 50px;
line-height: 50px;
text-align: left;
border-bottom: 1px solid #eee;
padding: 0 30rpx;
color: #333;
font-family: "微软雅黑";
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.result image {
width: 50rpx;
height: 50rpx;
}
\ No newline at end of file
test/pages/test8/test8.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/test8/test8.js
Page({
/**
* 页面的初始数据
*/
data:{
multiIndex: [],
multiArrayStr: [],
datearr: [],
hourarr: ["0", '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
timearr: ["00", "05", '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
},
bindMultiPickerChange: function (e) {
var that = this
that.setData({
multiIndex: e.detail.value,
mrstreservedate: that.data.multiArray[0][e.detail.value[0]] + " " + that.data.multiArray[1][e.detail.value[1]] + ":" + that.data.multiArray[2][e.detail.value[2]]
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
//计算预约时间
var self = this
var edays = 8//从sdays起到第几天
var sdays = 0
var datearr = [];
var datearrStr = [];
var date = new Date();
var curdate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
var hour = date.getHours();
var days = 0;
for (var i = 0; i < edays + 1; i++) {
if (i >= sdays) {
if (i == 0) {
datearrStr.push('今天')
} else
if (i == 1) {
datearrStr.push('明天')
} else
if (i == 2) {
datearrStr.push('后天')
} else {
datearrStr.push(self.addDate(curdate.replace("-", "/").replace("-", "/"), i))
}
datearr.push(self.addDate(curdate.replace("-", "/").replace("-", "/"), i))
}
}
if (hour <= 22) {
hour += 1;
} else {
if (datearrStr.length > 1) {
days = 1;
}
hour = 10;
}
self.setData({
multiIndex: [days, hour, 0],
multiArray: [datearr, self.data.hourarr, self.data.timearr],
multiArrayStr: [datearrStr, self.data.hourarr, self.data.timearr]
})
//计算预约时间结束
},
// 计算方法
addDate: function (date, days) {
var d = new Date(date);
d.setDate(d.getDate() + days);
var month = d.getMonth() + 1;
var day = d.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
var val = d.getFullYear() + "-" + month + "-" + day;
return val;
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/test8/test8.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/test8/test8.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/test8/test8.wxml-->
<text>日期</text>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArrayStr}}">
<view class="picker">
{{multiArrayStr[0][multiIndex[0]]}} {{multiArrayStr[1][multiIndex[1]]}}:{{multiArrayStr[2][multiIndex[2]]}}
</view>
</picker>
\ No newline at end of file
test/pages/test8/test8.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/test8/test8.wxss */
\ No newline at end of file
test/pages/test9/test9.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/test9/test9.js
Page({
/**
* 页面的初始数据
*/
data: {
pickerIndexList: [0, 0, 0],//日期选择器下标
isShowDateLayer: false,//是否显示日期弹层
txtDate: '請选择提貨日期',//选中日期
isSeltDate: false,//是否选择日期
},
// 截获竖向滑动
catchTouchMove: function (res) {
return true;
},
//获取天数列表
getDayList: function (year, month) {
var that = this;
var dayList;
switch (month + 1) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12: dayList = that.getDayNum(31);
break;
case 4:
case 6:
case 9:
case 11: dayList = that.getDayNum(30);
break;
case 2: dayList = that.getDayNum((that.data.yearList[year] % 4 == 0 && that.data.yearList[year] % 100 != 0 || that.data.yearList[year] % 400 == 0) ? 29 : 28);
break;
}
return dayList;
},
//获取天数
getDayNum: function (num) {
var dayList = [];
for (var i = 1; i <= num; i++) {
dayList.push(i);
}
return dayList;
},
//打开选择日期弹层
bindOpenDateLayer: function (e) {
var that = this;
var pickerIndexList = that.data.pickerIndexList;
that.setData({
isShowDateLayer: !that.data.isShowDateLayer,
dayList: that.getDayList(pickerIndexList[0], pickerIndexList[1]),
})
},
//日期选择改变事件
bindChangeDate: function (e) {
var that = this;
var pickerColumnList = e.detail.value;
that.setData({
dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]),
pickerIndexList: pickerColumnList,
})
},
//选择日期弹层确定按钮
bindConfirmDate: function (e) {
var that = this;
var pickerIndexList = that.data.pickerIndexList;
var txtDate = that.data.yearList[pickerIndexList[0]] + '-' + that.data.monthList[pickerIndexList[1]] + '-' + that.data.dayList[pickerIndexList[2]];
that.setData({
isShowDateLayer: false,
pickerIndexList,
txtDate,
isSeltDate: true,
})
},
//选择日期弹层取消按钮
bindCancelDate: function (e) {
var that = this;
var pickerIndexList = that.data.pickerIndexList;
that.setData({
isShowDateLayer: !that.data.isShowDateLayer,
})
var yearList = that.data.yearList;
var monthList = that.data.monthList;
var txtDate = that.data.txtDate;
var yearIndex = yearList.findIndex(o => o == parseInt(txtDate.slice(0, txtDate.indexOf('-'))));//年份下标
var monthIndex = monthList.findIndex(o => o == parseInt(txtDate.slice(txtDate.indexOf('-') + 1, txtDate.lastIndexOf('-'))));//月份下标
var dayList = that.getDayList(yearIndex, monthIndex);//天数
if (that.data.isSeltDate) {//选择过日期
if (txtDate == (yearList[pickerIndexList[0]] + '-' + monthList[pickerIndexList[1]] + '-' + dayList[pickerIndexList[2]]))
that.setData({ pickerIndexList })
else
that.setData({ pickerIndexList: [yearIndex, monthIndex, dayList.findIndex(o => o == parseInt(txtDate.slice(txtDate.lastIndexOf('-') + 1, txtDate.length)))] })
} else {//未选择过日期
that.setData({
pickerIndexList: app.globalData.dateIndexList,
})
}
},
//阻止冒泡事件
catchLayer: function (e) { },
//獲取當前日期
getCurrentDate: function (e) {
var that = this;
var yearList = [], monthList = [], dayList = [];
for (var i = new Date().getFullYear(); i <= 2050; i++) {//年份
yearList.push(i);
}
for (var i = 1; i <= 12; i++) {//月份
monthList.push(i);
}
var myDate = new Date();
var currentYearIndex = yearList.findIndex(o => o == myDate.getFullYear());
var currentMonthIndex = monthList.findIndex(o => o == myDate.getMonth() + 1);
var dayList = that.getDayList(currentYearIndex, currentMonthIndex);//天
var currentDayIndex = dayList.findIndex(o => o == myDate.getDate());
var pickerIndexList = that.data.pickerIndexList;
pickerIndexList[0] = currentYearIndex;
pickerIndexList[1] = currentMonthIndex;
pickerIndexList[2] = currentDayIndex;
app.globalData.dateIndexList = pickerIndexList;
that.setData({
yearList,
monthList,
dayList,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.getCurrentDate();//獲取當前時間
that.setData({
pickerIndexList: that.data.pickerIndexList
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/test9/test9.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/test9/test9.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!-- 自定义选择日期层 start -->
<view class="date-layer" wx:if="{{isShowDateLayer}}" catchtouchmove="catchTouchMove">
<view class="layer-box">
<view class="box-top">
<!-- 选中行背景色 start-->
<view class="top-background">
<view></view>
<view></view>
<view></view>
</view>
<!-- 选中行背景色 end-->
<picker-view indicator-class="picker-indicator" value="{{pickerIndexList}}" bindchange="bindChangeDate">
<picker-view-column>
<view wx:for="{{yearList}}" wx:key="index" class="{{pickerIndexList[0]==index?'txt-active':''}}">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{monthList}}" wx:key="index" class="{{pickerIndexList[1]==index?'txt-active':''}}">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{dayList}}" wx:key="index" class="{{pickerIndexList[2]==index?'txt-active':''}}">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
<view class="box-bottom">
<button class="btn-confirm" bindtap="bindConfirmDate">確定</button>
<button class="btn-cancel" bindtap="bindCancelDate">取消</button>
</view>
</view>
</view>
<!-- 选择日期层 end -->
test/pages/test9/test9.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* 日期选择弹框 start */
.main .date-layer {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.65);
position: fixed;
top: 0;
z-index: 20;
}
.date-layer .layer-box {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
}
.date-layer .layer-box .box-top {
padding: 30rpx 0;
position: relative;
}
.date-layer .layer-box picker-view {
height: 120px;
width: 88%;
margin: 0 auto;
}
.date-layer .layer-box .picker-indicator {
height: 40px;
line-height: 40px;
}
.date-layer .layer-box picker-view-column view {
line-height: 42px;
text-align: center;
width: 96%;
margin: 0 auto;
}
.date-layer .layer-box .box-top .top-background {
height: 80rpx;
width: 88%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.layer-box .box-top .top-background view {
height: 100%;
width: 96%;
margin: 0 auto;
background: rgba(195, 218, 49, 0.12);
border-top: 2rpx solid #D9E87D;
border-bottom: 2rpx solid #C3DA31;
margin: 0 4rpx;
box-sizing: border-box;
}
.date-layer .layer-box .box-bottom {
display: flex;
}
.date-layer .layer-box .box-bottom button {
margin: 0;
padding: 0;
width: 50%;
border-radius: 0;
border: none;
background: #fff;
height: 100rpx;
line-height: 100rpx;
font-size: 34rpx;
border-top: 2rpx solid #D8D8D8;
}
.date-layer .layer-box .box-bottom .btn-confirm {
border-right: 1rpx solid #D8D8D8;
color: #C3DA31;
}
.date-layer .layer-box .box-bottom .btn-cancel {
border-left: 1rpx solid #D8D8D8;
color: #B1B1B4;
}
/* 日期选择弹框 end */
test/pages/testnav/testnav.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/testnav/testnav.js
Page({
/**
* 页面的初始数据
*/
data: {
},
// 监听自定义事件
onMyComponentTap: function(e) {
// 从事件的数据中获取目标页面路径
console.log('onMyComponentTap')
const url = e.detail.url;
console.log('url:'+url)
// 执行页面跳转
/* wx.navigateTo({
url: url
}); */
wx.switchTab({
url: url
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/testnav/testnav.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {
"footer-button": "../../components/footerbuton/footerbutton",
"customtabbar":"../../components/customtabbar/index"
}
}
\ No newline at end of file
test/pages/testnav/testnav.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/testnav/testnav.wxml-->
<view>
<navigator url="../testtar/testtar?userId=123&type=admin">跳转到目标页面</navigator>
<navigator url="/pages/droplist/droplist">跳转到home页面</navigator>
</view>
<view class="container">
<view bind:tap="handleClick">bindnavigatetonewpage</view>
<!-- 页面内容 -->
<footer-button bindnavigatetonewpage="onMyComponentTap"/>
<customtabbar bindnavigatetonewpage="onMyComponentTap"/>
</view>
\ No newline at end of file
test/pages/testnav/testnav.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/testnav/testnav.wxss */
\ No newline at end of file
test/pages/testtar/testtar.js 0 → 100644
浏览文件 @ de7eb7d3
Page({
onLoad: function(options) {
// 获取传递过来的参数
var userId = options.userId; // 值为 "123"
var type = options.type; // 值为 "admin"
// 使用这些参数进行后续操作...
console.log('UserID:', userId);
console.log('Type:', type);
}
})
\ No newline at end of file
test/pages/testtar/testtar.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/testtar/testtar.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/testtar/testtar.wxml-->
<text>pages/testtar/testtar.wxml</text>
\ No newline at end of file
test/pages/testtar/testtar.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/testtar/testtar.wxss */
\ No newline at end of file
test/pages/testview/testview.js 0 → 100644
浏览文件 @ de7eb7d3
// pages/testview/testview.js
Page({
/**
* 页面的初始数据
*/
data: {
isHidden:true,
scrollTop:false,
scrollLeft:true,
selectable:true,
},
handleTap:function(event){
console.log(event.currentTarget.dataset.num)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
test/pages/testview/testview.json 0 → 100644
浏览文件 @ de7eb7d3
{
"usingComponents": {}
}
\ No newline at end of file
test/pages/testview/testview.wxml 0 → 100644
浏览文件 @ de7eb7d3
<!--pages/testview/testview.wxml-->
<text>pages/testview/testview.wxml</text>
<view enable-flex>
<view style="flex: 1;">Flex Item 1</view>
<view style="flex: 2;">Flex Item 2</view>
</view>
<!--点击后会变样式-->
<view class="basclass" hover-class="hover-class" hover-start-time="50" hover-stay-time="200">Hover me</view>
<!--data-xxx: 自定义数据属性，可以在 JavaScript 中通过 event.currentTarget.dataset.xxx 访问。-->
<view data-num="123" bindtap="handleTap">Custom data</view>
<view hidden="{{isHidden}}">Hidden view</view>
<scroll-view scroll-top="{{scrollTop}}" scroll-left="{{scrollLeft}}" scroll-into-view="targetView" scroll-with-animation="true">
<view>1111111</view>
<view>2222222</view>
<view>3333333</view>
<view id="targetView">Target View</view>
</scroll-view>
<view selectable="{{selectable}}">Selectable text</view>
<scroll-view scroll-y style="height: 300px;">
<view>1111111</view>
<view>2222222</view>
<view>3333333</view>
<view>Target View</view>
</scroll-view>
\ No newline at end of file
test/pages/testview/testview.wxss 0 → 100644
浏览文件 @ de7eb7d3
/* pages/testview/testview.wxss */
.hover-class{
color: rgb(177, 72, 31);
}
.basclass{
background-color: aquamarine;
}
\ No newline at end of file
test/utils/wxcharts.js
浏览文件 @ de7eb7d3
/*
* charts for WeChat small app v1.0
*
* https://github.com/xiaolin3303/wx-charts
* 2016-11-28
*
* Designed and built with all the love of Web
*/
'use strict';
var config = {
yAxisWidth: 15,
yAxisSplit: 5,
xAxisHeight: 15,
xAxisLineHeight: 15,
legendHeight: 15,
yAxisTitleWidth: 15,
padding: 12,
columePadding: 3,
fontSize: 10,
dataPointShape: ['diamond', 'circle', 'triangle', 'rect'],
colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#f15c80', '#8085e9'],
pieChartLinePadding: 25,
pieChartTextPadding: 15,
xAxisTextPadding: 3,
titleColor: '#333333',
titleFontSize: 20,
subtitleColor: '#999999',
subtitleFontSize: 15,
toolTipPadding: 3,
toolTipBackground: '#000000',
toolTipOpacity: 0.7,
toolTipLineHeight: 14,
radarGridCount: 3,
radarLabelTextMargin: 15
};
// Object.assign polyfill
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
function assign(target, varArgs) {
if (target == null) {
// TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) {
// Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
}
var util = {
toFixed: function toFixed(num, limit) {
limit = limit || 2;
if (this.isFloat(num)) {
num = num.toFixed(limit);
}
return num;
},
isFloat: function isFloat(num) {
return num % 1 !== 0;
},
approximatelyEqual: function approximatelyEqual(num1, num2) {
return Math.abs(num1 - num2) < 1e-10;
},
isSameSign: function isSameSign(num1, num2) {
return Math.abs(num1) === num1 && Math.abs(num2) === num2 || Math.abs(num1) !== num1 && Math.abs(num2) !== num2;
},
isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) {
return this.isSameSign(p1.x, p2.x);
},
isCollision: function isCollision(obj1, obj2) {
obj1.end = {};
obj1.end.x = obj1.start.x + obj1.width;
obj1.end.y = obj1.start.y - obj1.height;
obj2.end = {};
obj2.end.x = obj2.start.x + obj2.width;
obj2.end.y = obj2.start.y - obj2.height;
var flag = obj2.start.x > obj1.end.x || obj2.end.x < obj1.start.x || obj2.end.y > obj1.start.y || obj2.start.y < obj1.end.y;
return !flag;
}
};
function findRange(num, type, limit) {
if (isNaN(num)) {
throw new Error('[wxCharts] unvalid series data!');
}
limit = limit || 10;
type = type ? type : 'upper';
var multiple = 1;
while (limit < 1) {
limit *= 10;
multiple *= 10;
}
if (type === 'upper') {
num = Math.ceil(num * multiple);
} else {
num = Math.floor(num * multiple);
}
while (num % limit !== 0) {
if (type === 'upper') {
num++;
} else {
num--;
}
}
return num / multiple;
}
function calValidDistance(distance, chartData, config, opts) {
var dataChartAreaWidth = opts.width - config.padding - chartData.xAxisPoints[0];
var dataChartWidth = chartData.eachSpacing * opts.categories.length;
var validDistance = distance;
if (distance >= 0) {
validDistance = 0;
} else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) {
validDistance = dataChartAreaWidth - dataChartWidth;
}
return validDistance;
}
function isInAngleRange(angle, startAngle, endAngle) {
function adjust(angle) {
while (angle < 0) {
angle += 2 * Math.PI;
}
while (angle > 2 * Math.PI) {
angle -= 2 * Math.PI;
}
return angle;
}
angle = adjust(angle);
startAngle = adjust(startAngle);
endAngle = adjust(endAngle);
if (startAngle > endAngle) {
endAngle += 2 * Math.PI;
if (angle < startAngle) {
angle += 2 * Math.PI;
}
}
return angle >= startAngle && angle <= endAngle;
}
function calRotateTranslate(x, y, h) {
var xv = x;
var yv = h - y;
var transX = xv + (h - yv - xv) / Math.sqrt(2);
transX *= -1;
var transY = (h - yv) * (Math.sqrt(2) - 1) - (h - yv - xv) / Math.sqrt(2);
return {
transX: transX,
transY: transY
};
}
function createCurveControlPoints(points, i) {
function isNotMiddlePoint(points, i) {
if (points[i - 1] && points[i + 1]) {
return points[i].y >= Math.max(points[i - 1].y, points[i + 1].y) || points[i].y <= Math.min(points[i - 1].y, points[i + 1].y);
} else {
return false;
}
}
var a = 0.2;
var b = 0.2;
var pAx = null;
var pAy = null;
var pBx = null;
var pBy = null;
if (i < 1) {
pAx = points[0].x + (points[1].x - points[0].x) * a;
pAy = points[0].y + (points[1].y - points[0].y) * a;
} else {
pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
}
if (i > points.length - 3) {
var last = points.length - 1;
pBx = points[last].x - (points[last].x - points[last - 1].x) * b;
pBy = points[last].y - (points[last].y - points[last - 1].y) * b;
} else {
pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
}
// fix issue https://github.com/xiaolin3303/wx-charts/issues/79
if (isNotMiddlePoint(points, i + 1)) {
pBy = points[i + 1].y;
}
if (isNotMiddlePoint(points, i)) {
pAy = points[i].y;
}
return {
ctrA: { x: pAx, y: pAy },
ctrB: { x: pBx, y: pBy }
};
}
function convertCoordinateOrigin(x, y, center) {
return {
x: center.x + x,
y: center.y - y
};
}
function avoidCollision(obj, target) {
if (target) {
// is collision test
while (util.isCollision(obj, target)) {
if (obj.start.x > 0) {
obj.start.y--;
} else if (obj.start.x < 0) {
obj.start.y++;
} else {
if (obj.start.y > 0) {
obj.start.y++;
} else {
obj.start.y--;
}
}
}
}
return obj;
}
function fillSeriesColor(series, config) {
var index = 0;
return series.map(function (item) {
if (!item.color) {
item.color = config.colors[index];
index = (index + 1) % config.colors.length;
}
return item;
});
}
function getDataRange(minData, maxData) {
var limit = 0;
var range = maxData - minData;
if (range >= 10000) {
limit = 1000;
} else if (range >= 1000) {
limit = 100;
} else if (range >= 100) {
limit = 10;
} else if (range >= 10) {
limit = 5;
} else if (range >= 1) {
limit = 1;
} else if (range >= 0.1) {
limit = 0.1;
} else {
limit = 0.01;
}
return {
minRange: findRange(minData, 'lower', limit),
maxRange: findRange(maxData, 'upper', limit)
};
}
function measureText(text) {
var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
// wx canvas 未实现measureText方法, 此处自行实现
text = String(text);
var text = text.split('');
var width = 0;
text.forEach(function (item) {
if (/[a-zA-Z]/.test(item)) {
width += 7;
} else if (/[0-9]/.test(item)) {
width += 5.5;
} else if (/\./.test(item)) {
width += 2.7;
} else if (/-/.test(item)) {
width += 3.25;
} else if (/[\u4e00-\u9fa5]/.test(item)) {
width += 10;
} else if (/\(|\)/.test(item)) {
width += 3.73;
} else if (/\s/.test(item)) {
width += 2.5;
} else if (/%/.test(item)) {
width += 8;
} else {
width += 10;
}
});
return width * fontSize / 10;
}
function dataCombine(series) {
return series.reduce(function (a, b) {
return (a.data ? a.data : a).concat(b.data);
}, []);
}
function getSeriesDataItem(series, index) {
var data = [];
series.forEach(function (item) {
if (item.data[index] !== null && typeof item.data[index] !== 'undefined') {
var seriesItem = {};
seriesItem.color = item.color;
seriesItem.name = item.name;
seriesItem.data = item.format ? item.format(item.data[index]) : item.data[index];
data.push(seriesItem);
}
});
return data;
}
function getMaxTextListLength(list) {
var lengthList = list.map(function (item) {
return measureText(item);
});
return Math.max.apply(null, lengthList);
}
function getRadarCoordinateSeries(length) {
var eachAngle = 2 * Math.PI / length;
var CoordinateSeries = [];
for (var i = 0; i < length; i++) {
CoordinateSeries.push(eachAngle * i);
}
return CoordinateSeries.map(function (item) {
return -1 * item + Math.PI / 2;
});
}
function getToolTipData(seriesData, calPoints, index, categories) {
var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
var textList = seriesData.map(function (item) {
return {
text: option.format ? option.format(item, categories[index]) : item.name + ': ' + item.data,
color: item.color
};
});
var validCalPoints = [];
var offset = {
x: 0,
y: 0
};
calPoints.forEach(function (points) {
if (typeof points[index] !== 'undefined' && points[index] !== null) {
validCalPoints.push(points[index]);
}
});
validCalPoints.forEach(function (item) {
offset.x = Math.round(item.x);
offset.y += item.y;
});
offset.y /= validCalPoints.length;
return { textList: textList, offset: offset };
}
function findCurrentIndex(currentPoints, xAxisPoints, opts, config) {
var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
var currentIndex = -1;
if (isInExactChartArea(currentPoints, opts, config)) {
xAxisPoints.forEach(function (item, index) {
if (currentPoints.x + offset > item) {
currentIndex = index;
}
});
}
return currentIndex;
}
function isInExactChartArea(currentPoints, opts, config) {
return currentPoints.x < opts.width - config.padding && currentPoints.x > config.padding + config.yAxisWidth + config.yAxisTitleWidth && currentPoints.y > config.padding && currentPoints.y < opts.height - config.legendHeight - config.xAxisHeight - config.padding;
}
function findRadarChartCurrentIndex(currentPoints, radarData, count) {
var eachAngleArea = 2 * Math.PI / count;
var currentIndex = -1;
if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) {
var fixAngle = function fixAngle(angle) {
if (angle < 0) {
angle += 2 * Math.PI;
}
if (angle > 2 * Math.PI) {
angle -= 2 * Math.PI;
}
return angle;
};
var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x);
angle = -1 * angle;
if (angle < 0) {
angle += 2 * Math.PI;
}
var angleList = radarData.angleList.map(function (item) {
item = fixAngle(-1 * item);
return item;
});
angleList.forEach(function (item, index) {
var rangeStart = fixAngle(item - eachAngleArea / 2);
var rangeEnd = fixAngle(item + eachAngleArea / 2);
if (rangeEnd < rangeStart) {
rangeEnd += 2 * Math.PI;
}
if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) {
currentIndex = index;
}
});
}
return currentIndex;
}
function findPieChartCurrentIndex(currentPoints, pieData) {
var currentIndex = -1;
if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
angle = -angle;
for (var i = 0, len = pieData.series.length; i < len; i++) {
var item = pieData.series[i];
if (isInAngleRange(angle, item._start_, item._start_ + item._proportion_ * 2 * Math.PI)) {
currentIndex = i;
break;
}
}
}
return currentIndex;
}
function isInExactPieChartArea(currentPoints, center, radius) {
return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2);
}
function splitPoints(points) {
var newPoints = [];
var items = [];
points.forEach(function (item, index) {
if (item !== null) {
items.push(item);
} else {
if (items.length) {
newPoints.push(items);
}
items = [];
}
});
if (items.length) {
newPoints.push(items);
}
return newPoints;
}
function calLegendData(series, opts, config) {
if (opts.legend === false) {
return {
legendList: [],
legendHeight: 0
};
}
var padding = 5;
var marginTop = 8;
var shapeWidth = 15;
var legendList = [];
var widthCount = 0;
var currentRow = [];
series.forEach(function (item) {
var itemWidth = 3 * padding + shapeWidth + measureText(item.name || 'undefined');
if (widthCount + itemWidth > opts.width) {
legendList.push(currentRow);
widthCount = itemWidth;
currentRow = [item];
} else {
widthCount += itemWidth;
currentRow.push(item);
}
});
if (currentRow.length) {
legendList.push(currentRow);
}
return {
legendList: legendList,
legendHeight: legendList.length * (config.fontSize + marginTop) + padding
};
}
function calCategoriesData(categories, opts, config) {
var result = {
angle: 0,
xAxisHeight: config.xAxisHeight
};
var _getXAxisPoints = getXAxisPoints(categories, opts, config),
eachSpacing = _getXAxisPoints.eachSpacing;
// get max length of categories text
var categoriesTextLenth = categories.map(function (item) {
return measureText(item);
});
var maxTextLength = Math.max.apply(this, categoriesTextLenth);
if (maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) {
result.angle = 45 * Math.PI / 180;
result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle);
}
return result;
}
function getRadarDataPoints(angleList, center, radius, series, opts) {
var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
var radarOption = opts.extra.radar || {};
radarOption.max = radarOption.max || 0;
var maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)));
var data = [];
series.forEach(function (each) {
var listItem = {};
listItem.color = each.color;
listItem.data = [];
each.data.forEach(function (item, index) {
var tmp = {};
tmp.angle = angleList[index];
tmp.proportion = item / maxData;
tmp.position = convertCoordinateOrigin(radius * tmp.proportion * process * Math.cos(tmp.angle), radius * tmp.proportion * process * Math.sin(tmp.angle), center);
listItem.data.push(tmp);
});
data.push(listItem);
});
return data;
}
function getPieDataPoints(series) {
var process = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var count = 0;
var _start_ = 0;
series.forEach(function (item) {
item.data = item.data === null ? 0 : item.data;
count += item.data;
});
series.forEach(function (item) {
item.data = item.data === null ? 0 : item.data;
item._proportion_ = item.data / count * process;
});
series.forEach(function (item) {
item._start_ = _start_;
_start_ += 2 * item._proportion_ * Math.PI;
});
return series;
}
function getPieTextMaxLength(series) {
series = getPieDataPoints(series);
var maxLength = 0;
series.forEach(function (item) {
var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%';
maxLength = Math.max(maxLength, measureText(text));
});
return maxLength;
}
function fixColumeData(points, eachSpacing, columnLen, index, config, opts) {
return points.map(function (item) {
if (item === null) {
return null;
}
item.width = (eachSpacing - 2 * config.columePadding) / columnLen;
if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
// customer column width
item.width = Math.min(item.width, +opts.extra.column.width);
} else {
// default width should less tran 25px
// don't ask me why, I don't know
item.width = Math.min(item.width, 25);
}
item.x += (index + 0.5 - columnLen / 2) * item.width;
return item;
});
}
function getXAxisPoints(categories, opts, config) {
var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
var spacingValid = opts.width - 2 * config.padding - yAxisTotalWidth;
var dataCount = opts.enableScroll ? Math.min(5, categories.length) : categories.length;
var eachSpacing = spacingValid / dataCount;
var xAxisPoints = [];
var startX = config.padding + yAxisTotalWidth;
var endX = opts.width - config.padding;
categories.forEach(function (item, index) {
xAxisPoints.push(startX + index * eachSpacing);
});
if (opts.enableScroll === true) {
xAxisPoints.push(startX + categories.length * eachSpacing);
} else {
xAxisPoints.push(endX);
}
return { xAxisPoints: xAxisPoints, startX: startX, endX: endX, eachSpacing: eachSpacing };
}
function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
var points = [];
var validHeight = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
data.forEach(function (item, index) {
if (item === null) {
points.push(null);
} else {
var point = {};
point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
var height = validHeight * (item - minRange) / (maxRange - minRange);
height *= process;
point.y = opts.height - config.xAxisHeight - config.legendHeight - Math.round(height) - config.padding;
points.push(point);
}
});
return points;
}
function getYAxisTextList(series, opts, config) {
var data = dataCombine(series);
// remove null from data
data = data.filter(function (item) {
return item !== null;
});
var minData = Math.min.apply(this, data);
var maxData = Math.max.apply(this, data);
if (typeof opts.yAxis.min === 'number') {
minData = Math.min(opts.yAxis.min, minData);
}
if (typeof opts.yAxis.max === 'number') {
maxData = Math.max(opts.yAxis.max, maxData);
}
// fix issue https://github.com/xiaolin3303/wx-charts/issues/9
if (minData === maxData) {
var rangeSpan = maxData || 1;
minData -= rangeSpan;
maxData += rangeSpan;
}
var dataRange = getDataRange(minData, maxData);
var minRange = dataRange.minRange;
var maxRange = dataRange.maxRange;
var range = [];
var eachRange = (maxRange - minRange) / config.yAxisSplit;
for (var i = 0; i <= config.yAxisSplit; i++) {
range.push(minRange + eachRange * i);
}
return range.reverse();
}
function calYAxisData(series, opts, config) {
var ranges = getYAxisTextList(series, opts, config);
var yAxisWidth = config.yAxisWidth;
var rangesFormat = ranges.map(function (item) {
item = util.toFixed(item, 2);
item = opts.yAxis.format ? opts.yAxis.format(Number(item)) : item;
yAxisWidth = Math.max(yAxisWidth, measureText(item) + 5);
return item;
});
if (opts.yAxis.disabled === true) {
yAxisWidth = 0;
}
return { rangesFormat: rangesFormat, ranges: ranges, yAxisWidth: yAxisWidth };
}
function drawPointShape(points, color, shape, context) {
context.beginPath();
context.setStrokeStyle("#ffffff");
context.setLineWidth(1);
context.setFillStyle(color);
if (shape === 'diamond') {
points.forEach(function (item, index) {
if (item !== null) {
context.moveTo(item.x, item.y - 4.5);
context.lineTo(item.x - 4.5, item.y);
context.lineTo(item.x, item.y + 4.5);
context.lineTo(item.x + 4.5, item.y);
context.lineTo(item.x, item.y - 4.5);
}
});
} else if (shape === 'circle') {
points.forEach(function (item, index) {
if (item !== null) {
context.moveTo(item.x + 3.5, item.y);
context.arc(item.x, item.y, 4, 0, 2 * Math.PI, false);
}
});
} else if (shape === 'rect') {
points.forEach(function (item, index) {
if (item !== null) {
context.moveTo(item.x - 3.5, item.y - 3.5);
context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
}
});
} else if (shape === 'triangle') {
points.forEach(function (item, index) {
if (item !== null) {
context.moveTo(item.x, item.y - 4.5);
context.lineTo(item.x - 4.5, item.y + 4.5);
context.lineTo(item.x + 4.5, item.y + 4.5);
context.lineTo(item.x, item.y - 4.5);
}
});
}
context.closePath();
context.fill();
context.stroke();
}
function drawRingTitle(opts, config, context) {
var titlefontSize = opts.title.fontSize || config.titleFontSize;
var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize;
var title = opts.title.name || '';
var subtitle = opts.subtitle.name || '';
var titleFontColor = opts.title.color || config.titleColor;
var subtitleFontColor = opts.subtitle.color || config.subtitleColor;
var titleHeight = title ? titlefontSize : 0;
var subtitleHeight = subtitle ? subtitlefontSize : 0;
var margin = 5;
if (subtitle) {
var textWidth = measureText(subtitle, subtitlefontSize);
var startX = (opts.width - textWidth) / 2 + (opts.subtitle.offsetX || 0);
var startY = (opts.height - config.legendHeight + subtitlefontSize) / 2;
if (title) {
startY -= (titleHeight + margin) / 2;
}
context.beginPath();
context.setFontSize(subtitlefontSize);
context.setFillStyle(subtitleFontColor);
context.fillText(subtitle, startX, startY);
context.stroke();
context.closePath();
}
if (title) {
var _textWidth = measureText(title, titlefontSize);
var _startX = (opts.width - _textWidth) / 2 + (opts.title.offsetX || 0);
var _startY = (opts.height - config.legendHeight + titlefontSize) / 2;
if (subtitle) {
_startY += (subtitleHeight + margin) / 2;
}
context.beginPath();
context.setFontSize(titlefontSize);
context.setFillStyle(titleFontColor);
context.fillText(title, _startX, _startY);
context.stroke();
context.closePath();
}
}
function drawPointText(points, series, config, context) {
// 绘制数据文案
var data = series.data;
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle('#666666');
points.forEach(function (item, index) {
if (item !== null) {
var formatVal = series.format ? series.format(data[index]) : data[index];
context.fillText(formatVal, item.x - measureText(formatVal) / 2, item.y - 2);
}
});
context.closePath();
context.stroke();
}
function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) {
var radarOption = opts.extra.radar || {};
radius += config.radarLabelTextMargin;
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(radarOption.labelColor || '#666666');
angleList.forEach(function (angle, index) {
var pos = {
x: radius * Math.cos(angle),
y: radius * Math.sin(angle)
};
var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
var startX = posRelativeCanvas.x;
var startY = posRelativeCanvas.y;
if (util.approximatelyEqual(pos.x, 0)) {
startX -= measureText(opts.categories[index] || '') / 2;
} else if (pos.x < 0) {
startX -= measureText(opts.categories[index] || '');
}
context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
});
context.stroke();
context.closePath();
}
function drawPieText(series, opts, config, context, radius, center) {
var lineRadius = radius + config.pieChartLinePadding;
var textObjectCollection = [];
var lastTextObject = null;
var seriesConvert = series.map(function (item) {
var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2);
var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%';
var color = item.color;
return { arc: arc, text: text, color: color };
});
seriesConvert.forEach(function (item) {
// line end
var orginX1 = Math.cos(item.arc) * lineRadius;
var orginY1 = Math.sin(item.arc) * lineRadius;
// line start
var orginX2 = Math.cos(item.arc) * radius;
var orginY2 = Math.sin(item.arc) * radius;
// text start
var orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding;
var orginY3 = orginY1;
var textWidth = measureText(item.text);
var startY = orginY3;
if (lastTextObject && util.isSameXCoordinateArea(lastTextObject.start, { x: orginX3 })) {
if (orginX3 > 0) {
startY = Math.min(orginY3, lastTextObject.start.y);
} else if (orginX1 < 0) {
startY = Math.max(orginY3, lastTextObject.start.y);
} else {
if (orginY3 > 0) {
startY = Math.max(orginY3, lastTextObject.start.y);
} else {
startY = Math.min(orginY3, lastTextObject.start.y);
}
}
}
if (orginX3 < 0) {
orginX3 -= textWidth;
}
var textObject = {
lineStart: {
x: orginX2,
y: orginY2
},
lineEnd: {
x: orginX1,
y: orginY1
},
start: {
x: orginX3,
y: startY
},
width: textWidth,
height: config.fontSize,
text: item.text,
color: item.color
};
lastTextObject = avoidCollision(textObject, lastTextObject);
textObjectCollection.push(lastTextObject);
});
textObjectCollection.forEach(function (item) {
var lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center);
var lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center);
var textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center);
context.setLineWidth(1);
context.setFontSize(config.fontSize);
context.beginPath();
context.setStrokeStyle(item.color);
context.setFillStyle(item.color);
context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
var curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x;
var textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5;
context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y);
context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(textPosition.x + item.width, textPosition.y);
context.arc(curveStartX, textPosition.y, 2, 0, 2 * Math.PI);
context.closePath();
context.fill();
context.beginPath();
context.setFillStyle('#666666');
context.fillText(item.text, textStartX, textPosition.y + 3);
context.closePath();
context.stroke();
context.closePath();
});
}
function drawToolTipSplitLine(offsetX, opts, config, context) {
var startY = config.padding;
var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
context.beginPath();
context.setStrokeStyle('#cccccc');
context.setLineWidth(1);
context.moveTo(offsetX, startY);
context.lineTo(offsetX, endY);
context.stroke();
context.closePath();
}
function drawToolTip(textList, offset, opts, config, context) {
var legendWidth = 4;
var legendMarginRight = 5;
var arrowWidth = 8;
var isOverRightBorder = false;
offset = assign({
x: 0,
y: 0
}, offset);
offset.y -= 8;
var textWidth = textList.map(function (item) {
return measureText(item.text);
});
var toolTipWidth = legendWidth + legendMarginRight + 4 * config.toolTipPadding + Math.max.apply(null, textWidth);
var toolTipHeight = 2 * config.toolTipPadding + textList.length * config.toolTipLineHeight;
// if beyond the right border
if (offset.x - Math.abs(opts._scrollDistance_) + arrowWidth + toolTipWidth > opts.width) {
isOverRightBorder = true;
}
// draw background rect
context.beginPath();
context.setFillStyle(opts.tooltip.option.background || config.toolTipBackground);
context.setGlobalAlpha(config.toolTipOpacity);
if (isOverRightBorder) {
context.moveTo(offset.x, offset.y + 10);
context.lineTo(offset.x - arrowWidth, offset.y + 10 - 5);
context.lineTo(offset.x - arrowWidth, offset.y + 10 + 5);
context.moveTo(offset.x, offset.y + 10);
context.fillRect(offset.x - toolTipWidth - arrowWidth, offset.y, toolTipWidth, toolTipHeight);
} else {
context.moveTo(offset.x, offset.y + 10);
context.lineTo(offset.x + arrowWidth, offset.y + 10 - 5);
context.lineTo(offset.x + arrowWidth, offset.y + 10 + 5);
context.moveTo(offset.x, offset.y + 10);
context.fillRect(offset.x + arrowWidth, offset.y, toolTipWidth, toolTipHeight);
}
context.closePath();
context.fill();
context.setGlobalAlpha(1);
// draw legend
textList.forEach(function (item, index) {
context.beginPath();
context.setFillStyle(item.color);
var startX = offset.x + arrowWidth + 2 * config.toolTipPadding;
var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding;
if (isOverRightBorder) {
startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding;
}
context.fillRect(startX, startY, legendWidth, config.fontSize);
context.closePath();
});
// draw text list
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle('#ffffff');
textList.forEach(function (item, index) {
var startX = offset.x + arrowWidth + 2 * config.toolTipPadding + legendWidth + legendMarginRight;
if (isOverRightBorder) {
startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth + legendMarginRight;
}
var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding;
context.fillText(item.text, startX, startY + config.fontSize);
});
context.stroke();
context.closePath();
}
function drawYAxisTitle(title, opts, config, context) {
var startX = config.xAxisHeight + (opts.height - config.xAxisHeight - measureText(title)) / 2;
context.save();
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(opts.yAxis.titleFontColor || '#333333');
context.translate(0, opts.height);
context.rotate(-90 * Math.PI / 180);
context.fillText(title, startX, config.padding + 0.5 * config.fontSize);
context.stroke();
context.closePath();
context.restore();
}
function drawColumnDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var _calYAxisData = calYAxisData(series, opts, config),
ranges = _calYAxisData.ranges;
var _getXAxisPoints = getXAxisPoints(opts.categories, opts, config),
xAxisPoints = _getXAxisPoints.xAxisPoints,
eachSpacing = _getXAxisPoints.eachSpacing;
var minRange = ranges.pop();
var maxRange = ranges.shift();
context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
context.translate(opts._scrollDistance_, 0);
}
series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
// 绘制柱状数据图
context.beginPath();
context.setFillStyle(eachSeries.color);
points.forEach(function (item, index) {
if (item !== null) {
var startX = item.x - item.width / 2 + 1;
var height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight;
context.moveTo(startX, item.y);
context.rect(startX, item.y, item.width - 2, height);
}
});
context.closePath();
context.fill();
});
series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
if (opts.dataLabel !== false && process === 1) {
drawPointText(points, eachSeries, config, context);
}
});
context.restore();
return {
xAxisPoints: xAxisPoints,
eachSpacing: eachSpacing
};
}
function drawAreaDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var _calYAxisData2 = calYAxisData(series, opts, config),
ranges = _calYAxisData2.ranges;
var _getXAxisPoints2 = getXAxisPoints(opts.categories, opts, config),
xAxisPoints = _getXAxisPoints2.xAxisPoints,
eachSpacing = _getXAxisPoints2.eachSpacing;
var minRange = ranges.pop();
var maxRange = ranges.shift();
var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
var calPoints = [];
context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
context.translate(opts._scrollDistance_, 0);
}
if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
}
series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
calPoints.push(points);
var splitPointList = splitPoints(points);
splitPointList.forEach(function (points) {
// 绘制区域数据
context.beginPath();
context.setStrokeStyle(eachSeries.color);
context.setFillStyle(eachSeries.color);
context.setGlobalAlpha(0.6);
context.setLineWidth(2);
if (points.length > 1) {
var firstPoint = points[0];
var lastPoint = points[points.length - 1];
context.moveTo(firstPoint.x, firstPoint.y);
if (opts.extra.lineStyle === 'curve') {
points.forEach(function (item, index) {
if (index > 0) {
var ctrlPoint = createCurveControlPoints(points, index - 1);
context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
}
});
} else {
points.forEach(function (item, index) {
if (index > 0) {
context.lineTo(item.x, item.y);
}
});
}
context.lineTo(lastPoint.x, endY);
context.lineTo(firstPoint.x, endY);
context.lineTo(firstPoint.x, firstPoint.y);
} else {
var item = points[0];
context.moveTo(item.x - eachSpacing / 2, item.y);
context.lineTo(item.x + eachSpacing / 2, item.y);
context.lineTo(item.x + eachSpacing / 2, endY);
context.lineTo(item.x - eachSpacing / 2, endY);
context.moveTo(item.x - eachSpacing / 2, item.y);
}
context.closePath();
context.fill();
context.setGlobalAlpha(1);
});
if (opts.dataPointShape !== false) {
var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
drawPointShape(points, eachSeries.color, shape, context);
}
});
if (opts.dataLabel !== false && process === 1) {
series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
drawPointText(points, eachSeries, config, context);
});
}
context.restore();
return {
xAxisPoints: xAxisPoints,
calPoints: calPoints,
eachSpacing: eachSpacing
};
}
function drawLineDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var _calYAxisData3 = calYAxisData(series, opts, config),
ranges = _calYAxisData3.ranges;
var _getXAxisPoints3 = getXAxisPoints(opts.categories, opts, config),
xAxisPoints = _getXAxisPoints3.xAxisPoints,
eachSpacing = _getXAxisPoints3.eachSpacing;
var minRange = ranges.pop();
var maxRange = ranges.shift();
var calPoints = [];
context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
context.translate(opts._scrollDistance_, 0);
}
if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
}
series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
calPoints.push(points);
var splitPointList = splitPoints(points);
splitPointList.forEach(function (points, index) {
context.beginPath();
context.setStrokeStyle(eachSeries.color);
context.setLineWidth(2);
if (points.length === 1) {
context.moveTo(points[0].x, points[0].y);
context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
} else {
context.moveTo(points[0].x, points[0].y);
if (opts.extra.lineStyle === 'curve') {
points.forEach(function (item, index) {
if (index > 0) {
var ctrlPoint = createCurveControlPoints(points, index - 1);
context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
}
});
} else {
points.forEach(function (item, index) {
if (index > 0) {
context.lineTo(item.x, item.y);
}
});
}
context.moveTo(points[0].x, points[0].y);
}
context.closePath();
context.stroke();
});
if (opts.dataPointShape !== false) {
var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
drawPointShape(points, eachSeries.color, shape, context);
}
});
if (opts.dataLabel !== false && process === 1) {
series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
drawPointText(points, eachSeries, config, context);
});
}
context.restore();
return {
xAxisPoints: xAxisPoints,
calPoints: calPoints,
eachSpacing: eachSpacing
};
}
function drawToolTipBridge(opts, config, context, process) {
context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
context.translate(opts._scrollDistance_, 0);
}
if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context);
}
context.restore();
}
function drawXAxis(categories, opts, config, context) {
var _getXAxisPoints4 = getXAxisPoints(categories, opts, config),
xAxisPoints = _getXAxisPoints4.xAxisPoints,
startX = _getXAxisPoints4.startX,
endX = _getXAxisPoints4.endX,
eachSpacing = _getXAxisPoints4.eachSpacing;
var startY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
var endY = startY + config.xAxisLineHeight;
context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
context.translate(opts._scrollDistance_, 0);
}
context.beginPath();
context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");
if (opts.xAxis.disableGrid !== true) {
if (opts.xAxis.type === 'calibration') {
xAxisPoints.forEach(function (item, index) {
if (index > 0) {
context.moveTo(item - eachSpacing / 2, startY);
context.lineTo(item - eachSpacing / 2, startY + 4);
}
});
} else {
xAxisPoints.forEach(function (item, index) {
context.moveTo(item, startY);
context.lineTo(item, endY);
});
}
}
context.closePath();
context.stroke();
// 对X轴列表做抽稀处理
var validWidth = opts.width - 2 * config.padding - config.yAxisWidth - config.yAxisTitleWidth;
var maxXAxisListLength = Math.min(categories.length, Math.ceil(validWidth / config.fontSize / 1.5));
var ratio = Math.ceil(categories.length / maxXAxisListLength);
categories = categories.map(function (item, index) {
return index % ratio !== 0 ? '' : item;
});
if (config._xAxisTextAngle_ === 0) {
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(opts.xAxis.fontColor || '#666666');
categories.forEach(function (item, index) {
var offset = eachSpacing / 2 - measureText(item) / 2;
context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5);
});
context.closePath();
context.stroke();
} else {
categories.forEach(function (item, index) {
context.save();
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(opts.xAxis.fontColor || '#666666');
var textWidth = measureText(item);
var offset = eachSpacing / 2 - textWidth;
var _calRotateTranslate = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY + config.fontSize / 2 + 5, opts.height),
transX = _calRotateTranslate.transX,
transY = _calRotateTranslate.transY;
context.rotate(-1 * config._xAxisTextAngle_);
context.translate(transX, transY);
context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5);
context.closePath();
context.stroke();
context.restore();
});
}
context.restore();
}
function drawYAxisGrid(opts, config, context) {
var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
var eachSpacing = Math.floor(spacingValid / config.yAxisSplit);
var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
var startX = config.padding + yAxisTotalWidth;
var endX = opts.width - config.padding;
var points = [];
for (var i = 0; i < config.yAxisSplit; i++) {
points.push(config.padding + eachSpacing * i);
}
points.push(config.padding + eachSpacing * config.yAxisSplit + 2);
context.beginPath();
context.setStrokeStyle(opts.yAxis.gridColor || "#cccccc");
context.setLineWidth(1);
points.forEach(function (item, index) {
context.moveTo(startX, item);
context.lineTo(endX, item);
});
context.closePath();
context.stroke();
}
function drawYAxis(series, opts, config, context) {
if (opts.yAxis.disabled === true) {
return;
}
var _calYAxisData4 = calYAxisData(series, opts, config),
rangesFormat = _calYAxisData4.rangesFormat;
var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
var eachSpacing = Math.floor(spacingValid / config.yAxisSplit);
var startX = config.padding + yAxisTotalWidth;
var endX = opts.width - config.padding;
var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
// set YAxis background
context.setFillStyle(opts.background || '#ffffff');
if (opts._scrollDistance_ < 0) {
context.fillRect(0, 0, startX, endY + config.xAxisHeight + 5);
}
context.fillRect(endX, 0, opts.width, endY + config.xAxisHeight + 5);
var points = [];
for (var i = 0; i <= config.yAxisSplit; i++) {
points.push(config.padding + eachSpacing * i);
}
context.stroke();
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(opts.yAxis.fontColor || '#666666');
rangesFormat.forEach(function (item, index) {
var pos = points[index] ? points[index] : endY;
context.fillText(item, config.padding + config.yAxisTitleWidth, pos + config.fontSize / 2);
});
context.closePath();
context.stroke();
if (opts.yAxis.title) {
drawYAxisTitle(opts.yAxis.title, opts, config, context);
}
}
function drawLegend(series, opts, config, context) {
if (!opts.legend) {
return;
}
// each legend shape width 15px
// the spacing between shape and text in each legend is the `padding`
// each legend spacing is the `padding`
// legend margin top `config.padding`
var _calLegendData = calLegendData(series, opts, config),
legendList = _calLegendData.legendList;
var padding = 5;
var marginTop = 8;
var shapeWidth = 15;
legendList.forEach(function (itemList, listIndex) {
var width = 0;
itemList.forEach(function (item) {
item.name = item.name || 'undefined';
width += 3 * padding + measureText(item.name) + shapeWidth;
});
var startX = (opts.width - width) / 2 + padding;
var startY = opts.height - config.padding - config.legendHeight + listIndex * (config.fontSize + marginTop) + padding + marginTop;
context.setFontSize(config.fontSize);
itemList.forEach(function (item) {
switch (opts.type) {
case 'line':
context.beginPath();
context.setLineWidth(1);
context.setStrokeStyle(item.color);
context.moveTo(startX - 2, startY + 5);
context.lineTo(startX + 17, startY + 5);
context.stroke();
context.closePath();
context.beginPath();
context.setLineWidth(1);
context.setStrokeStyle('#ffffff');
context.setFillStyle(item.color);
context.moveTo(startX + 7.5, startY + 5);
context.arc(startX + 7.5, startY + 5, 4, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
break;
case 'pie':
case 'ring':
context.beginPath();
context.setFillStyle(item.color);
context.moveTo(startX + 7.5, startY + 5);
context.arc(startX + 7.5, startY + 5, 7, 0, 2 * Math.PI);
context.closePath();
context.fill();
break;
default:
context.beginPath();
context.setFillStyle(item.color);
context.moveTo(startX, startY);
context.rect(startX, startY, 15, 10);
context.closePath();
context.fill();
}
startX += padding + shapeWidth;
context.beginPath();
context.setFillStyle(opts.extra.legendTextColor || '#333333');
context.fillText(item.name, startX, startY + 9);
context.closePath();
context.stroke();
startX += measureText(item.name) + 2 * padding;
});
});
}
function drawPieDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var pieOption = opts.extra.pie || {};
series = getPieDataPoints(series, process);
var centerPosition = {
x: opts.width / 2,
y: (opts.height - config.legendHeight) / 2
};
var radius = Math.min(centerPosition.x - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_, centerPosition.y - config.pieChartLinePadding - config.pieChartTextPadding);
if (opts.dataLabel) {
radius -= 10;
} else {
radius -= 2 * config.padding;
}
series = series.map(function (eachSeries) {
eachSeries._start_ += (pieOption.offsetAngle || 0) * Math.PI / 180;
return eachSeries;
});
series.forEach(function (eachSeries) {
context.beginPath();
context.setLineWidth(2);
context.setStrokeStyle('#ffffff');
context.setFillStyle(eachSeries.color);
context.moveTo(centerPosition.x, centerPosition.y);
context.arc(centerPosition.x, centerPosition.y, radius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI);
context.closePath();
context.fill();
if (opts.disablePieStroke !== true) {
context.stroke();
}
});
if (opts.type === 'ring') {
var innerPieWidth = radius * 0.6;
if (typeof opts.extra.ringWidth === 'number' && opts.extra.ringWidth > 0) {
innerPieWidth = Math.max(0, radius - opts.extra.ringWidth);
}
context.beginPath();
context.setFillStyle(opts.background || '#ffffff');
context.moveTo(centerPosition.x, centerPosition.y);
context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI);
context.closePath();
context.fill();
}
if (opts.dataLabel !== false && process === 1) {
// fix https://github.com/xiaolin3303/wx-charts/issues/132
var valid = false;
for (var i = 0, len = series.length; i < len; i++) {
if (series[i].data > 0) {
valid = true;
break;
}
}
if (valid) {
drawPieText(series, opts, config, context, radius, centerPosition);
}
}
if (process === 1 && opts.type === 'ring') {
drawRingTitle(opts, config, context);
}
return {
center: centerPosition,
radius: radius,
series: series
};
}
function drawRadarDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var radarOption = opts.extra.radar || {};
var coordinateAngle = getRadarCoordinateSeries(opts.categories.length);
var centerPosition = {
x: opts.width / 2,
y: (opts.height - config.legendHeight) / 2
};
var radius = Math.min(centerPosition.x - (getMaxTextListLength(opts.categories) + config.radarLabelTextMargin), centerPosition.y - config.radarLabelTextMargin);
radius -= config.padding;
// draw grid
context.beginPath();
context.setLineWidth(1);
context.setStrokeStyle(radarOption.gridColor || "#cccccc");
coordinateAngle.forEach(function (angle) {
var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition);
context.moveTo(centerPosition.x, centerPosition.y);
context.lineTo(pos.x, pos.y);
});
context.stroke();
context.closePath();
// draw split line grid
var _loop = function _loop(i) {
var startPos = {};
context.beginPath();
context.setLineWidth(1);
context.setStrokeStyle(radarOption.gridColor || "#cccccc");
coordinateAngle.forEach(function (angle, index) {
var pos = convertCoordinateOrigin(radius / config.radarGridCount * i * Math.cos(angle), radius / config.radarGridCount * i * Math.sin(angle), centerPosition);
if (index === 0) {
startPos = pos;
context.moveTo(pos.x, pos.y);
} else {
context.lineTo(pos.x, pos.y);
}
});
context.lineTo(startPos.x, startPos.y);
context.stroke();
context.closePath();
};
for (var i = 1; i <= config.radarGridCount; i++) {
_loop(i);
}
var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process);
radarDataPoints.forEach(function (eachSeries, seriesIndex) {
// 绘制区域数据
context.beginPath();
context.setFillStyle(eachSeries.color);
context.setGlobalAlpha(0.6);
eachSeries.data.forEach(function (item, index) {
if (index === 0) {
context.moveTo(item.position.x, item.position.y);
} else {
context.lineTo(item.position.x, item.position.y);
}
});
context.closePath();
context.fill();
context.setGlobalAlpha(1);
if (opts.dataPointShape !== false) {
var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
var points = eachSeries.data.map(function (item) {
return item.position;
});
drawPointShape(points, eachSeries.color, shape, context);
}
});
// draw label text
drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context);
return {
center: centerPosition,
radius: radius,
angleList: coordinateAngle
};
}
function drawCanvas(opts, context) {
context.draw();
}
var Timing = {
easeIn: function easeIn(pos) {
return Math.pow(pos, 3);
},
easeOut: function easeOut(pos) {
return Math.pow(pos - 1, 3) + 1;
},
easeInOut: function easeInOut(pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 3);
} else {
return 0.5 * (Math.pow(pos - 2, 3) + 2);
}
},
linear: function linear(pos) {
return pos;
}
};
function Animation(opts) {
this.isStop = false;
opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
opts.timing = opts.timing || 'linear';
var delay = 17;
var createAnimationFrame = function createAnimationFrame() {
if (typeof requestAnimationFrame !== 'undefined') {
return requestAnimationFrame;
} else if (typeof setTimeout !== 'undefined') {
return function (step, delay) {
setTimeout(function () {
var timeStamp = +new Date();
step(timeStamp);
}, delay);
};
} else {
return function (step) {
step(null);
};
}
};
var animationFrame = createAnimationFrame();
var startTimeStamp = null;
var _step = function step(timestamp) {
if (timestamp === null || this.isStop === true) {
opts.onProcess && opts.onProcess(1);
opts.onAnimationFinish && opts.onAnimationFinish();
return;
}
if (startTimeStamp === null) {
startTimeStamp = timestamp;
}
if (timestamp - startTimeStamp < opts.duration) {
var process = (timestamp - startTimeStamp) / opts.duration;
var timingFunction = Timing[opts.timing];
process = timingFunction(process);
opts.onProcess && opts.onProcess(process);
animationFrame(_step, delay);
} else {
opts.onProcess && opts.onProcess(1);
opts.onAnimationFinish && opts.onAnimationFinish();
}
};
_step = _step.bind(this);
animationFrame(_step, delay);
}
// stop animation immediately
// and tigger onAnimationFinish
Animation.prototype.stop = function () {
this.isStop = true;
};
function drawCharts(type, opts, config, context) {
var _this = this;
var series = opts.series;
var categories = opts.categories;
series = fillSeriesColor(series, config);
var _calLegendData = calLegendData(series, opts, config),
legendHeight = _calLegendData.legendHeight;
config.legendHeight = legendHeight;
var _calYAxisData = calYAxisData(series, opts, config),
yAxisWidth = _calYAxisData.yAxisWidth;
config.yAxisWidth = yAxisWidth;
if (categories && categories.length) {
var _calCategoriesData = calCategoriesData(categories, opts, config),
xAxisHeight = _calCategoriesData.xAxisHeight,
angle = _calCategoriesData.angle;
config.xAxisHeight = xAxisHeight;
config._xAxisTextAngle_ = angle;
}
if (type === 'pie' || type === 'ring') {
config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(series);
}
var duration = opts.animation ? 1000 : 0;
this.animationInstance && this.animationInstance.stop();
switch (type) {
case 'line':
this.animationInstance = new Animation({
timing: 'easeIn',
duration: duration,
onProcess: function onProcess(process) {
drawYAxisGrid(opts, config, context);
var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
xAxisPoints = _drawLineDataPoints.xAxisPoints,
calPoints = _drawLineDataPoints.calPoints,
eachSpacing = _drawLineDataPoints.eachSpacing;
_this.chartData.xAxisPoints = xAxisPoints;
_this.chartData.calPoints = calPoints;
_this.chartData.eachSpacing = eachSpacing;
drawXAxis(categories, opts, config, context);
drawLegend(opts.series, opts, config, context);
drawYAxis(series, opts, config, context);
drawToolTipBridge(opts, config, context, process);
drawCanvas(opts, context);
},
onAnimationFinish: function onAnimationFinish() {
_this.event.trigger('renderComplete');
}
});
break;
case 'column':
this.animationInstance = new Animation({
timing: 'easeIn',
duration: duration,
onProcess: function onProcess(process) {
drawYAxisGrid(opts, config, context);
var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
xAxisPoints = _drawColumnDataPoints.xAxisPoints,
eachSpacing = _drawColumnDataPoints.eachSpacing;
_this.chartData.xAxisPoints = xAxisPoints;
_this.chartData.eachSpacing = eachSpacing;
drawXAxis(categories, opts, config, context);
drawLegend(opts.series, opts, config, context);
drawYAxis(series, opts, config, context);
drawCanvas(opts, context);
},
onAnimationFinish: function onAnimationFinish() {
_this.event.trigger('renderComplete');
}
});
break;
case 'area':
this.animationInstance = new Animation({
timing: 'easeIn',
duration: duration,
onProcess: function onProcess(process) {
drawYAxisGrid(opts, config, context);
var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
xAxisPoints = _drawAreaDataPoints.xAxisPoints,
calPoints = _drawAreaDataPoints.calPoints,
eachSpacing = _drawAreaDataPoints.eachSpacing;
_this.chartData.xAxisPoints = xAxisPoints;
_this.chartData.calPoints = calPoints;
_this.chartData.eachSpacing = eachSpacing;
drawXAxis(categories, opts, config, context);
drawLegend(opts.series, opts, config, context);
drawYAxis(series, opts, config, context);
drawToolTipBridge(opts, config, context, process);
drawCanvas(opts, context);
},
onAnimationFinish: function onAnimationFinish() {
_this.event.trigger('renderComplete');
}
});
break;
case 'ring':
case 'pie':
this.animationInstance = new Animation({
timing: 'easeInOut',
duration: duration,
onProcess: function onProcess(process) {
_this.chartData.pieData = drawPieDataPoints(series, opts, config, context, process);
drawLegend(opts.series, opts, config, context);
drawCanvas(opts, context);
},
onAnimationFinish: function onAnimationFinish() {
_this.event.trigger('renderComplete');
}
});
break;
case 'radar':
this.animationInstance = new Animation({
timing: 'easeInOut',
duration: duration,
onProcess: function onProcess(process) {
_this.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process);
drawLegend(opts.series, opts, config, context);
drawCanvas(opts, context);
},
onAnimationFinish: function onAnimationFinish() {
_this.event.trigger('renderComplete');
}
});
break;
}
}
// simple event implement
function Event() {
this.events = {};
}
Event.prototype.addEventListener = function (type, listener) {
this.events[type] = this.events[type] || [];
this.events[type].push(listener);
};
Event.prototype.trigger = function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var type = args[0];
var params = args.slice(1);
if (!!this.events[type]) {
this.events[type].forEach(function (listener) {
try {
listener.apply(null, params);
} catch (e) {
console.error(e);
}
});
}
};
var Charts = function Charts(opts) {
opts.title = opts.title || {};
opts.subtitle = opts.subtitle || {};
opts.yAxis = opts.yAxis || {};
opts.xAxis = opts.xAxis || {};
opts.extra = opts.extra || {};
opts.legend = opts.legend === false ? false : true;
opts.animation = opts.animation === false ? false : true;
var config$$1 = assign({}, config);
config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : config$$1.pieChartLinePadding;
config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding;
this.opts = opts;
this.config = config$$1;
this.context = wx.createCanvasContext(opts.canvasId);
// store calcuated chart data
// such as chart point coordinate
this.chartData = {};
this.event = new Event();
this.scrollOption = {
currentOffset: 0,
startTouchX: 0,
distance: 0
};
drawCharts.call(this, opts.type, opts, config$$1, this.context);
};
Charts.prototype.updateData = function () {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.opts.series = data.series || this.opts.series;
this.opts.categories = data.categories || this.opts.categories;
this.opts.title = assign({}, this.opts.title, data.title || {});
this.opts.subtitle = assign({}, this.opts.subtitle, data.subtitle || {});
drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
};
Charts.prototype.stopAnimation = function () {
this.animationInstance && this.animationInstance.stop();
};
Charts.prototype.addEventListener = function (type, listener) {
this.event.addEventListener(type, listener);
};
Charts.prototype.getCurrentDataIndex = function (e) {
var touches = e.touches && e.touches.length ? e.touches : e.changedTouches;
if (touches && touches.length) {
var _touches$ = touches[0],
x = _touches$.x,
y = _touches$.y;
if (this.opts.type === 'pie' || this.opts.type === 'ring') {
return findPieChartCurrentIndex({ x: x, y: y }, this.chartData.pieData);
} else if (this.opts.type === 'radar') {
return findRadarChartCurrentIndex({ x: x, y: y }, this.chartData.radarData, this.opts.categories.length);
} else {
return findCurrentIndex({ x: x, y: y }, this.chartData.xAxisPoints, this.opts, this.config, Math.abs(this.scrollOption.currentOffset));
}
}
return -1;
};
Charts.prototype.showToolTip = function (e) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (this.opts.type === 'line' || this.opts.type === 'area') {
var index = this.getCurrentDataIndex(e);
var currentOffset = this.scrollOption.currentOffset;
var opts = assign({}, this.opts, {
_scrollDistance_: currentOffset,
animation: false
});
if (index > -1) {
var seriesData = getSeriesDataItem(this.opts.series, index);
if (seriesData.length !== 0) {
var _getToolTipData = getToolTipData(seriesData, this.chartData.calPoints, index, this.opts.categories, option),
textList = _getToolTipData.textList,
offset = _getToolTipData.offset;
opts.tooltip = {
textList: textList,
offset: offset,
option: option
};
}
}
drawCharts.call(this, opts.type, opts, this.config, this.context);
}
};
Charts.prototype.scrollStart = function (e) {
if (e.touches[0] && this.opts.enableScroll === true) {
this.scrollOption.startTouchX = e.touches[0].x;
}
};
Charts.prototype.scroll = function (e) {
// TODO throtting...
if (e.touches[0] && this.opts.enableScroll === true) {
var _distance = e.touches[0].x - this.scrollOption.startTouchX;
var currentOffset = this.scrollOption.currentOffset;
var validDistance = calValidDistance(currentOffset + _distance, this.chartData, this.config, this.opts);
this.scrollOption.distance = _distance = validDistance - currentOffset;
var opts = assign({}, this.opts, {
_scrollDistance_: currentOffset + _distance,
animation: false
});
drawCharts.call(this, opts.type, opts, this.config, this.context);
}
};
Charts.prototype.scrollEnd = function (e) {
if (this.opts.enableScroll === true) {
var _scrollOption = this.scrollOption,
currentOffset = _scrollOption.currentOffset,
distance = _scrollOption.distance;
this.scrollOption.currentOffset = currentOffset + distance;
this.scrollOption.distance = 0;
}
};
module.exports = Charts;
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或