老登陆，经营分析，被挤掉提示
This commit is contained in:
xk_guohonglei
@@ -1,39 +1,32 @@
|
||||
<template>
|
||||
<view class="qiun-columns">
|
||||
<!--#ifdef H5 -->
|
||||
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
||||
<view class="qiun-title-dot-light">页面地址</view>
|
||||
</view>
|
||||
<view class="qiun-bg-white qiun-padding">
|
||||
<text>pages/basic/area/time</text>
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
||||
<view class="qiun-title-dot-light">发生金额</view>
|
||||
</view>
|
||||
<view class="qiun-charts">
|
||||
<!--#ifdef MP-ALIPAY -->
|
||||
<canvas
|
||||
canvas-id="canvasLineA"
|
||||
id="canvasLineA"
|
||||
class="charts"
|
||||
:width="cWidth*pixelRatio"
|
||||
:height="cHeight*pixelRatio"
|
||||
:style="{'width':cWidth+'px','height':cHeight+'px'}"
|
||||
@touchstart="touchLineA"
|
||||
></canvas>
|
||||
<!--#endif-->
|
||||
<!--#ifndef MP-ALIPAY -->
|
||||
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
|
||||
<!--#endif-->
|
||||
</view>
|
||||
<!--#ifdef H5 -->
|
||||
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
||||
<view class="qiun-title-dot-light">标准数据格式</view>
|
||||
</view>
|
||||
<view class="qiun-bg-white qiun-padding">
|
||||
<textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea" />
|
||||
</view>
|
||||
<view class="qiun-columns">
|
||||
<!--#ifdef H5 -->
|
||||
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
||||
<view class="qiun-title-dot-light">页面地址</view>
|
||||
</view>
|
||||
<view class="qiun-bg-white qiun-padding">
|
||||
<text>pages/basic/area/time</text>
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
||||
<view class="qiun-title-dot-light">单量</view>
|
||||
</view>
|
||||
<view class="qiun-charts">
|
||||
<!--#ifdef MP-ALIPAY -->
|
||||
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
|
||||
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas>
|
||||
<!--#endif-->
|
||||
<!--#ifndef MP-ALIPAY -->
|
||||
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
|
||||
<!--#endif-->
|
||||
</view>
|
||||
<!--#ifdef H5 -->
|
||||
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
||||
<view class="qiun-title-dot-light">标准数据格式</view>
|
||||
</view>
|
||||
<view class="qiun-bg-white qiun-padding">
|
||||
<textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea" />
|
||||
</view>
|
||||
<view class="qiun-text-tips">Tips：修改后点击更新图表</view>
|
||||
<button class="qiun-button" @tap="changeData()">更新图表</button>
|
||||
<!--#endif-->
|
||||
@@ -47,6 +40,13 @@ import { isJSON } from '@/common/checker.js';
|
||||
var _self;
|
||||
var canvaLineA = null;
|
||||
export default {
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
cWidth: '',
|
||||
@@ -70,66 +70,39 @@ export default {
|
||||
//#endif
|
||||
this.cWidth = uni.upx2px(650);
|
||||
this.cHeight = uni.upx2px(500);
|
||||
this.getServerData();
|
||||
console.log('chartData', this.chartData)
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log('深度监听', newVal, oldVal)
|
||||
this.chartData = newVal
|
||||
this.getServerData()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getServerData() {
|
||||
console.log('/')
|
||||
uni.request({
|
||||
url: 'https://www.ucharts.cn/data.json',
|
||||
data: {
|
||||
},
|
||||
success: function (res) {
|
||||
console.log(res.data.data)
|
||||
let LineA = {
|
||||
series: [{
|
||||
name: '交易时段分布', data: [
|
||||
[10000, 75], [50000, 35], [150000, 55], [170000, 35], [190000, 75],
|
||||
[210000, 25], [280000, 5], [450000, 95], [460000, 5], [470000, 95],
|
||||
[490000, 5]
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '交易时段分布', data: [
|
||||
[30000, 77], [50000, 25], [170000, 50], [200000, 40], [210000, 25],
|
||||
[220000, 45], [280000,55], [450000,19], [460000, 30], [470000, 88],
|
||||
[490000, 95]
|
||||
]
|
||||
}]
|
||||
};
|
||||
_self.textarea = JSON.stringify(res.data.data.LineA);
|
||||
console.log('-----------------------')
|
||||
console.log('res.data.data.LineA', res.data.data.LineA)
|
||||
console.log('_self.textarea', _self.textarea)
|
||||
console.log('LineA', LineA)
|
||||
console.log('-----------------------')
|
||||
_self.showLineA("canvasLineA", LineA);
|
||||
},
|
||||
fail: () => {
|
||||
_self.tips = "网络错误，小程序端请检查合法域名";
|
||||
},
|
||||
});
|
||||
if (this.chartData) {
|
||||
let LineA = {
|
||||
series: [{
|
||||
name: '交易时段分布', data: this.chartData
|
||||
}]
|
||||
}
|
||||
_self.textarea = JSON.stringify(LineA);
|
||||
console.log('-----------------------')
|
||||
console.log('_self.textarea', _self.textarea)
|
||||
console.log('LineA', LineA)
|
||||
console.log('-----------------------')
|
||||
_self.showLineA("canvasLineA", LineA);
|
||||
}
|
||||
},
|
||||
formatDateTime(timeStamp, returnType) {
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
console.log('\n\n------ begin:', timeStamp, ' ------')
|
||||
console.log('')
|
||||
console.log('------ end: ', date.setTime(timeStamp * 1000), ' ------\n\n')
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? ('0' + minute) : minute;
|
||||
second = second < 10 ? ('0' + second) : second;
|
||||
if (returnType == 'str') { return h + ':' + minute; }
|
||||
// return [y, m, d, h, minute, second];
|
||||
// return [y + '-'+ m + '-'+ d +' '+ h+ ':'+ minute + ':' + second];
|
||||
formatDateTime(timeStr) {
|
||||
console.log('-----------------------')
|
||||
console.log('timeStr', timeStr)
|
||||
console.log('-----------------------')
|
||||
return (timeStr > 0 ? timeStr.toFixed(0) : 0) + ':00'
|
||||
},
|
||||
showLineA(canvasId, chartData) {
|
||||
canvaLineA = new uCharts({
|
||||
@@ -154,16 +127,16 @@ export default {
|
||||
boundaryGap: 'justify',
|
||||
splitNumber: 5,
|
||||
format: (val) => {
|
||||
console.log('----', val, '-----')
|
||||
console.log('----', this.formatDateTime(val, 'str'), '-----')
|
||||
return this.formatDateTime(val, 'str') }
|
||||
// console.log('----', val, '-----')
|
||||
// console.log('----', this.formatDateTime(val, 'str'), '-----')
|
||||
return this.formatDateTime(val) }
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
gridColor: '#CCCCCC',
|
||||
dashLength: 8,
|
||||
splitNumber: 5,
|
||||
format: (val) => { return val.toFixed(0) + '元' }
|
||||
format: (val) => { return val>0?val.toFixed(0):0 + '单' }
|
||||
},
|
||||
width: _self.cWidth * _self.pixelRatio,
|
||||
height: _self.cHeight * _self.pixelRatio,
|
||||
@@ -178,11 +151,11 @@ export default {
|
||||
|
||||
},
|
||||
touchLineA(e) {
|
||||
var that = this
|
||||
var that = this
|
||||
canvaLineA.showToolTip(e, {
|
||||
format: function (item, category) {
|
||||
console.log(' item.data', item.data)
|
||||
return that.formatDateTime(item.data[0], 'str') +'交易金额'+ item.data[1] + '元'
|
||||
return (item.data[0] + ':00 ') + item.data[1] + '单 ' + '交易金额' + item.data[2] + '元'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user