|
|
@@ -23,8 +23,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content-one">
|
|
|
- <canvas :canvas-id="'mouthPie' + index" :id="'mouthPie' + index" class="charts" @touchstart="touchPie($event,'mouthPie' + index)"></canvas>
|
|
|
- <canvas :canvas-id="'quarterPie' + index" :id="'quarterPie' + index" class="charts" @touchstart="touchPie($event,'quarterPie' + index)"></canvas>
|
|
|
+ <!-- -->
|
|
|
+ <canvas :canvas-id="'mouthPie' + index" :id="'mouthPie' + index" class="charts" @touchstart="touchPie($event,'mouthPie' + index)" ></canvas>
|
|
|
+ <!-- -->
|
|
|
+ <canvas :canvas-id="'quarterPie' + index" :id="'quarterPie' + index" class="charts" @touchstart="touchPie($event,'quarterPie' + index)"></canvas>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -43,7 +45,7 @@
|
|
|
isJSON
|
|
|
} from '@/common/checker.js';
|
|
|
var _self;
|
|
|
- var canvaPie = null;
|
|
|
+ // var canvaPie = null;
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -81,14 +83,19 @@
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
+
|
|
|
_self = this;
|
|
|
_self.cWidth = uni.upx2px(370);
|
|
|
_self.cHeight = uni.upx2px(320);
|
|
|
// this.showPie('canvasRing')
|
|
|
},
|
|
|
created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
this.getDate()
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
getDate() {
|
|
|
request({
|
|
|
@@ -101,46 +108,11 @@
|
|
|
}
|
|
|
}).then(res => {
|
|
|
console.log(res)
|
|
|
- console.log(this.$store.state.storeInfo.storeId)
|
|
|
this.orderList = res.data.data
|
|
|
+ this.getPieData()
|
|
|
|
|
|
|
|
|
- for(var i=0;i<res.data.data.length;i++){
|
|
|
- let monthPie = {
|
|
|
- series: []
|
|
|
- };
|
|
|
- let quarterPie = {
|
|
|
- series: []
|
|
|
- }
|
|
|
- for(var j=0;j<res.data.data[i].storeMonthList.length;j++){
|
|
|
- let monthObj = {
|
|
|
- data:null,
|
|
|
- name:'',
|
|
|
- percent:''
|
|
|
- }
|
|
|
- let quarterObj = {
|
|
|
- data:null,
|
|
|
- name:'',
|
|
|
- percent:'',
|
|
|
- }
|
|
|
-
|
|
|
- monthObj.data = res.data.data[i].storeMonthList[j].data
|
|
|
- monthObj.name = res.data.data[i].storeMonthList[j].name
|
|
|
- monthObj.percent = res.data.data[i].storeMonthList[j].percent
|
|
|
- quarterObj.data = res.data.data[i].storeQuarterList[j].data
|
|
|
- quarterObj.name = res.data.data[i].storeQuarterList[j].name
|
|
|
- quarterObj.percent = res.data.data[i].storeQuarterList[j].percent
|
|
|
-
|
|
|
- console.log('^^^^',monthObj)
|
|
|
- console.log('9999999',quarterObj)
|
|
|
- monthPie.series.push(monthObj)
|
|
|
- quarterPie.series.push(quarterObj)
|
|
|
- }
|
|
|
-
|
|
|
- console.log(`mouthPie${i}`,monthPie,quarterPie)
|
|
|
- this.showPie(`mouthPie${i}`,monthPie);
|
|
|
- this.showPie(`quarterPie${i}`,quarterPie)
|
|
|
- }
|
|
|
+ // this.showPie('mouthPie0',monthPie);
|
|
|
}).catch(err => {
|
|
|
console.log(err)
|
|
|
})
|
|
|
@@ -151,8 +123,66 @@
|
|
|
}, 300)
|
|
|
})
|
|
|
},
|
|
|
- showPie(canvasId, chartData,percent) {
|
|
|
- console.log('8888888',canvasId,chartData,percent)
|
|
|
+ getPieData(){
|
|
|
+ console.log('5555')
|
|
|
+ for(var i=0;i<this.orderList.length;i++){
|
|
|
+ var monthPie = {
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ var quarterPie = {
|
|
|
+ series: []
|
|
|
+ }
|
|
|
+ for(var j=0;j<this.orderList[i].storeMonthList.length;j++){
|
|
|
+ let monthObj = {
|
|
|
+ data:null,
|
|
|
+ name:'',
|
|
|
+ percent:'',
|
|
|
+ format:(val)=>{
|
|
|
+ console.log(val)
|
|
|
+ // return val.toFixed(0) + ''
|
|
|
+ return val * 100 + '%'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ let quarterObj = {
|
|
|
+ data:null,
|
|
|
+ name:'',
|
|
|
+ percent:'',
|
|
|
+ format:(val)=>{
|
|
|
+ console.log(val)
|
|
|
+ // return val.toFixed(0) + ''
|
|
|
+
|
|
|
+ return val * 100 + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ monthObj.data = this.orderList[i].storeMonthList[j].data
|
|
|
+ monthObj.name = this.orderList[i].storeMonthList[j].name
|
|
|
+ monthObj.percent = this.orderList[i].storeMonthList[j].percent
|
|
|
+
|
|
|
+ quarterObj.data = this.orderList[i].storeQuarterList[j].data
|
|
|
+ quarterObj.name = this.orderList[i].storeQuarterList[j].name
|
|
|
+ quarterObj.percent = this.orderList[i].storeQuarterList[j].percent
|
|
|
+
|
|
|
+ // console.log('^^^^',monthObj)
|
|
|
+ // console.log('9999999',quarterObj)
|
|
|
+ monthPie.series.push(monthObj)
|
|
|
+ quarterPie.series.push(quarterObj)
|
|
|
+ // console.log(quarterPie.series[0].format)
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(`mouthPie${i}`,monthPie,quarterPie)
|
|
|
+
|
|
|
+ this.showPie(`mouthPie${i}`,monthPie);
|
|
|
+ this.showPie(`quarterPie${i}`,quarterPie)
|
|
|
+ // this[`${this.refVal}`]
|
|
|
+ }
|
|
|
+ // this.showPie('mouthPie0',monthPie);
|
|
|
+ },
|
|
|
+ showPie(canvasId, chartData) {
|
|
|
+ console.log('88888')
|
|
|
+ console.log(canvasId,chartData)
|
|
|
canvasObj[canvasId]=new uCharts({
|
|
|
$this: _self,
|
|
|
canvasId: canvasId,
|
|
|
@@ -164,9 +194,9 @@
|
|
|
position: 'bottom',
|
|
|
float: 'center',
|
|
|
itemGap: 10,
|
|
|
- padding: 2,
|
|
|
+ padding: 0,
|
|
|
lineHeight: 26,
|
|
|
- margin: 1,
|
|
|
+ margin: 6,
|
|
|
//backgroundColor:'rgba(41,198,90,0.2)',
|
|
|
//borderColor :'rgba(41,198,90,0.5)',
|
|
|
borderWidth: 1
|
|
|
@@ -191,9 +221,9 @@
|
|
|
},
|
|
|
extra: {
|
|
|
pie: {
|
|
|
- offsetAngle: 0,
|
|
|
- ringWidth: 15 * _self.pixelRatio,
|
|
|
- labelWidth: 1
|
|
|
+ ringWidth: 12 * _self.pixelRatio,
|
|
|
+ labelWidth: 0.1,
|
|
|
+ offsetAngle:0
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
@@ -210,7 +240,11 @@
|
|
|
// });
|
|
|
// },
|
|
|
touchPie(e,id){
|
|
|
- console.log(e)
|
|
|
+ console.log(e,id)
|
|
|
+
|
|
|
+ // canvaPie.touchLegend(e, {
|
|
|
+ // animation: false
|
|
|
+ // });
|
|
|
canvasObj[id].showToolTip(e, {
|
|
|
format: function (item) {
|
|
|
return item.name + ':' + item.data
|
|
|
@@ -232,9 +266,9 @@
|
|
|
height: 331rpx;
|
|
|
background: url(../../../static/sailun/background.png) no-repeat;
|
|
|
background-size: 750rpx 331rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-one {
|
|
|
width: 6rpx;
|
|
|
height: 30rpx;
|
|
|
@@ -243,7 +277,7 @@
|
|
|
top: 20rpx;
|
|
|
left: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-two {
|
|
|
position: relative;
|
|
|
top: -18rpx;
|
|
|
@@ -251,7 +285,7 @@
|
|
|
font-size: 26rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.content {
|
|
|
width: 702rpx;
|
|
|
height: 410rpx;
|
|
|
@@ -261,23 +295,23 @@
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
top: 20rpx;
|
|
|
-
|
|
|
+
|
|
|
margin-bottom: 40rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.content-one {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.charts {
|
|
|
width: 380rpx;
|
|
|
height: 450rpx;
|
|
|
position: relative;
|
|
|
top: -20rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-three>view:nth-child(1) {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
@@ -287,7 +321,7 @@
|
|
|
top: 20rpx;
|
|
|
left: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-three>view:nth-child(2) {
|
|
|
width: 180rpx;
|
|
|
height: 22rpx;
|
|
|
@@ -301,12 +335,12 @@
|
|
|
left: 40rpx;
|
|
|
border-top-right-radius: 12rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-four {
|
|
|
position: relative;
|
|
|
right: 200rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-four>view:nth-child(1) {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
@@ -316,7 +350,7 @@
|
|
|
top: 20rpx;
|
|
|
left: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.qiun-charts-four>view:nth-child(2) {
|
|
|
width: 150rpx;
|
|
|
height: 22rpx;
|
qukaidi