添加图表组件和翻页下拉刷新组件
This commit is contained in:
parent
5afb9a55ec
commit
9d1ad49e60
3
app.json
3
app.json
@ -43,6 +43,7 @@
|
||||
"usingComponents": {
|
||||
"mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar",
|
||||
"i-load-more": "components/load-more/index",
|
||||
"i-no-data": "components/no-data-available/index"
|
||||
"i-no-data": "components/no-data-available/index",
|
||||
"scroll-y": "components/scroll-y/scroll-y"
|
||||
}
|
||||
}
|
||||
|
||||
54
app.wxss
54
app.wxss
@ -13,12 +13,22 @@ button {
|
||||
background-color: #01ae42!important;
|
||||
}
|
||||
|
||||
/* 禁止点击 */
|
||||
.i-pointer-events{
|
||||
pointer-events: none;
|
||||
}
|
||||
.i-background-color{
|
||||
background-color: #01ae42 !important;
|
||||
}
|
||||
.i-background-color-t{
|
||||
background-color: #01ae4210 !important;
|
||||
}
|
||||
.i-color{
|
||||
color: #01ae42 !important;
|
||||
}
|
||||
.i-border-c-s{
|
||||
border: 2rpx solid #01ae42 !important;
|
||||
}
|
||||
.i-border-color{
|
||||
border: 2rpx solid #01ae42 !important;
|
||||
}
|
||||
@ -42,3 +52,47 @@ button {
|
||||
.i-yellow-color{
|
||||
color: #ffb565 !important;
|
||||
}
|
||||
.i-white{
|
||||
color: white;
|
||||
}
|
||||
.i-red{
|
||||
color: red;
|
||||
}
|
||||
.i-green{
|
||||
color: #48d848;
|
||||
}
|
||||
.i-yellow{
|
||||
color: #ffa726;
|
||||
}
|
||||
.i-blue{
|
||||
color: #01ae42;
|
||||
}
|
||||
|
||||
.card{
|
||||
width: calc(100% - 60rpx);
|
||||
margin: auto;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.i-flex-a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.i-flex-j{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.i-flex-j-a{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.i-hide{
|
||||
display: none !important;
|
||||
}
|
||||
/* 定位 */
|
||||
.i-screen-positioning{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
290
components/scroll-y/scroll-y.js
Normal file
290
components/scroll-y/scroll-y.js
Normal file
@ -0,0 +1,290 @@
|
||||
var current = 0; //默认当前页面为第0页
|
||||
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true //开启多slot支持
|
||||
},
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
//scroll-view视图容器高度
|
||||
height: {
|
||||
type: String,
|
||||
value: "0px"
|
||||
},
|
||||
//竖向滚动条位置
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
//自定义下拉刷新阈值(单位：px)
|
||||
refresherThreshold: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
//自定义下拉刷新区域背景颜色
|
||||
refresherBackground: {
|
||||
type: String,
|
||||
value: "#f6f6f6"
|
||||
},
|
||||
//下拉刷新状态(false表示未被下拉，true表示被下拉)
|
||||
refresherTriggered: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
//下拉样式(可取值为：cricle-progress、diy)
|
||||
pullStyle: {
|
||||
type: String,
|
||||
value: "circle-progress"
|
||||
},
|
||||
//刷新样式(可取值:circle、clock、diy)
|
||||
refreshStyle: {
|
||||
type: String,
|
||||
value: "circle"
|
||||
},
|
||||
//下拉提示
|
||||
pullTip: {
|
||||
type: String,
|
||||
value: "下拉刷新"
|
||||
},
|
||||
//释放提示
|
||||
releaseTip: {
|
||||
type: String,
|
||||
value: "释放刷新"
|
||||
},
|
||||
//刷新提示
|
||||
refreshTip: {
|
||||
type: String,
|
||||
value: "正在刷新中"
|
||||
},
|
||||
//提示字体颜色
|
||||
tipTextColor:{
|
||||
type:String,
|
||||
value:"#b2b2b2"
|
||||
},
|
||||
//是否开启加载更多(默认不开启)
|
||||
loadMore: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
//是否显示加载动画
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
//加载样式
|
||||
loadStyle: {
|
||||
type: String,
|
||||
value: "circle"
|
||||
},
|
||||
//加载提示
|
||||
loadTip: {
|
||||
type: String,
|
||||
value: "正在加载中"
|
||||
},
|
||||
//加载背景
|
||||
loadBackground: {
|
||||
type: String,
|
||||
value: "#f6f6f6"
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
canRelease: false, //是否可以释放刷新
|
||||
isRefreshing: false //标识是否刷新
|
||||
},
|
||||
/**
|
||||
* 组件生命周期
|
||||
*/
|
||||
lifetimes: {
|
||||
attached: function () {
|
||||
var throttleLoad = this._throttleLoad(2000);
|
||||
this.setData({
|
||||
throttleLoad: throttleLoad
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
//下拉
|
||||
onPulling: function (event) {
|
||||
var p = Math.min(event.detail.dy / this.data.refresherThreshold, 1);
|
||||
this._modifyTip(p);
|
||||
switch (this.data.pullStyle) {
|
||||
case "circle-progress":
|
||||
this._circlrProgress(p);
|
||||
// this.triggerEvent("refresherpulling", {
|
||||
// dy: event.detail.dy
|
||||
// }, {});
|
||||
break;
|
||||
case "diy":
|
||||
this.triggerEvent("refresherpulling", {
|
||||
dy: event.detail.dy
|
||||
}, {});
|
||||
break;
|
||||
}
|
||||
},
|
||||
//刷新
|
||||
onRefresh: function (event) {
|
||||
this.setData({
|
||||
isRefreshing: true,
|
||||
refresherTriggered: true
|
||||
});
|
||||
this.triggerEvent("refresherrefresh", { dy: event.detail.dy }, {});
|
||||
//复位
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
refresherTriggered: false
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
//复位
|
||||
onRestore: function () {
|
||||
this._restore();
|
||||
this.triggerEvent("refresherresotre", {}, {});
|
||||
},
|
||||
//终止
|
||||
onAbort: function () {
|
||||
this._restore();
|
||||
this.triggerEvent("refresherabort", {}, {});
|
||||
},
|
||||
//圆环进度
|
||||
_circlrProgress: function (p) {
|
||||
if (p <= 0.5) {
|
||||
this.animate('.right-circle', [{
|
||||
rotate: 135 + p * 360
|
||||
}], 0);
|
||||
} else {
|
||||
this.animate('.right-circle', [{ rotate: 315 }], 0); //防止下拉过快，右边圈不完整
|
||||
this.animate('.left-circle', [{
|
||||
rotate: 135 + (p - 0.5) * 360
|
||||
}], 0);
|
||||
}
|
||||
},
|
||||
//修改提示
|
||||
_modifyTip: function (p) {
|
||||
var canRelease = false;
|
||||
if (p == 1) {
|
||||
canRelease = true;
|
||||
}
|
||||
this.setData({
|
||||
canRelease: canRelease
|
||||
});
|
||||
},
|
||||
//复位
|
||||
_restore: function () {
|
||||
this.setData({
|
||||
isRefreshing: false
|
||||
});
|
||||
switch (this.data.pullStyle) {
|
||||
case "circle-progress":
|
||||
this._circleProgressRestore();
|
||||
break;
|
||||
case "diy":
|
||||
break;
|
||||
}
|
||||
},
|
||||
//圆环进度复位
|
||||
_circleProgressRestore: function () {
|
||||
this.animate(".left-circle", [{
|
||||
rotate: 135
|
||||
}], 0);
|
||||
this.animate(".right-circle", [{
|
||||
rotate: 135
|
||||
}], 0);
|
||||
},
|
||||
/**
|
||||
* 上拉加载相关函数
|
||||
*/
|
||||
//开始触摸
|
||||
_onTouchStart: function (event) {
|
||||
var _this = this;
|
||||
var touchStartY = event.touches[0].clientY; //记录触摸开始位置
|
||||
_this.createSelectorQuery().select(".scroll-y").fields({
|
||||
size: true,
|
||||
scrollOffset: true
|
||||
}, (result) => {
|
||||
_this.setData({
|
||||
scrollViewHeight: result.height, //scoll-view容器高度(单位为px)
|
||||
scrollHeight: result.scrollHeight,
|
||||
touchStartY: touchStartY
|
||||
});
|
||||
}).exec();
|
||||
},
|
||||
//触摸移动
|
||||
onTouchMove: function (event) {
|
||||
this._getScrollInfo(event.touches[0].clientY);
|
||||
},
|
||||
//触摸结束
|
||||
onTouchEnd: function (event) {
|
||||
this._getScrollInfo(event.changedTouches[0].clientY);
|
||||
},
|
||||
/**
|
||||
* 获取当前scroll-view的scrollTop值
|
||||
* 用来判断是否加载
|
||||
*/
|
||||
_getScrollInfo: function (touchEndY) {
|
||||
var _this = this;
|
||||
_this.createSelectorQuery().select(".scroll-y").fields({
|
||||
scrollOffset: true
|
||||
}, (result) => {
|
||||
_this.setData({
|
||||
nowScrollTop: result.scrollTop
|
||||
}, () => {
|
||||
_this._isLoad(touchEndY);
|
||||
});
|
||||
}).exec();
|
||||
},
|
||||
//是否加载
|
||||
_isLoad: function (touchEndY) {
|
||||
var touchStartY = this.data.touchStartY; //开始触摸时候的位置
|
||||
var nowScrollTop = this.data.nowScrollTop; //当前的scrollTop值
|
||||
var scrollHeight = this.data.scrollHeight; //scroll-view容器内高度
|
||||
var height = this.data.scrollViewHeight; //scoll-view容器高度
|
||||
var loadMore = this.data.loadMore; //是否开启加载
|
||||
if (loadMore && touchEndY < touchStartY && (scrollHeight - nowScrollTop - height < 50)) {
|
||||
this.setData({
|
||||
showLoading: true
|
||||
});
|
||||
this.data.throttleLoad();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 节流加载(采用定时器加时间戳方式)
|
||||
* @param {执行时间} delay
|
||||
*/
|
||||
_throttleLoad: function (delay) {
|
||||
var _this = this;
|
||||
var timer = null;
|
||||
var startTime = Date.now();
|
||||
return function () {
|
||||
var currentTime = Date.now();
|
||||
var remainTime = delay - (currentTime - startTime);
|
||||
clearTimeout(timer);
|
||||
if (remainTime <= 0) {
|
||||
_this.loadMore();
|
||||
startTime = Date.now();
|
||||
} else {
|
||||
timer = setTimeout(function () { _this.loadMore() }, remainTime);
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 加载更多
|
||||
*/
|
||||
loadMore: function () {
|
||||
current += 1;
|
||||
this.triggerEvent("loadmore", { current, current }, {});
|
||||
//复位
|
||||
setTimeout(() => {
|
||||
this.setData({ showLoading: false });
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
})
|
||||
4
components/scroll-y/scroll-y.json
Normal file
4
components/scroll-y/scroll-y.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
108
components/scroll-y/scroll-y.wxml
Normal file
108
components/scroll-y/scroll-y.wxml
Normal file
@ -0,0 +1,108 @@
|
||||
<!--components/scroll-y/scroll-y.wxml-->
|
||||
<!--
|
||||
@author:hgqin
|
||||
自定义scroll-y组件, 基于scroll-view的自定义下拉刷新和上拉加载
|
||||
-->
|
||||
|
||||
<scroll-view
|
||||
class="scroll-y"
|
||||
style="height:{{height}}"
|
||||
scroll-y="{{true}}"
|
||||
scroll-top="{{scrollTop}}"
|
||||
scroll-anichoring="{{true}}"
|
||||
refresher-enabled="{{true}}"
|
||||
refresher-threshold="{{refresherThreshold}}"
|
||||
refresher-default-style="none"
|
||||
refresher-background="{{refresherBackground}}"
|
||||
refresher-triggered="{{refresherTriggered}}"
|
||||
bindrefresherpulling="onPulling"
|
||||
bindrefresherrefresh="onRefresh"
|
||||
bindrefresherrestore="onRestore"
|
||||
bindrefresherabort="onAbort"
|
||||
bindtouchstart="_onTouchStart"
|
||||
bindtouchmove="onTouchMove"
|
||||
bindtouchend="onTouchEnd"
|
||||
>
|
||||
<view slot="refresher" class="refresh-container" style="height:{{refresherThreshold}}px">
|
||||
<!--下拉动画-->
|
||||
<view class="pull-animation" wx:if="{{!isRefreshing}}">
|
||||
|
||||
<!--圆形进度条样式-->
|
||||
<block wx:if="{{pullStyle === 'circle-progress'}}">
|
||||
<view class="circle-progress">
|
||||
<view class="circle-wrap left-circle-wrap">
|
||||
<view class="circle left-circle"></view>
|
||||
</view>
|
||||
<view class="circle-wrap right-circle-wrap">
|
||||
<view class="circle right-circle"></view>
|
||||
</view>
|
||||
<view class="circle-arrow">
|
||||
<view class="circle-arrow-down"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!--圆形进度条样式end-->
|
||||
|
||||
<!--自定义-->
|
||||
<block wx:if="{{pullStyle === 'diy'}}">
|
||||
<slot name="pull-animation"></slot>
|
||||
</block>
|
||||
<!--自定义-->
|
||||
|
||||
<!--提示（下拉提示和释放提示）-->
|
||||
<view class="tip" wx:if="{{!canRelease}}" style="color:{{tipTextColor}}">{{pullTip}}</view>
|
||||
<view class="tip" wx:else style="color:{{tipTextColor}}">{{releaseTip}}</view>
|
||||
<!--提示end-->
|
||||
|
||||
</view>
|
||||
<!----------------------------------------下拉动画end---------------------------------------->
|
||||
|
||||
<!----------------------------------------刷新动画-------------------------------------------->
|
||||
<view class="refresh-animation" wx:else>
|
||||
|
||||
<!--圆形-->
|
||||
<block wx:if="{{refreshStyle === 'circle'}}">
|
||||
<view class="circle-refresh"></view>
|
||||
</block>
|
||||
<!--圆形end-->
|
||||
|
||||
<!--时钟类型-->
|
||||
<block wx:elif="{{refreshStyle === 'clock'}}">
|
||||
<view class="clock-refresh"></view>
|
||||
</block>
|
||||
<!--时钟类型end-->
|
||||
|
||||
<!--自定义-->
|
||||
<block wx:if="{{refreshStyle === 'diy'}}">
|
||||
<slot name="refresh-animation"></slot>
|
||||
</block>
|
||||
<!--自定义-->
|
||||
|
||||
<!--刷新提示-->
|
||||
<view class="tip" style="color:{{tipTextColor}}">{{refreshTip}}</view>
|
||||
<!--刷新提示end-->
|
||||
</view>
|
||||
<!--刷新动画end-->
|
||||
|
||||
</view>
|
||||
|
||||
<!--内容-->
|
||||
<slot name="scroll-content"></slot>
|
||||
<!--内容 end -->
|
||||
|
||||
<!--加载动画-->
|
||||
<view class="loading" style="background-color:{{loadBackground}}" wx:if="{{showLoading}}">
|
||||
<block wx:if="{{loadStyle === 'circle'}}">
|
||||
<view class="circle-refresh"></view>
|
||||
</block>
|
||||
<block wx:elif="{{loadStyle === 'clock'}}">
|
||||
<view class="clock-refresh"></view>
|
||||
</block>
|
||||
<block wx:elif="{{loadStyle === 'diy'}}">
|
||||
<slot name="load-animation"></slot>
|
||||
</block>
|
||||
<view class="tip" style="color:{{tipTextColor}}">{{loadTip}}</view>
|
||||
</view>
|
||||
<!--加载动画end-->
|
||||
|
||||
</scroll-view>
|
||||
164
components/scroll-y/scroll-y.wxss
Normal file
164
components/scroll-y/scroll-y.wxss
Normal file
@ -0,0 +1,164 @@
|
||||
/* components/scroll-y/scroll-y.wxss */
|
||||
.scroll-y {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**refresher-container**/
|
||||
.refresh-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pull-animation,
|
||||
.refresh-animation {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tip{
|
||||
display: inline-block;
|
||||
margin-left:10px;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
/**圆环进度条**/
|
||||
.circle-progress{
|
||||
position: relative;
|
||||
width:20px;
|
||||
height:20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circle-wrap{
|
||||
position: absolute;
|
||||
top:0;
|
||||
width:10px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
z-index:9999;
|
||||
}
|
||||
|
||||
.circle-arrow{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:20px;
|
||||
height:20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circle-arrow-down{
|
||||
position: absolute;
|
||||
left:7px;
|
||||
top:6px;
|
||||
width:5px;
|
||||
height: 5px;
|
||||
border-width: 0 1px 1px 0;
|
||||
border-color: #b2b2b2;
|
||||
border-style: solid;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
.left-circle-wrap{
|
||||
left:0;
|
||||
}
|
||||
|
||||
.right-circle-wrap{
|
||||
right:0;
|
||||
}
|
||||
|
||||
.circle{
|
||||
position: absolute;
|
||||
width:18px;
|
||||
height:18px;
|
||||
border:1px solid transparent;
|
||||
border-radius: 50%;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.left-circle{
|
||||
left:0;
|
||||
border-left-color:#b2b2b2;
|
||||
border-top-color:#b2b2b2;
|
||||
}
|
||||
|
||||
.right-circle{
|
||||
right:0;
|
||||
border-right-color:#b2b2b2;
|
||||
border-bottom-color: #b2b2b2;
|
||||
}
|
||||
|
||||
/**圆环刷新**/
|
||||
.circle-refresh{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border:2px solid rgba(150, 150, 150, 0.2);
|
||||
border-radius: 50%;
|
||||
border-top-color:rgb(150, 150, 150);
|
||||
box-sizing: border-box;
|
||||
animation:circleRefreshAnimation 1s 0s infinite linear normal;
|
||||
}
|
||||
|
||||
@keyframes circleRefreshAnimation{
|
||||
0%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50%{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/**时钟刷新**/
|
||||
.clock-refresh{
|
||||
position: relative;
|
||||
width:20px;
|
||||
height:20px;
|
||||
border:1px solid #b2b2b2;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clock-refresh::before{
|
||||
content:'';
|
||||
position: absolute;
|
||||
left:8px;
|
||||
top:2px;
|
||||
width:2px;
|
||||
height: 8px;
|
||||
border-left:1px solid #b2b2b2;
|
||||
transform-origin: 0% 100%;
|
||||
animation:clockRefreshAnimation 1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes clockRefreshAnimation{
|
||||
0%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50%{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**加载**/
|
||||
.loading{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding:20px 0;
|
||||
}
|
||||
250
ec-canvas/ec-canvas.js
Normal file
250
ec-canvas/ec-canvas.js
Normal file
@ -0,0 +1,250 @@
|
||||
import WxCanvas from './wx-canvas';
|
||||
import * as echarts from './echarts';
|
||||
|
||||
let ctx;
|
||||
|
||||
function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i])
|
||||
const num2 = parseInt(v2[i])
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
value: 'ec-canvas'
|
||||
},
|
||||
|
||||
ec: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
forceUseOldCanvas: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
isUseNewCanvas: false
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
// Disable prograssive because drawImage doesn't support DOM as parameter
|
||||
// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
|
||||
echarts.registerPreprocessor(option => {
|
||||
if (option && option.series) {
|
||||
if (option.series.length > 0) {
|
||||
option.series.forEach(series => {
|
||||
series.progressive = 0;
|
||||
});
|
||||
}
|
||||
else if (typeof option.series === 'object') {
|
||||
option.series.progressive = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.data.ec) {
|
||||
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
|
||||
+ 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.data.ec.lazyLoad) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init: function (callback) {
|
||||
const version = wx.getSystemInfoSync().SDKVersion
|
||||
|
||||
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
|
||||
const forceUseOldCanvas = this.data.forceUseOldCanvas;
|
||||
const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
|
||||
this.setData({ isUseNewCanvas });
|
||||
|
||||
if (forceUseOldCanvas && canUseNewCanvas) {
|
||||
console.warn('开发者强制使用旧canvas,建议关闭');
|
||||
}
|
||||
|
||||
if (isUseNewCanvas) {
|
||||
// console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
|
||||
// 2.9.0 可以使用 <canvas type="2d"></canvas>
|
||||
this.initByNewWay(callback);
|
||||
} else {
|
||||
const isValid = compareVersion(version, '1.9.91') >= 0
|
||||
if (!isValid) {
|
||||
console.error('微信基础库版本过低，需大于等于 1.9.91。'
|
||||
+ '参见：https://github.com/ecomfe/echarts-for-weixin'
|
||||
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
|
||||
return;
|
||||
} else {
|
||||
console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
|
||||
this.initByOldWay(callback);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initByOldWay(callback) {
|
||||
// 1.9.91 <= version < 2.9.0：原来的方式初始化
|
||||
ctx = wx.createCanvasContext(this.data.canvasId, this);
|
||||
const canvas = new WxCanvas(ctx, this.data.canvasId, false);
|
||||
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas;
|
||||
});
|
||||
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
|
||||
const canvasDpr = 1
|
||||
var query = wx.createSelectorQuery().in(this);
|
||||
query.select('.ec-canvas').boundingClientRect(res => {
|
||||
if (typeof callback === 'function') {
|
||||
this.chart = callback(canvas, res.width, res.height, canvasDpr);
|
||||
}
|
||||
else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
||||
this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
|
||||
}
|
||||
else {
|
||||
this.triggerEvent('init', {
|
||||
canvas: canvas,
|
||||
width: res.width,
|
||||
height: res.height,
|
||||
canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
|
||||
});
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
initByNewWay(callback) {
|
||||
// version >= 2.9.0：使用新的方式初始化
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query
|
||||
.select('.ec-canvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(res => {
|
||||
const canvasNode = res[0].node
|
||||
this.canvasNode = canvasNode
|
||||
|
||||
const canvasDpr = wx.getSystemInfoSync().pixelRatio
|
||||
const canvasWidth = res[0].width
|
||||
const canvasHeight = res[0].height
|
||||
|
||||
const ctx = canvasNode.getContext('2d')
|
||||
|
||||
const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas
|
||||
})
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
|
||||
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
||||
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
|
||||
} else {
|
||||
this.triggerEvent('init', {
|
||||
canvas: canvas,
|
||||
width: canvasWidth,
|
||||
height: canvasHeight,
|
||||
dpr: canvasDpr
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
canvasToTempFilePath(opt) {
|
||||
if (this.data.isUseNewCanvas) {
|
||||
// 新版
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query
|
||||
.select('.ec-canvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(res => {
|
||||
const canvasNode = res[0].node
|
||||
opt.canvas = canvasNode
|
||||
wx.canvasToTempFilePath(opt)
|
||||
})
|
||||
} else {
|
||||
// 旧的
|
||||
if (!opt.canvasId) {
|
||||
opt.canvasId = this.data.canvasId;
|
||||
}
|
||||
ctx.draw(true, () => {
|
||||
wx.canvasToTempFilePath(opt, this);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
touchStart(e) {
|
||||
if (this.chart && e.touches.length > 0) {
|
||||
var touch = e.touches[0];
|
||||
var handler = this.chart.getZr().handler;
|
||||
handler.dispatch('mousedown', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.dispatch('mousemove', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), 'start');
|
||||
}
|
||||
},
|
||||
|
||||
touchMove(e) {
|
||||
if (this.chart && e.touches.length > 0) {
|
||||
var touch = e.touches[0];
|
||||
var handler = this.chart.getZr().handler;
|
||||
handler.dispatch('mousemove', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), 'change');
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd(e) {
|
||||
if (this.chart) {
|
||||
const touch = e.changedTouches ? e.changedTouches[0] : {};
|
||||
var handler = this.chart.getZr().handler;
|
||||
handler.dispatch('mouseup', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.dispatch('click', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), 'end');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function wrapTouch(event) {
|
||||
for (let i = 0; i < event.touches.length; ++i) {
|
||||
const touch = event.touches[i];
|
||||
touch.offsetX = touch.x;
|
||||
touch.offsetY = touch.y;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
4
ec-canvas/ec-canvas.json
Normal file
4
ec-canvas/ec-canvas.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
4
ec-canvas/ec-canvas.wxml
Normal file
4
ec-canvas/ec-canvas.wxml
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- 新的：接口对其了H5 -->
|
||||
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
|
||||
<!-- 旧的 -->
|
||||
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
|
||||
4
ec-canvas/ec-canvas.wxss
Normal file
4
ec-canvas/ec-canvas.wxss
Normal file
@ -0,0 +1,4 @@
|
||||
.ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
19
ec-canvas/echarts.js
Normal file
19
ec-canvas/echarts.js
Normal file
File diff suppressed because one or more lines are too long
121
ec-canvas/wx-canvas.js
Normal file
121
ec-canvas/wx-canvas.js
Normal file
@ -0,0 +1,121 @@
|
||||
export default class WxCanvas {
|
||||
constructor(ctx, canvasId, isNew, canvasNode) {
|
||||
this.ctx = ctx;
|
||||
this.canvasId = canvasId;
|
||||
this.chart = null;
|
||||
this.isNew = isNew
|
||||
if (isNew) {
|
||||
this.canvasNode = canvasNode;
|
||||
}
|
||||
else {
|
||||
this._initStyle(ctx);
|
||||
}
|
||||
|
||||
// this._initCanvas(zrender, ctx);
|
||||
|
||||
this._initEvent();
|
||||
}
|
||||
|
||||
getContext(contextType) {
|
||||
if (contextType === '2d') {
|
||||
return this.ctx;
|
||||
}
|
||||
}
|
||||
|
||||
// canvasToTempFilePath(opt) {
|
||||
// if (!opt.canvasId) {
|
||||
// opt.canvasId = this.canvasId;
|
||||
// }
|
||||
// return wx.canvasToTempFilePath(opt, this);
|
||||
// }
|
||||
|
||||
setChart(chart) {
|
||||
this.chart = chart;
|
||||
}
|
||||
|
||||
attachEvent() {
|
||||
// noop
|
||||
}
|
||||
|
||||
detachEvent() {
|
||||
// noop
|
||||
}
|
||||
|
||||
_initCanvas(zrender, ctx) {
|
||||
zrender.util.getContext = function () {
|
||||
return ctx;
|
||||
};
|
||||
|
||||
zrender.util.$override('measureText', function (text, font) {
|
||||
ctx.font = font || '12px sans-serif';
|
||||
return ctx.measureText(text);
|
||||
});
|
||||
}
|
||||
|
||||
_initStyle(ctx) {
|
||||
var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
|
||||
'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
|
||||
'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
|
||||
|
||||
styles.forEach(style => {
|
||||
Object.defineProperty(ctx, style, {
|
||||
set: value => {
|
||||
if (style !== 'fillStyle' && style !== 'strokeStyle'
|
||||
|| value !== 'none' && value !== null
|
||||
) {
|
||||
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
ctx.createRadialGradient = () => {
|
||||
return ctx.createCircularGradient(arguments);
|
||||
};
|
||||
}
|
||||
|
||||
_initEvent() {
|
||||
this.event = {};
|
||||
const eventNames = [{
|
||||
wxName: 'touchStart',
|
||||
ecName: 'mousedown'
|
||||
}, {
|
||||
wxName: 'touchMove',
|
||||
ecName: 'mousemove'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'mouseup'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'click'
|
||||
}];
|
||||
|
||||
eventNames.forEach(name => {
|
||||
this.event[name.wxName] = e => {
|
||||
const touch = e.touches[0];
|
||||
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
||||
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
set width(w) {
|
||||
if (this.canvasNode) this.canvasNode.width = w
|
||||
}
|
||||
set height(h) {
|
||||
if (this.canvasNode) this.canvasNode.height = h
|
||||
}
|
||||
|
||||
get width() {
|
||||
if (this.canvasNode)
|
||||
return this.canvasNode.width
|
||||
return 0
|
||||
}
|
||||
get height() {
|
||||
if (this.canvasNode)
|
||||
return this.canvasNode.height
|
||||
return 0
|
||||
}
|
||||
}
|
||||
@ -21,23 +21,25 @@
|
||||
"checkSiteMap": true,
|
||||
"uploadWithSourceMap": true,
|
||||
"compileHotReLoad": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"useMultiFrameRuntime": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": false,
|
||||
"useApiHostProcess": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"enableEngineNative": false,
|
||||
"bundle": false,
|
||||
"useIsolateContext": true,
|
||||
"useCompilerModule": true,
|
||||
"userConfirmedUseCompilerModuleSwitch": false,
|
||||
"useIsolateContext": false,
|
||||
"userConfirmedBundleSwitch": false,
|
||||
"packNpmManually": false,
|
||||
"packNpmRelationList": [],
|
||||
"minifyWXSS": true
|
||||
"minifyWXSS": true,
|
||||
"disableUseStrict": false,
|
||||
"showES6CompileOption": false,
|
||||
"useCompilerPlugins": false,
|
||||
"minifyWXML": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.16.0",
|
||||
|
||||
9
utils/filter/filter.wxs
Normal file
9
utils/filter/filter.wxs
Normal file
@ -0,0 +1,9 @@
|
||||
var common = {
|
||||
strSlice: function (_num) {
|
||||
return _num.slice(0,10)
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
str: common.strSlice,
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { getRequest, postRequest } from './request.js'
|
||||
|
||||
// 查询用户信息
|
||||
function queryInfo(app) {
|
||||
let that = this;
|
||||
getRequest('/v1/m/info',{}).then(res => {
|
||||
let user_info = {};
|
||||
user_info.name = ''
|
||||
@ -23,21 +24,23 @@ function queryInfo(app) {
|
||||
app.globalData.member_info = res.data.member_info ? res.data.member_info : member_info
|
||||
app.globalData.operator_info = res.data.operator_info ? res.data.operator_info : operator_info
|
||||
}).catch(err => {
|
||||
console.log(err,'03')
|
||||
that.signIn(err)
|
||||
})
|
||||
}
|
||||
|
||||
// 查询平台信息
|
||||
function platformInfo(app) {
|
||||
let that = this;
|
||||
getRequest('/v1/m/platform/info',{}).then(res => {
|
||||
app.globalData.platformInfo = res.data
|
||||
}).catch(err => {
|
||||
console.log(err,'03')
|
||||
that.signIn(err)
|
||||
})
|
||||
}
|
||||
|
||||
// 重新登录
|
||||
function queryLogin(app) {
|
||||
let that = this;
|
||||
wx.login({
|
||||
success: function (loginRes) {
|
||||
if (loginRes.errMsg === 'login:ok') {
|
||||
@ -47,7 +50,7 @@ function queryLogin(app) {
|
||||
app.globalData.actor = res.data.info.actor
|
||||
app.globalData.info = res.data.info
|
||||
}).catch(err => {
|
||||
console.log(err,'03')
|
||||
that.signIn(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -55,20 +58,28 @@ function queryLogin(app) {
|
||||
}
|
||||
|
||||
// 登录过期处理
|
||||
function signIn(err) {
|
||||
if (err.statusCode === 401) {
|
||||
wx.showToast({ title: '登录过期，重新加载小程序', icon: 'none', duration: 3000 })
|
||||
setTimeout(function () {
|
||||
// 获取缓存里的扫码内容 登录
|
||||
let bind = wx.getStorageSync('bind')
|
||||
app.loginCloudBird(bind);
|
||||
}, 2000)
|
||||
return
|
||||
}
|
||||
let errMsg = err.data ? err.data.error_message : '';
|
||||
if (errMsg !== '') {
|
||||
wx.showToast({ title: errMsg, icon: 'none', duration: 2000 })
|
||||
}
|
||||
function signIn(err,app) {
|
||||
switch (err.statusCode) {
|
||||
case 401:
|
||||
wx.showToast({ title: '登录过期，重新加载小程序', icon: 'none', duration: 3000 })
|
||||
setTimeout(function () {
|
||||
let bind = wx.getStorageSync('bind') // 获取缓存里的扫码内容 登录
|
||||
app.loginCloudBird(bind);
|
||||
}, 2000)
|
||||
break
|
||||
case 404:
|
||||
case 500:
|
||||
case 501:
|
||||
case 502:
|
||||
wx.showToast({ title: '服务器正在维护，请稍后访问', icon: 'none', duration: 3000 })
|
||||
break
|
||||
default:
|
||||
let errMsg = err.data ? err.data.error_message : '';
|
||||
if (errMsg !== '') {
|
||||
wx.showToast({ title: errMsg, icon: 'none', duration: 2000 })
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user