update

pages/summaryOfPortraits/components/businessPortrait.vue

@@ -28,32 +28,30 @@
                 </div>
                 <no-data v-else />
             </div>
-            <div class="chartsItem" style="margin-top: 32px">
+            <div class="chartsItem" style="height:270px;margin-top: 32px">
                 <p class="title">消费转化对比图</p>
-                <div v-if="compareList.series && compareList.series.length>0 && compareList.series[0].data && compareList.series[0].data.length>0">
+                <div>
                     <consumption-compare :data="compareList"/>
                     <analyse :analyseInfo="{analysisins_type: 1406,analysisins_format: 2000}" />
                 </div>
-                <no-data v-else />
             </div>
 
-            <div class="chartsItem" style="margin-top: 32px">
+            <div class="chartsItem" style="height:220px;margin-top: 32px">
-                <p class="title">消费时段分析</p>
+                <p class="title" style="margin-bottom: 24px">消费时段分析</p>
                 <div v-if="timePeriodList.series && timePeriodList.series.length>0">
                     <time-period-analysis :data="timePeriodList"/>
                     <analyse :analyseInfo="{analysisins_type: 1403,analysisins_format: 2000}" />
                 </div>
                 <no-data v-else />
             </div>
-            <div class="chartsItem" style="margin-top: 32px">
+            <div class="chartsItem" style="height:300px;margin-top: 32px">
                 <p class="title">消费水平<text class="unit"></text></p>
-                <div v-if="levelTopList.series && levelTopList.series.length">
+                <div>
                     <level-top :data="levelTopList"></level-top>
                     <analyse :analyseInfo="{analysisins_type: 1404,analysisins_format: 2000}" />
                 </div>
-                <no-data v-else />
             </div>
-            <div class="chartsItem" style="margin-top: 32px">
+            <div class="chartsItem" style="height:340px;margin-top: 32px">
                 <p class="title">品牌消费水平<text class="unit"></text></p>
                 <div v-if="bandLevelList && bandLevelList.length>0">
                     <band-level :data="bandLevelList"/>
@@ -61,15 +59,14 @@
                 </div>
                 <no-data v-else/>
             </div>
-            <div class="chartsItem" style="margin-top: 32px">
+            <div class="chartsItem" style="height:280px;margin-top: 32px">
                 <p class="title">业态交易值占比</p>
-                <div v-if="businessTypeList.series && businessTypeList.series.length>0 && businessTypeList.series[0].data && businessTypeList.series[0].data.length>0">
+                <div>
                     <business-format :data="businessTypeList"/>
                     <analyse :analyseInfo="{analysisins_type: 1405,analysisins_format: 2000}" />
                 </div>
-                <no-data v-else />
             </div>
-            <div class="chartsItem" style="margin-top: 32px">
+            <div class="chartsItem" style="height:420px;margin-top: 32px">
                 <p class="title">商超畅销品</p>
                 <bestseller-shop :data="bestsellerList"/>
                 <analyse :analyseInfo="{analysisins_type: 1407,analysisins_format: 2000}" />

pages/summaryOfPortraits/components/carPortrait.vue

@@ -219,7 +219,7 @@
                 </div>
               </div>
 
-              <div class="chartsItem" style="margin-top: 32px;height: 620px">
+              <div class="chartsItem" style="margin-top: 32px;height: 640px">
                 <div class="time">
                   <text class="thisTime"></text>
                   <div class="select">
@@ -1234,7 +1234,7 @@ export default {
               //省份
               this.homePlaceAll = dataList
               this.homePlace = dataList[this.selectTab]?dataList[this.selectTab]:[]
-
+            console.log('this.homePlace',this.homePlace)
           })
         uni.hideLoading()
       },
@@ -1267,8 +1267,8 @@ export default {
             })
           })
           this.cityPlace = res.Result_Data.List[0] ? res.Result_Data.List[0].OwnerCityList : []
-        })
           uni.hideLoading()
+        })
       },
 
       getCarTypeTime(){

pages/summaryOfPortraits/components/components/bussiness/bandLevel.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="bandLevel">
+      <div class="mengBox" v-if="selectName" @click="handleNoShow"></div>
         <div class="bandItem" v-for="(item,index) in dataList" :key="index">
             <p class="title">{{item.name}}</p>
             <div class="progress">
@@ -58,6 +59,9 @@ export default {
         }
     },
     methods: {
+      handleNoShow(){
+        this.selectName = ''
+      },
         handleClick(e,type,item){
             this.selectName = item.name
             let phoneInfo = uni.getStorageSync('phoneInfo')
@@ -95,6 +99,13 @@ export default {
 .bandLevel{
     width: 100%;
     margin-top: 12px;
+  .mengBox{
+    position: fixed;
+    left: 0;top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9;
+  }
     .bandItem{
         width: 100%;
         position: relative;

pages/summaryOfPortraits/components/components/bussiness/businessFormat.vue

@@ -1,19 +1,32 @@
 <template>
     <div class="businessFormat">
-        <canvas  class="format" style="width: 100vw;height: 260px;position: fixed;left: 100%" canvas-id="businessFormat" id="businessFormat" @tap="tap"/>
+      <QiunDataCharts
-        <image style="width: 100vw;height: 260px" v-if="formatPath" class="format" :src="formatPath"></image>
+          type="ring"
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          :canvas2d="true"
+          tooltipFormat="businessFormat"
+      />
+<!--        <canvas  class="format" style="width: 100vw;height: 260px;position: fixed;left: 100%" canvas-id="businessFormat" id="businessFormat" @tap="tap"/>-->
+<!--        <image style="width: 100vw;height: 260px" v-if="formatPath" class="format" :src="formatPath"></image>-->
     </div>
 </template>
 
 <script>
 import uCharts from '@/components/u-charts.js';
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
     name: "businessFormat",
+  components: {QiunDataCharts},
     data() {
         return {
             width:0,
-            formatPath:''
+            formatPath:'',
+          opts:{},
+          res:{}
         }
     },
     props: {
@@ -42,7 +55,48 @@ export default {
         // 处理传入的数据
         handleCarData(value) {
             let res = value
-            this.drawCharts('businessFormat', res)
+          this.res = res
+          this.opts = {
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#00C2FF","#6B6FFF","#38C275","#1E80FF", "#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
+            padding: [5, 5, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            title: {
+              name: '刚需型',
+              fontSize: 16,
+              color: "#341D00"
+            },
+            subtitle: {
+              name: "理想业态布局",
+              fontSize: 12,
+              color: "#786B6C",
+            },
+            legend: {
+              show: true,
+              position: "right",
+              lineHeight: 25,
+              float: 'center'
+
+            },
+            extra: {
+              ring: {
+                ringWidth: 14,
+                activeOpacity: 0.5,
+                activeRadius: 10,
+                offsetAngle: -45,
+                labelWidth: 15,
+                border: false,
+                borderWidth: 3,
+                borderColor: "#FFFFFF"
+              }
+            }
+          }
+            // this.drawCharts('businessFormat', res)
         },
         drawCharts(id, data) {
             const ctx = uni.createCanvasContext(id, this);
@@ -121,6 +175,7 @@ export default {
 <style scoped lang="scss">
 .businessFormat{
     width: 100%;
+  height: 260px;
     .format{
         width: 100%;
         height: 260px;

pages/summaryOfPortraits/components/components/bussiness/consumptionCompare.vue

@@ -1,22 +1,34 @@
 <template>
     <div class="consumptionCompare">
-        <canvas style="width: 100vw;height: 220px;position: fixed;left: 100vw"  class="consumption" canvas-id="consumption" id="consumption" @tap="tap" />
+      <QiunDataCharts
-        <image style="width: 100vw;height: 220px" v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>
+          type="area"
-      <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :loadingType="1"
+          :inScrollView="true"
+          :canvas2d="true"
+          tooltipFormat="consumptionCompare"
+      />
+<!--        <canvas style="width: 100vw;height: 220px;position: fixed;left: 100vw"  class="consumption" canvas-id="consumption" id="consumption" @tap="tap" />-->
+<!--        <image style="width: 100vw;height: 220px" v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>-->
+<!--      <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>-->
     </div>
 </template>
 
 <script>
 import uCharts from '@/components/u-charts.js';
-import NoData from "../../../../commercialBI/noData.vue";
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
     name: "consumptionCompare",
-  components: {NoData},
+  components: {QiunDataCharts},
     data() {
         return {
             width: 0,
-            consumptionPath:''
+            consumptionPath:'',
+          opts:{},
+          res:{}
         }
     },
     props: {
@@ -28,6 +40,7 @@ export default {
     watch: {
         data: {
             handler(value) {
+              console.log('consumptionComparevalue',value)
                 this.handleCarData(value)
             },
             immediate: true
@@ -56,7 +69,68 @@ export default {
                 customerMax:value.series[0].max,
                 carLitMax:value.series[1].max
             }
-            this.drawCharts('consumption', res,config)
+            this.res =  res
+            this.opts = {
+              categories: res.categories,
+              series: res.series,
+              animation: false,
+              rotate: false,
+              rotateLock: false,
+              background: "#FFFFFF",
+              color: ["#1E80FF", "#00B6FF"],
+              padding: [15, 5, 5, 5],
+              dataLabel: false,
+              enableScroll: false,
+              xAxis: {
+                disableGrid: true,
+                axisLineColor:"#F2F2F5",
+                format:"consumptionCompareFormat",
+              },
+              yAxis:{
+                showTitle:true,
+                splitNumber:4,
+                gridColor:'#F2F2F5',
+                data: [
+                  {
+                    index:0,
+                    title:'单位: 笔',
+                    min: 0,
+                    max:this.getNumber(config.customerMax),
+                    position: "left",
+                    titleOffsetY: -5,
+                    axisLineColor:"#F2F2F5"
+                  },
+                  {
+                    index:1,
+                    title:'单位: 辆',
+                    min: 0,
+                    max:this.getNumber(config.carLitMax),
+                    position: 'right',
+                    titleOffsetY: -5,
+                    titleOffsetX: -15,
+                    axisLineColor:"#F2F2F5"
+                  },
+                ]
+              },
+              legend: {
+                show: true,
+                position: "bottom",
+                lineHeight: 25,
+                float: 'center'
+
+              },
+              extra: {
+                area: {
+                  type: "curve",
+                  opacity: 0.9,
+                  addLine: true,
+                  width: 2,
+                  gradient: true,
+                  activeType: "hollow"
+                }
+              }
+            }
+            // this.drawCharts('consumption', res,config)
         },
         getNumber(value){
             let number = value / 40
@@ -170,10 +244,8 @@ export default {
 <style scoped lang="scss">
 .consumptionCompare{
     width: 100%;
+  height: 250px;
     margin-top: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
     .consumption{
         width: 100%;
         height: 220px;

pages/summaryOfPortraits/components/components/bussiness/levelTop.vue

@@ -1,19 +1,32 @@
 <template>
     <div class="levelTop">
-        <canvas style="width: 100vw;height: 252px;position: fixed;left: 100%"  class="level" canvas-id="levelTop" id="levelTop" @tap="tap"/>
+      <QiunDataCharts
-        <image style="width: 100%;height: 252px" v-if="levelTopPath" class="level" :src="levelTopPath"></image>
+          type="column"
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          :canvas2d="true"
+          tooltipFormat="levelTop"
+      />
+<!--        <canvas style="width: 100vw;height: 252px;position: fixed;left: 100%"  class="level" canvas-id="levelTop" id="levelTop" @tap="tap"/>-->
+<!--        <image style="width: 100%;height: 252px" v-if="levelTopPath" class="level" :src="levelTopPath"></image>-->
     </div>
 </template>
 
 <script>
 import uCharts from '@/components/u-charts.js';
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
     name: "levelTop",
+  components: {QiunDataCharts},
     data() {
         return {
             width:0,
-            levelTopPath:''
+            levelTopPath:'',
+          res:{},
+          opts:{}
         }
     },
     props: {
@@ -42,7 +55,55 @@ export default {
         // 处理传入的数据
         handleCarData(value) {
             let res = value
-            this.drawCharts('levelTop', res)
+          this.res = res
+          this.opts = {
+            categories: res.categories,
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#CAD0DA","#ACB9CD","#1E80FF", ],
+            padding: [15, 5, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            legend: {
+              show: true,
+              position: "bottom",
+              lineHeight: 25,
+              float: 'center',
+              fontSize:10
+
+            },
+            xAxis: {
+              disableGrid: true,
+              axisLineColor:'#F2F2F5',
+              fontSize:10,
+              titleOffsetY:5
+            },
+            yAxis: {
+              splitNumber:5,
+              gridColor:'#F2F2F5',
+              data: [
+                {
+                  min: 0,
+                  max: 100,
+                  unit:'%',
+                  axisLineColor:'#F2F2F5'
+                }
+              ]
+            },
+            extra: {
+              column: {
+                type: "stack",
+                width: 20,
+                activeBgColor: "#000000",
+                activeBgOpacity: 0.08,
+                labelPosition: "center"
+              }
+            }
+          }
+            // this.drawCharts('levelTop', res)
         },
         drawCharts(id, data) {
             const ctx = uni.createCanvasContext(id, this);
@@ -128,6 +189,7 @@ export default {
 <style scoped lang="scss">
 .levelTop{
     width:100%;
+    height: 252px;
     margin-top: 12px;
     .level{
         width: 100%;

pages/summaryOfPortraits/components/components/bussiness/timePeriodAnalysis.vue

@@ -1,20 +1,33 @@
 <template>
     <div class="timePeriodAnalysis">
-        <canvas style="width: 100vw;height: 200px;position: fixed;left: 100%"  class="timePeriod" canvas-id="timePeriod" id="timePeriod" @tap="tap"/>
+      <QiunDataCharts
-        <image style="width: 100vw;height: 200px" class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>
+          type="area"
-      <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          :canvas2d="true"
+          tooltipFormat="timePeriodAnalysis"
+      />
+<!--        <canvas style="width: 100vw;height: 200px;position: fixed;left: 100%"  class="timePeriod" canvas-id="timePeriod" id="timePeriod" @tap="tap"/>-->
+<!--        <image style="width: 100vw;height: 200px" class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>-->
+<!--      <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>-->
     </div>
 </template>
 
 <script>
 import uCharts from '@/components/u-charts.js';
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
     name: "timePeriodAnalysis",
+  components: {QiunDataCharts},
     data() {
         return {
             width:0,
-            timePeriodPath:''
+            timePeriodPath:'',
+          opts:{},
+          res:{}
         }
     },
     props: {
@@ -43,7 +56,45 @@ export default {
         // 处理传入的数据
         handleCarData(value) {
             let res = value
-            this.drawCharts('timePeriod', res)
+          this.res = res
+          this.opts = {
+            categories:res.categories,
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#2483FF"],
+            padding: [15, 10, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            xAxis: {
+              disableGrid: true,
+              format:"timePeriodAnalysisFormat",
+            },
+            yAxis: {
+              disableGrid: false,
+              gridType: "solid",
+              gridColor:'#F2F2F5'
+            },
+            legend: {
+              show: false,
+              position: "bottom",
+              lineHeight: 25,
+              float: 'center',
+            },
+            extra: {
+              area: {
+                type: "curve",
+                opacity: 0.2,
+                addLine: true,
+                width: 2,
+                gradient: true,
+                activeType: "hollow"
+              }
+            }
+          }
+            // this.drawCharts('timePeriod', res)
         },
         drawCharts(id, data) {
             const ctx = uni.createCanvasContext(id, this);
@@ -128,10 +179,8 @@ export default {
 
 <style scoped lang="scss">
 .timePeriodAnalysis{
-    width: 100%;
+    width: calc(100vw - 32px);
-  display: flex;
+    height: 200px;
-  align-items: center;
-  justify-content: center;
     .timePeriod{
         width: 100%;
         height: 200px;

pages/summaryOfPortraits/components/components/car/carTypeTime.vue

@@ -6,6 +6,7 @@
                 :opts="opts"
                 :chartData="res"
                 :animation="false"
+                :canvas2d="true"
                 :inScrollView="true"
                 tooltipFormat="carTypeTime"
               />

pages/summaryOfPortraits/components/components/car/homePlace.vue

@@ -8,8 +8,10 @@
                     :animation="false"
                     :chartData="res"
                     :inScrollView="true"
+                    :canvas2d="true"
                     tooltipFormat="homePlace"
-                    :ontap="handleTap"
+                    :ontap="true"
+                    @getIndex="handleTap"
                   />
 <!--                    <canvas style="height: 160px;width: 100%;position: fixed;left: 100%"  canvas2d="true" class="carNum" canvas-id="homePlace" id="homePlace" @tap="handleTap"/>-->
 <!--                    <image style="height: 160px;width: 100%;" v-if="homePlacePath" class="carNum" :src="homePlacePath"></image>-->
@@ -133,16 +135,14 @@ export default {
       },
         //点击事件
         handleTap(e){
-          let  index = uChartsInstance[e.target.id].getCurrentDataIndex(e);
+          console.log('e',e)
-            if (index===-1){
+          if (e.currentIndex===-1){
             this.$parent.handleGetHome(null,null,true)
-              uChartsInstance[e.target.id].showToolTip(e,{})
           }else{
-              uChartsInstance[e.target.id].showToolTip(e,{
+            let item = e.opts._series_[e.currentIndex]
-                formatter: (item, category, index, opts) =>{
             if (item.name.split(' ')[0] === '其他'){
               let str = ''
-                    this.homeData.forEach(item=>{
+              e.opts.homeData.forEach(item=>{
                 if (item.name.split(' ')[0]!=='其他'){
                   if (str===''){
                     str = item.name.split(' ')[0]
@@ -153,13 +153,36 @@ export default {
               })
               this.$parent.handleGetHome(str,item.value)
             }else{
-                    this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
+              this.$parent.handleGetHome(item.name.split(' ')[0],item.value,false)
             }
-                  return item.name + ":" + item.data + '辆';
           }
-              });
+          // let  index = uChartsInstance[e.target.id].getCurrentDataIndex(e);
-            }
+          //   if (index===-1){
-            uChartsInstance[e.target.id].touchLegend(e);
+          //     this.$parent.handleGetHome(null,null,true)
+          //     uChartsInstance[e.target.id].showToolTip(e,{})
+          //   }else{
+          //     uChartsInstance[e.target.id].showToolTip(e,{
+          //       formatter: (item, category, index, opts) =>{
+          //         if (item.name.split(' ')[0] === '其他'){
+          //           let str = ''
+          //           this.homeData.forEach(item=>{
+          //             if (item.name.split(' ')[0]!=='其他'){
+          //               if (str===''){
+          //                 str = item.name.split(' ')[0]
+          //               }else{
+          //                 str+=`,${item.name.split(' ')[0]}`
+          //               }
+          //             }
+          //           })
+          //           this.$parent.handleGetHome(str,item.value)
+          //         }else{
+          //           this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
+          //         }
+          //         return item.name + ":" + item.data + '辆';
+          //       }
+          //     });
+          //   }
+          //   uChartsInstance[e.target.id].touchLegend(e);
         },
         // 处理传入的数据
         handleCarData(value) {
@@ -188,6 +211,7 @@ export default {
             padding: [5, 5, 5, 5],
             dataLabel: false,
             enableScroll: false,
+            homeData:this.homeData,
             title:{
               name: ''
             },

pages/summaryOfPortraits/components/components/car/monthTotal.vue

@@ -3,9 +3,10 @@
       <qiunDataCharts
           type="mix"
           :opts="opts"
-          :chartData="monthData"
+          :chartData="res"
           :animation="false"
           :inScrollView="true"
+          :canvas2d="true"
           tooltipFormat="monthTotal"
       />
 <!--        <canvas class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap" />-->
@@ -26,7 +27,7 @@ export default {
           opts:{
 
           },
-
+          res:[]
         }
     },
     props: {
@@ -146,6 +147,8 @@ export default {
                 moneyMax:value.series[2].max > value.series[3].max ? this.getSplitNumber(value.series[2].max):this.getSplitNumber(value.series[3].max)
               }
             }
+          this.res = res
+
           let phoneInfo = uni.getStorageSync('phoneInfo')
           let width = phoneInfo.screenWidth-32
             this.opts={

pages/summaryOfPortraits/components/components/car/percentEntry.vue

@@ -1,11 +1,12 @@
 <template>
     <div style="min-height: 100px;">
+      <div class="meng" v-if="showMeng" @click.stop="handleNoShow"></div>
             <div class="percentEntry" >
                 <div class="progress">
                     <div class="have" >
                         <view class="box" >
                             <div class="min" :style="{width:min+'%'}" @click="handleShow(0)">
-                              <div class="text" v-if="rateList[0]">
+                              <div class="text" v-if="rateList[0]" >
                                 <div class="icon" style="background: #1E80FF"></div>
                                 <text style="margin-right: 4px">小车型</text>
                                 <text>{{min}}%</text>
@@ -68,7 +69,8 @@ export default {
                 analysisins_type: 1106,
                 analysisins_format: 2000
             },
-            rateList:[false,false,false]
+            rateList:[false,false,false],
+          showMeng:false
         }
     },
     props: {
@@ -88,6 +90,10 @@ export default {
         }
     },
     methods: {
+      handleNoShow(){
+        this.showMeng = false
+        this.rateList = []
+      },
       handleShow(num){
         let list = []
         this.rateList.forEach(()=>{
@@ -95,6 +101,7 @@ export default {
         })
         this.rateList = list
         this.rateList[num] = true
+        this.showMeng = true
       },
         // 处理传入的数据
         handleCarData(value) {
@@ -145,9 +152,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.meng{
+  position: fixed;
+  top: 0;left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9;
+}
 .percentEntry{
     width:100%;
     margin-top: 12px;
+
     .progress{
         width: 100%;
         height: 20px;

pages/summaryOfPortraits/components/components/car/timeAnalysis.vue

@@ -5,6 +5,7 @@
                   :opts="opts"
                   :chartData="res"
                   :inScrollView="true"
+                  :canvas2d="true"
                   :animation="false"
                   tooltipFormat="timeAnalysis"
               />

pages/summaryOfPortraits/components/components/format/bandNumber.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <scroll-view class="main" scroll-y="true">
       <div class="dataItem" v-for="(item,index) in dataList" :key="index">
           <image class="bgIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/bg_icon.svg"></image>
           <div class="left">
@@ -40,7 +40,7 @@
               </div>
           </div>
       </div>
-  </div>
+  </scroll-view>
 </template>
 
 <script>
@@ -71,6 +71,7 @@ export default {
 <style scoped lang="scss">
 .main{
     width: 100%;
+    height: 400px;
     margin-top: 12px;
     .dataItem{
         width: calc(100% - 32px );

pages/summaryOfPortraits/components/components/format/fillingDegree.vue

@@ -1,17 +1,29 @@
 <template>
     <div class="fillingDegree">
         <div class="item">
-            <canvas style=" width: 100vw;height: 280px;position: fixed;left: 100%"  class="fillDegree" canvas-id="fillDegree" id="fillDegree" @tap.stop="tap"  @click.stop="handleChange('')"/>
+          <QiunDataCharts
-            <image style="width: 100vw;height: 280px" v-if="fillDegreePath" class="fillDegree" :src="fillDegreePath"></image>
+              type="ring"
+              :opts="opts"
+              :chartData="res"
+              :animation="false"
+              :inScrollView="true"
+              :canvas2d="true"
+              tooltipFormat="fillingDegree"
+              @getIndex="tap"
+          />
+<!--            <canvas style="width: 100vw;height: 280px;position: fixed;left: 100%" class="fillDegree" canvas-id="fillDegree" id="fillDegree" @tap="tap"/>-->
+<!--            <image style="width: 100vw;height: 280px" v-if="fillDegreePath" class="fillDegree" :src="fillDegreePath"></image>-->
         </div>
     </div>
 </template>
 
 <script>
 import uCharts from '@/components/u-charts.js';
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
     name: "fillingDegree",
+  components: {QiunDataCharts},
     data() {
         return {
           width:0,
@@ -19,6 +31,8 @@ export default {
           selectIndex: 0,
           dataList : [],
           isTap:false,//判断是否走了tap
+          opts:{},
+          res:{}
         }
     },
     props: {
@@ -44,19 +58,21 @@ export default {
             }
         },
         tap(e){
-            uChartsInstance[e.target.id].showToolTip(e,{
+          if (e.currentIndex===-1){
-                formatter: (item, category, index, opts) =>{
-                    this.selectIndex = opts.series[index].key
-                    if (this.selectIndex){
-                        this.$emit('handleChangeBandLevel',this.selectIndex)
-                    }else{
             this.$emit('handleChangeBandLevel',false)
+          }else{
+            let selectIndex = e.opts._series_[e.currentIndex].key
+            if (selectIndex){
+              this.$emit('handleChangeBandLevel',selectIndex)
             }
-                    this.isTap = true
-                    return item.name;
           }
-            });
+          // this.selectIndex = opts.series[index].key
-            uChartsInstance[e.target.id].touchLegend(e);
+          // if (this.selectIndex){
+          //     // this.$emit('handleChangeBandLevel',this.selectIndex)
+          // }else{
+          //     // this.$emit('handleChangeBandLevel',false)
+          // }
+          // this.isTap = true
         },
         // 处理传入的数据
         handleCarData(value) {
@@ -64,7 +80,46 @@ export default {
             let config = {
                 Abundant:value.Abundant
             }
-            this.drawCharts('fillDegree', res ,config)
+            this.res=  res
+          console.log('this.res',this.res)
+          this.opts = {
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
+            padding: [5, 5, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            title: {
+              name:config.Abundant?'盈足':'不盈足',
+              fontSize: 16,
+              color: "#341D00"
+            },
+            subtitle:{
+              name:''
+            },
+            legend: {
+              show: true,
+              position: "right",
+              lineHeight: 25,
+              float: 'center'
+
+            },
+            extra: {
+              ring: {
+                ringWidth: 20,
+                activeOpacity: 0.5,
+                activeRadius: 10,
+                offsetAngle: -45,
+                labelWidth: 15,
+                border: false,
+                borderWidth: 3,
+                borderColor: "#FFFFFF"
+              }
+            }
+          }
+            // this.drawCharts('fillDegree', res ,config)
         },
         drawCharts(id, data,config) {
             const ctx = uni.createCanvasContext(id, this);
@@ -138,6 +193,7 @@ export default {
 <style scoped lang="scss">
 .fillingDegree{
     width: 100%;
+  height: 280px;
     margin-top: 12px;
     .item{
         width: 100%;

pages/summaryOfPortraits/components/components/guest/businessType.vue

@@ -5,6 +5,7 @@
           :opts="opts"
           :chartData="res"
           :animation="false"
+          :canvas2d="true"
           :inScrollView="true"
           tooltipFormat="businessType"
       />

pages/summaryOfPortraits/components/components/guest/consumPrefer.vue

@@ -5,6 +5,7 @@
           :opts="opts"
           :chartData="res"
           :animation="false"
+          :canvas2d="true"
           :inScrollView="true"
           tooltipFormat="consumPrefer"
       />

pages/summaryOfPortraits/components/components/guest/consumptionLevel.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="consumptionLevel">
+      <div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
         <div class="gender">
             <div class="top">
                 <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/man.svg"></image>
@@ -75,6 +76,7 @@ export default {
           positionWidthWoman:'',// 定位百分比
           womanText:'',//女性提示框文字
           manText:'',//男性提示框文字
+          showMeng:false
         }
     },
     props: {
@@ -97,7 +99,13 @@ export default {
         }
     },
     methods: {
+      handleNoShow(){
+        this.showMeng = false
+        this.isShowMan = false
+        this.isShowWoman = false
+      },
       handleShow(type,index,value,e){
+          this.showMeng = true
           let phoneInfo = uni.getStorageSync('phoneInfo')
           let width = phoneInfo.screenWidth
           let startWidth = width * 0.2
@@ -155,6 +163,13 @@ export default {
 .consumptionLevel{
     width: 100%;
     margin-top: 12px;
+  .mengBox{
+    position: fixed;
+    top: 0;left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9;
+  }
     .gender{
         width: 100%;
         margin-bottom: 12px;

pages/summaryOfPortraits/components/components/guest/customerFirst.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="main">
+    <div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
       <div class="yesterday">
           <div class="top">
               <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/datePortrait.svg"></image>
@@ -111,7 +112,8 @@ export default {
             addAreaCarNumber:'',//入区车辆增长
             oneCarPrice:'',//单车价值
             orderTransaction:'',
-          orderAveragePrice:''
+          orderAveragePrice:'',
+          showMeng:false
         }
     },
     props: {
@@ -142,6 +144,11 @@ export default {
             })
             this.genderList = list
             this.genderList[num] = true
+          this.showMeng = true
+        },
+      handleNoShow(){
+        this.genderList = []
+        this.showMeng = false
       }
     }
 }
@@ -150,6 +157,13 @@ export default {
 <style scoped lang="scss">
 .main{
   width: 100%;
+  .mengBox{
+    position: fixed;
+    top: 0;left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9;
+  }
   .yesterday,.month{
     margin-top: 12px;
     width: 100%;
@@ -261,7 +275,7 @@ export default {
                     background: #1E80FF;
                     border-radius: 2px 0 0 2px;
                     .meng{
-                        width: 110px;
+                        width: 120px;
                         height: 20px;
                         line-height: 20px;
                         position: absolute;
@@ -281,7 +295,7 @@ export default {
                     background: #ACB9CD;
                     border-radius: 2px 0 0 2px;
                     .meng{
-                        width: 110px;
+                        width: 120px;
                         height: 20px;
                         line-height: 20px;
                         position: absolute;
@@ -301,7 +315,7 @@ export default {
                     background: #CAD0DA;
                     border-radius: 2px 0 0 2px;
                     .meng{
-                        width: 110px;
+                        width: 120px;
                         height: 20px;
                         line-height: 20px;
                         position: absolute;

pages/summaryOfPortraits/components/components/guest/customerSecond.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="main">
+    <div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
       <div class="pk">
           <div class="gender">
               <div class="left">
@@ -31,6 +32,7 @@
             :opts="opts"
             :chartData="res"
             :animation="false"
+            :canvas2d="true"
             :inScrollView="true"
             tooltipFormat="customerSecond"
         />
@@ -55,7 +57,8 @@ export default {
             customerSecondPath:'',//路径
             genderList:[false,false],
           opts:{},
-          res:{}
+          res:{},
+          showMeng:false
         }
     },
     props: {
@@ -77,6 +80,10 @@ export default {
         tap(e){
             uChartsInstance[e.target.id].touchLegend(e);
         },
+        handleNoShow(){
+          this.genderList = []
+          this.showMeng = false
+        },
         handleShow(num){
           let list = []
           this.genderList.forEach(()=>{
@@ -84,6 +91,7 @@ export default {
           })
           this.genderList = list
           this.genderList[num] = true
+          this.showMeng = true
         },
         // 处理传入的数据
         handleCarData(value) {
@@ -242,6 +250,13 @@ export default {
 .main{
   width: 100%;
   margin-top: 12px;
+  .mengBox{
+    position: fixed;
+    left: 0;top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9;
+  }
   .pk{
       width: 100%;
       padding: 0 16px;

pages/summaryOfPortraits/components/components/manager/moneyCompare.vue

@@ -6,6 +6,7 @@
           :chartData="res"
           :animation="false"
           :inScrollView="true"
+          :canvas2d="true"
           tooltipFormat="moneyCompare"
       />
 <!--        <canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%"  class="compare" canvas-id="compare" id="compare"  @tap="tap"/>-->
@@ -42,6 +43,7 @@ export default {
                 this.comparePath = ''
                 this.dataList = value
                 this.selectIndex = value.type
+              console.log('value',value)
                 this.handleCarData(value)
             },
             immediate: true,
@@ -190,6 +192,7 @@ export default {
                   }
                 ],
               },
+              otherType:res.type,
               extra: {
                 column: {
                   type: "group",

pages/summaryOfPortraits/components/components/manager/revenueTrends.vue

@@ -6,6 +6,7 @@
           :chartData="res"
           :animation="false"
           :inScrollView="true"
+          :canvas2d="true"
           tooltipFormat="revenueTrends"
       />
 <!--        <canvas style=" width: 100vw;height: 208px;position: fixed;left: 100%"  class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>-->
@@ -210,7 +211,7 @@ export default {
 
 <style scoped lang="scss">
 .revenueTrends{
-  width: 100vw;
+  width: calc(100vw - 32px);
   height: 210px;
     .trends{
         width: calc(100vw - 32px);

pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -138,9 +138,11 @@ const cfu = {
 		  }
 	  },
 	  homePlace:function (item, category, index, opts){
+		  console.log('item',item)
+		  console.log('opts',opts)
 		  if (item.name.split(' ')[0] === '其他'){
 			  let str = ''
-			  this.homeData.forEach(item=>{
+			  opts.homeData.forEach(item=>{
 				  if (item.name.split(' ')[0]!=='其他'){
 					  if (str===''){
 						  str = item.name.split(' ')[0]
@@ -149,9 +151,6 @@ const cfu = {
 					  }
 				  }
 			  })
-			  // this.$parent.handleGetHome(str,item.value)
-		  }else{
-			  // this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
 		  }
 		  return item.name + ":" + item.data + '辆';
 	  },
@@ -170,11 +169,15 @@ const cfu = {
 	  businessType:function (item, category, index, opts){
 		  return item.name;
 	  },
-	  moneyCompare:function (item, category, index, opts){
+	  "moneyCompare":function (item, category, index, opts){
 		  const date = new Date()
 		  let m = date.getMonth()
+		  console.log('item',item)
+		  console.log('category',category)
+		  console.log('index',index)
+		  console.log('opts',opts)
 		  if (index >m){
-			  if (this.selectIndex===0){
+			  if (opts.otherType===0){
 				  if (item.name === '工作日平均'){
 					  return item.name + "：" + item.data + '万元'
 				  }else if(item.name === '周末平均'){
@@ -182,7 +185,7 @@ const cfu = {
 				  }else {
 					  return item.name + "：" + item.data + '万元'
 				  }
-			  }else if(this.selectIndex === 1){
+			  }else if(opts.otherType === 1){
 				  if (item.name === '工作日平均'){
 					  return item.name + "：" + noDecimal(item.data) + '笔'
 				  }else if(item.name === '周末平均'){
@@ -190,7 +193,7 @@ const cfu = {
 				  }else {
 					  return item.name + "：" +noDecimal(item.data) + '笔'
 				  }
-			  }else if(this.selectIndex === 2){
+			  }else if(opts.otherType === 2){
 				  if (item.name === '工作日平均'){
 					  return item.name + "：" + item.data + '元'
 				  }else if(item.name === '周末平均'){
@@ -201,7 +204,7 @@ const cfu = {
 			  }
 
 		  }else{
-			  if (this.selectIndex===0){
+			  if (opts.otherType===0){
 				  if (item.name === '工作日平均'){
 					  return item.name + "：" + item.data + '万元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
 				  }else if(item.name === '周末平均'){
@@ -214,7 +217,7 @@ const cfu = {
 						  return item.name + "：" + item.data + '万元'
 					  }
 				  }
-			  }else if (this.selectIndex === 1){
+			  }else if (opts.otherType === 1){
 				  if (item.name === '工作日平均'){
 					  return item.name + "：" + noDecimal(item.data) + '笔，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
 				  }else if(item.name === '周末平均'){
@@ -226,7 +229,7 @@ const cfu = {
 						  return item.name + "：" + noDecimal(item.data) + '笔'
 					  }
 				  }
-			  }else if(this.selectIndex === 2){
+			  }else if(opts.otherType === 2){
 				  if (item.name === '工作日平均'){
 					  return item.name + "：" + item.data + '元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
 				  }else if(item.name === '周末平均'){
@@ -240,6 +243,47 @@ const cfu = {
 				  }
 			  }
 		  }
+	  },
+	  consumptionCompare:function (item, category, index, opts){
+		  if (item.name === '客单数'){
+			  return item.name + ':'+ item.data + '笔'
+		  }else{
+			  return item.name + ':'+ item.data + '辆,交易概率: ' + ((opts.series[0].data[index] / opts.series[1].data[index])*100).toFixed(2) + '%'
+		  }
+	  },
+	  consumptionCompareFormat:function (val){
+		  if (val==='0:00' || val==='4:00'|| val==='8:00'|| val==='12:00'|| val==='16:00'|| val==='20:00'|| val==='23:00'){
+			  if (val === '23:00'){
+				  return '24:00'
+			  }else{
+				  return  val
+			  }
+		  }else{
+			  return ''
+		  }
+	  },
+	  timePeriodAnalysisFormat:function (val){
+		  if (val===0 || val===4 || val===8 || val===12 || val===16 || val===20 || val===23){
+			  if (val===23){
+				  return '24:00'
+			  }else{
+				  return `${val}:00`
+			  }
+		  }else{
+			  return ''
+		  }
+	  },
+	  timePeriodAnalysis:function (item, category, index, opts){
+		  return item.name + ':'+ item.data + '%,' +'数量:' + opts.series[0].number[index] + '笔,金额:' +opts.series[0].money[index] +'元'
+	  },
+	  levelTop:function (item, category, index, opts){
+		  return item.name + ' '+ item.data + '%';
+	  },
+	  businessFormat:function (item, category, index, opts){
+		  return item.name+',' + opts.series[index].text
+	  },
+	  fillingDegree:function (item, category, index, opts){
+		  return item.name;
 	  }
   },
   //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。

pages/summaryOfPortraits/components/formatPortraitBI.vue

@@ -9,7 +9,13 @@
                 :haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="5"/>
     <div class="charts">
       <div class="chartsItem" >
+        <view class="top">
           <p class="title">品牌指数</p>
+<!--          <view class="btnBox">-->
+<!--            <view :class="selectTypeNumber===1?'btnItem selectItem':'btnItem'" @click="handleSelectType(1)">盈足</view>-->
+<!--            <view :class="selectTypeNumber===2?'btnItem selectItem':'btnItem'" @click="handleSelectType(2)">不盈足</view>-->
+<!--          </view>-->
+        </view>
         <div >
           <div class="labelList">
             <div :class="item[5]?'labelItem labelItemSelect':'labelItem labelItemUnSelect'"  v-for="(item,index) in brandLabelList" :key="index" @click="changeLabel(item)">
@@ -36,11 +42,10 @@
             </div>
           </div>
         </div>
-        <div v-if="fillDegreeList.result && fillDegreeList.result.series[0].data.length>0">
+        <div >
           <filling-degree  :data="fillDegreeList" @handleChangeBandLevel="handleChangeBandLevel" :isClick="isClick"/>
           <analyse :analyseInfo="{analysisins_type: 1502,analysisins_format: 2000}" />
         </div>
-        <no-data v-else/>
       </div>
       <!--            <div class="chartsItem" style="margin-top: 32px">-->
       <!--                <p class="title">品牌消费水平<text class="unit"></text></p>-->
@@ -127,7 +132,8 @@ export default {
       haveFun:{},
       startDate:'',// 开始时间
       serviceTypeObj:{},// 服务区类型对象
-      serviceInfoObj:{}
+      serviceInfoObj:{},
+      selectTypeNumber:0
     }
   },
   props:{
@@ -202,6 +208,14 @@ export default {
     this.$util.addUserBehavior()
   },
   methods:{
+    // 盈足不盈足
+    handleSelectType(val){
+      if (val===this.selectTypeNumber){
+        this.selectTypeNumber = 0
+      }else{
+        this.selectTypeNumber = val
+      }
+    },
     // 拿到页面数据
     handleGetPageData(){
       this.endData = uni.getStorageSync('lastDay')
@@ -689,6 +703,25 @@ export default {
             }
           }
         }
+        .btnBox{
+          display: flex;
+          align-items: center;
+          .btnItem{
+            border-radius: 4px;
+            padding:2px 6px;
+            margin-right: 6px;
+            margin-bottom: 6px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            border:1px solid #ccc;
+            background: #fff
+          }
+          .selectItem{
+            background: rgba(202, 208, 218, 0.5);
+            border:1px solid #ccc;
+          }
+        }
       }
       .title{
         font-size: 17px;

pages/summaryOfPortraits/components/guestPortrait.vue

@@ -10,7 +10,7 @@
       :headerBg="'linear-gradient( #3ca284 0%, #ffffff 100%)'"/>
 
       <div class="charts" :style="{paddingTop:serviceInfo.SERVERPART_NAME==='安徽驿达'?menu.bottom + 62 + 14 + 'px':''}">
-          <div class="chartsItem">
+          <div class="chartsItem" style="height: 440px">
               <div style="display: flex;align-items: center;justify-content: space-between">
                   <p class="title">客单分析</p>
                   <div class="item">
@@ -22,7 +22,7 @@
               </div>
               <no-data v-else />
           </div>
-          <div class="chartsItem" style="margin-top: 32px">
+          <div class="chartsItem" style="margin-top: 32px;height: 330px">
               <div class="time">
                   <div class="select">
                       <picker mode="date" fields="month" :value="single" :end="endData"  @change="bindDateChange" >
@@ -40,7 +40,7 @@
               </div>
               <no-data v-else />
           </div>
-          <div class="chartsItem" style="margin-top: 32px">
+          <div class="chartsItem" style="margin-top: 32px;height: 310px">
               <p class="title">客群消费偏好</p>
               <div v-if="consterPreferList.series && consterPreferList.series.length>0">
                   <consum-prefer :data="consterPreferList" />
@@ -48,7 +48,7 @@
               </div>
               <no-data v-else/>
           </div>
-          <div class="chartsItem" style="margin-top: 32px">
+          <div class="chartsItem" style="margin-top: 32px;height: 210px">
               <p class="title">客群消费水平</p>
               <div v-if="consumptionLevelList && consumptionLevelList.length>0">
                   <consumption-level :data="consumptionLevelList"/>
@@ -56,8 +56,8 @@
               </div>
               <no-data v-else />
           </div>
-          <div class="chartsItem" style="margin-top: 32px;height: 210px">
+          <div class="chartsItem" style="margin-top: 32px;height: 220px">
-              <p class="title" style="margin-bottom: 32px">业态客单偏好</p>
+              <p class="title" style="margin-bottom: 24px">业态客单偏好</p>
               <div >
                   <business-type :data="businessTypeList"></business-type>
                   <analyse :analyseInfo="{analysisins_type: 1206,analysisins_format: 2000}" />

pages/summaryOfPortraits/components/managePortrait.vue

@@ -138,7 +138,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="subItem" style="height: 270px;margin-top: 20px;">
+                <div class="subItem" style="height: 230px;margin-top: 20px;">
                     <div style="margin-bottom: 30px;display: flex;align-items: center;justify-content: space-between">
                         <p class="title">{{selectTab===0?'营收特征分析':selectTab===1?'客单对比':selectTab===2?'均价对比':''}}</p>
                         <text v-if="selectTab===0" style="margin-top: 12px">单位: 万元</text>
@@ -150,7 +150,7 @@
                     </div>
 <!--                    <no-data v-else/>-->
                 </div>
-                <div class="subItem" style="height: 270px;margin-top: 20px;">
+                <div class="subItem" style="height: 230px;margin-top: 20px;">
                     <div style="margin-bottom: 30px;display: flex;align-items: center;justify-content: space-between">
                         <p class="title">营收同比分析</p>
                         <text  style="margin-top: 12px">单位: 万元</text>
@@ -158,7 +158,7 @@
                     <div>
                         <revenue-trends :data="trendsList"/>
                     </div>
-                    <no-data v-else/>
+<!--                    <no-data/>-->
                 </div>
                 <analyse :analyseInfo="{analysisins_type: selectTab===0?1305:selectTab===1?1306:selectTab===2?1307:'',analysisins_format: 2000}"/>
             </div>