减小微信小程序包
Devil
parent
2d1d1428cc
commit
8f344c44e4
|
|
@ -1,135 +0,0 @@
|
|||
import WxCanvas from './wx-canvas';
|
||||
import * as echarts from './echarts';
|
||||
|
||||
let ctx;
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
value: 'ec-canvas'
|
||||
},
|
||||
|
||||
ec: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
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.version.version.split('.').map(n => parseInt(n, 10));
|
||||
const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
|
||||
|| (version[0] === 1 && version[1] === 9 && version[2] >= 91);
|
||||
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;
|
||||
}
|
||||
|
||||
ctx = wx.createCanvasContext(this.data.canvasId, this);
|
||||
|
||||
const canvas = new WxCanvas(ctx, this.data.canvasId);
|
||||
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas;
|
||||
});
|
||||
|
||||
var query = wx.createSelectorQuery().in(this);
|
||||
query.select('.ec-canvas').boundingClientRect(res => {
|
||||
if (typeof callback === 'function') {
|
||||
this.chart = callback(canvas, res.width, res.height);
|
||||
}
|
||||
else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
||||
this.chart = this.data.ec.onInit(canvas, res.width, res.height);
|
||||
}
|
||||
else {
|
||||
this.triggerEvent('init', {
|
||||
canvas: canvas,
|
||||
width: res.width,
|
||||
height: res.height
|
||||
});
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
canvasToTempFilePath(opt) {
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<canvas class="ec-canvas" canvas-id="{{ canvasId }}"
|
||||
bindinit="init"
|
||||
bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
|
||||
</canvas>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,97 +0,0 @@
|
|||
export default class WxCanvas {
|
||||
constructor(ctx, canvasId) {
|
||||
this.ctx = ctx;
|
||||
this.canvasId = canvasId;
|
||||
this.chart = null;
|
||||
|
||||
// this._initCanvas(zrender, ctx);
|
||||
this._initStyle(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
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,4 @@
|
|||
import * as echarts from '../../../../components/ec-canvas/echarts';
|
||||
const app = getApp();
|
||||
|
||||
// 近15日收益走势
|
||||
let profit_chart_obj = null;
|
||||
function init_profit_chart(canvas, width, height) {
|
||||
profit_chart_obj = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
canvas.setChart(profit_chart_obj);
|
||||
return profit_chart_obj;
|
||||
};
|
||||
|
||||
// 近15日推广用户数
|
||||
let user_chart_obj = null;
|
||||
function init_user_chart(canvas, width, height) {
|
||||
user_chart_obj = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
canvas.setChart(user_chart_obj);
|
||||
return user_chart_obj;
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
data_list_loding_status: 1,
|
||||
|
|
@ -37,14 +13,6 @@ Page({
|
|||
user_data: null,
|
||||
profit_data: null,
|
||||
|
||||
// 图表
|
||||
profit_chart: {
|
||||
onInit: init_profit_chart,
|
||||
},
|
||||
user_chart: {
|
||||
onInit: init_user_chart,
|
||||
},
|
||||
|
||||
// 基础配置
|
||||
currency_symbol: app.data.currency_symbol,
|
||||
},
|
||||
|
|
@ -99,16 +67,6 @@ Page({
|
|||
data_bottom_line_status: true,
|
||||
data_list_loding_msg: '',
|
||||
});
|
||||
|
||||
// 图表
|
||||
setTimeout(function()
|
||||
{
|
||||
// 近15日收益走势
|
||||
self.set_profit_chart(data.profit_chart);
|
||||
|
||||
// 近15日推广用户数
|
||||
self.set_profit_user(data.user_chart);
|
||||
}, 200);
|
||||
} else {
|
||||
self.setData({
|
||||
data_list_loding_status: 2,
|
||||
|
|
@ -134,86 +92,6 @@ Page({
|
|||
});
|
||||
},
|
||||
|
||||
// 近15日推广用户数
|
||||
set_profit_user(data) {
|
||||
if ((data || null) != null) {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.name_arr
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: data.data,
|
||||
type: 'bar',
|
||||
areaStyle: {}
|
||||
}]
|
||||
};
|
||||
if (typeof (user_chart_obj) == 'object') {
|
||||
user_chart_obj.setOption(option);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 近15日收益走势图表
|
||||
set_profit_chart(data) {
|
||||
if ((data || null) != null)
|
||||
{
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.name_arr
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: data.data,
|
||||
type: 'line'
|
||||
}]
|
||||
};
|
||||
if (typeof (profit_chart_obj) == 'object') {
|
||||
profit_chart_obj.setOption(option);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.init();
|
||||
|
|
|
|||
|
|
@ -4,8 +4,5 @@
|
|||
"backgroundColorTop": "#ff6a80",
|
||||
"backgroundColorBottom": "#f5f5f5",
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarTitleText": "数据统计",
|
||||
"usingComponents": {
|
||||
"component-ec-canvas": "/components/ec-canvas/ec-canvas"
|
||||
}
|
||||
"navigationBarTitleText": "数据统计"
|
||||
}
|
||||
|
|
@ -50,19 +50,5 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 近15日收益走势 -->
|
||||
<view class="container chart-container bg-white oh spacing-mt">
|
||||
<view class="title">近15日收益走势</view>
|
||||
<component-ec-canvas wx:if="{{(profit_data || null) != null}}" canvas-id="profit-chart" ec="{{ profit_chart }}"></component-ec-canvas>
|
||||
<view wx:else class="cr-888 tc chart-not-data">{{data_list_loding_msg || '暂无数据'}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 近15日推广用户数 -->
|
||||
<view class="container chart-container bg-white oh spacing-mt">
|
||||
<view class="title">近15日推广用户数</view>
|
||||
<component-ec-canvas wx:if="{{(user_data || null) != null}}" canvas-id="user-chart" ec="{{ user_chart }}"></component-ec-canvas>
|
||||
<view wx:else class="cr-888 tc chart-not-data">{{data_list_loding_msg || '暂无数据'}}</view>
|
||||
</view>
|
||||
|
||||
<import src="/pages/common/bottom_line.wxml" />
|
||||
<template is="bottom_line" data="{{status: true}}"></template>
|
||||
|
|
@ -52,18 +52,4 @@
|
|||
.user-container .base-content,
|
||||
.profit-container .base-content {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
/*
|
||||
* 图表
|
||||
*/
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
.chart-container .chart-not-data {
|
||||
margin-top: 230rpx;
|
||||
}
|
||||
|
|
@ -1,28 +1,4 @@
|
|||
import * as echarts from '../../../../components/ec-canvas/echarts';
|
||||
const app = getApp();
|
||||
|
||||
// 近15日收益走势
|
||||
let profit_chart_obj = null;
|
||||
function init_profit_chart(canvas, width, height) {
|
||||
profit_chart_obj = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
canvas.setChart(profit_chart_obj);
|
||||
return profit_chart_obj;
|
||||
};
|
||||
|
||||
// 近15日推广用户数
|
||||
let user_chart_obj = null;
|
||||
function init_user_chart(canvas, width, height) {
|
||||
user_chart_obj = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
canvas.setChart(user_chart_obj);
|
||||
return user_chart_obj;
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
data_list_loding_status: 1,
|
||||
|
|
@ -36,14 +12,6 @@ Page({
|
|||
user_data: null,
|
||||
profit_data: null,
|
||||
|
||||
// 图表
|
||||
profit_chart: {
|
||||
onInit: init_profit_chart,
|
||||
},
|
||||
user_chart: {
|
||||
onInit: init_user_chart,
|
||||
},
|
||||
|
||||
// 基础配置
|
||||
currency_symbol: app.data.currency_symbol,
|
||||
},
|
||||
|
|
@ -97,16 +65,6 @@ Page({
|
|||
data_bottom_line_status: true,
|
||||
data_list_loding_msg: '',
|
||||
});
|
||||
|
||||
// 图表
|
||||
setTimeout(function()
|
||||
{
|
||||
// 近15日收益走势
|
||||
self.set_profit_chart(data.profit_chart);
|
||||
|
||||
// 近15日推广用户数
|
||||
self.set_profit_user(data.user_chart);
|
||||
}, 200);
|
||||
} else {
|
||||
self.setData({
|
||||
data_list_loding_status: 2,
|
||||
|
|
@ -132,86 +90,6 @@ Page({
|
|||
});
|
||||
},
|
||||
|
||||
// 近15日推广用户数
|
||||
set_profit_user(data) {
|
||||
if ((data || null) != null) {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.name_arr
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: data.data,
|
||||
type: 'bar',
|
||||
areaStyle: {}
|
||||
}]
|
||||
};
|
||||
if (typeof (user_chart_obj) == 'object') {
|
||||
user_chart_obj.setOption(option);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 近15日收益走势图表
|
||||
set_profit_chart(data) {
|
||||
if ((data || null) != null)
|
||||
{
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.name_arr
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: data.data,
|
||||
type: 'line'
|
||||
}]
|
||||
};
|
||||
if (typeof (profit_chart_obj) == 'object') {
|
||||
profit_chart_obj.setOption(option);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.init();
|
||||
|
|
|
|||
|
|
@ -4,8 +4,5 @@
|
|||
"backgroundColorTop": "#1d1611",
|
||||
"backgroundColorBottom": "#f5f5f5",
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarTitleText": "数据统计",
|
||||
"usingComponents": {
|
||||
"component-ec-canvas": "/components/ec-canvas/ec-canvas"
|
||||
}
|
||||
"navigationBarTitleText": "数据统计"
|
||||
}
|
||||
|
|
@ -44,19 +44,5 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 近15日收益走势 -->
|
||||
<view class="container chart-container bg-white oh spacing-mt">
|
||||
<view class="title">近15日收益走势</view>
|
||||
<component-ec-canvas wx:if="{{(profit_data || null) != null}}" canvas-id="profit-chart" ec="{{ profit_chart }}"></component-ec-canvas>
|
||||
<view wx:else class="cr-888 tc chart-not-data">{{data_list_loding_msg || '暂无数据'}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 近15日推广用户数 -->
|
||||
<view class="container chart-container bg-white oh spacing-mt">
|
||||
<view class="title">近15日推广用户数</view>
|
||||
<component-ec-canvas wx:if="{{(user_data || null) != null}}" canvas-id="user-chart" ec="{{ user_chart }}"></component-ec-canvas>
|
||||
<view wx:else class="cr-888 tc chart-not-data">{{data_list_loding_msg || '暂无数据'}}</view>
|
||||
</view>
|
||||
|
||||
<import src="/pages/common/bottom_line.wxml" />
|
||||
<template is="bottom_line" data="{{status: true}}"></template>
|
||||
|
|
@ -44,18 +44,4 @@
|
|||
*/
|
||||
.profit-container .item {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
/*
|
||||
* 图表
|
||||
*/
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
.chart-container .chart-not-data {
|
||||
margin-top: 230rpx;
|
||||
}
|
||||
Loading…
Reference in New Issue