中品云站
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

198 lines
5.3 KiB

<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-text-tips">Tips:修改后点击更新图表</view>
<button class="qiun-button" @tap="changeData()">更新图表</button>
<!--#endif-->
</view>
</template>
<script>
import uCharts from './common/u-charts/u-charts.js';
import { isJSON } from './common/checker.js';
var _self;
var canvaLineA = null;
export default {
props: {
chartData: {
type: Array,
default(){}
}
},
data() {
return {
cWidth: '',
cHeight: '',
pixelRatio: 1,
textarea: ''
}
},
created() {
_self = this;
//#ifdef MP-ALIPAY
uni.getSystemInfo({
success: function (res) {
if (res.pixelRatio > 1) {
//正常这里给2就行,如果pixelRatio=3性能会降低一点
//_self.pixelRatio =res.pixelRatio;
_self.pixelRatio = 2;
}
}
});
//#endif
this.cWidth = uni.upx2px(650);
this.cHeight = uni.upx2px(500);
console.log('chartData', this.chartData)
},
watch: {
chartData: {
handler(newVal, oldVal) {
console.log('深度监听', newVal, oldVal)
this.chartData = newVal
this.getServerData()
},
deep: true
}
},
methods: {
getServerData() {
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) {
var date = new Date();
date.setTime(timeStamp);
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return m + '-' + d
},
showLineA(canvasId, chartData) {
canvaLineA = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'area',
fontSize: 11,
padding: [15, 20, 0, 15],
legend: false,
dataLabel: true,
dataPointShape: true,
background: '#FFFFFF',
pixelRatio: _self.pixelRatio,
// categories: chartData.categories,
series: chartData.series,
animation: true,
xAxis: {
type: 'grid',
gridColor: '#CCCCCC',
gridType: 'dash',
dashLength: 8,
boundaryGap: 'justify',
splitNumber: 5,
format: (val) => {
// 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 + '单' }
},
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
area: {
type: 'curve',
addLine: true,
gradient: true
}
}
});
},
touchLineA(e) {
var that = this
canvaLineA.showToolTip(e, {
format: function (item, category) {
console.log(' item.data', item.data)
return that.formatDateTime(item.data[0])+' ' + item.data[1] + '单 ' + '交易金额' + item.data[2] + '元'
}
});
},
changeData() {
if (isJSON(_self.textarea)) {
let newdata = JSON.parse(_self.textarea);
canvaLineA.updateData({
series: newdata.series,
categories: newdata.categories
});
} else {
uni.showToast({
title: '数据格式错误',
image: '../../../static/images/alert-warning.png'
})
}
}
}
}
</script>
<style scoped>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
width: 640upx;
height: 500rpx;
background-color: #ffffff;
}
.charts {
width: 640upx;
height: 500rpx;
background-color: #ffffff;
}
</style>