update

2024-01-04 18:57:17 +08:00 · 2024-01-04 18:57:17 +08:00 · 8db05be80e
commit 8db05be80e
parent 3d83e9b36f
37 changed files with 1073 additions and 118 deletions
--- a/pages/index/components/menus.js
+++ b/pages/index/components/menus.js
@ -85,7 +85,7 @@ const scene = [{
 		"name": "投诉建议",
 		"id": "d405ae13-3388-41c0-a5f6-d11194d0a943",
 		"modelName": "Suggestion",
-		"imagePath": "/static/images/index/tsjy.png",
+		"imagePath": "https://eshangtech.com/ShopICO/ahyd-BID/index/tsjy.png",
 		"noImagePath": "/static/images/index/tsjy-no.png",
 		"homeUrl": "/pages/suggestion/suggestion"
 	},
@ -142,7 +142,7 @@ const management = [{
 		"id": "056b29d7-4721-47ee-ad25-660814e1f3a9",
 		"modelName": "CommodityApproval",
 		"imagePath": "https://eshangtech.com/ShopICO/ahyd-BID/index/spsp.png",
-		"noImagePath": "/static/images/index/spsp-no.png",
+		"noImagePath": "https://eshangtech.com/ShopICO/ahyd-BID/index/spsp-no.png",
 		"homeUrl": "/pages/businessApproval/businessApproval"
 	},
 	{
--- a/pages/index/components/numberScroll.vue
+++ b/pages/index/components/numberScroll.vue
@ -0,0 +1,171 @@
+<template>
+  <view class="content">
+    <!-- num 是字符串，会被切成片渲染 -->
+    <view class="l-num" v-for="(key,value) in num" :key="value">
+      <template v-if="key !== '.' && key !== ','">
+        <view class="l-son" :style="'transform: translateY(-'+(key*52)+'rpx);'" >
+          <view class="l-num l-posi" v-for="(s,i) in range" :style="'transform: translateY('+(i*52)+'rpx);'" :key="i">
+            {{s}}
+          </view>
+        </view>
+      </template>
+      <!-- 小数点 -->
+      <view class="l-num l-posi" v-else>{{key}}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+let range = new Array(10).fill(0).map((e,i) => i);
+
+export default {
+  data() {
+    return {
+      num:'0.00',	//当前显示数字
+      value:'',	//当前数字
+      range:range,//0-9
+      turnTime: 100//定时器时间 单位毫秒  可控制数字滚动快慢 数字越高滚动频率越慢
+    }
+  },
+  props:{
+    number:{
+      type: String,
+      default:''
+    }
+  },
+  watch:{
+    number:{
+      handler(value){
+        this.value = value;
+        this._getNumber();
+      },
+      immediate:true,
+      deep:true
+    }
+  },
+  onLoad() {},
+  methods: {
+
+    // 这里是保留两位小数的
+    _getNumber(){
+      let value = this.value
+      let num = this.num;
+
+      if(num == value){
+        return
+      }
+      // 我的思路是把数字切成一个数组，每个字符对应一个下标
+      this.showNumber = num.toString().split('');
+      this.nowNumber = value.toString().split('');
+      let newShowNumber = []
+      let newNowNumber = []
+
+      this.showNumber.forEach(item=>{
+        if (item!==',' && item!=='.'){
+          newShowNumber.push(Number(item))
+        }else{
+          newShowNumber.push(item)
+        }
+      })
+      this.nowNumber.forEach(item=>{
+        if (item!==',' && item!=='.'){
+          newNowNumber.push(Number(item))
+        }else{
+          newNowNumber.push(item)
+        }
+      })
+      this.showNumber = newShowNumber
+      this.nowNumber = newNowNumber
+
+      let sl = this.showNumber.length;
+      let ol = this.nowNumber.length;
+
+      let key = sl > ol ? 'nowNumber' : 'showNumber';
+
+      // 这个函数是用来补位的，例如原来是1，新数字是100，那么要给位数少的补位 1 ==> 001
+      this._formatNumber(key,sl,ol);
+
+      // 这个是数字变化滚动的具体函数
+      this._turnNumber();
+    },
+
+    _formatNumber(key,oldV,newV){
+      let length = Math.abs(oldV - newV);
+      let arr = new Array(length).fill(0);
+      this[key] = arr.concat(this[key]);
+    },
+
+    _turnNumber(){
+
+      let _this = this;
+      // 循环数字数组，
+      _this.showNumber.forEach((e,i) => {
+          // 判断对应位数的值，如果相等就跳过
+          if(e == _this.nowNumber[i]) return;
+
+          let inter = setInterval(() => {
+            // 数值相等后清除定时器
+            if(e == _this.nowNumber[_this._index(i)]){
+              clearInterval(inter);
+            }else{
+              if (e!==',' && e!=='.'){
+                // 如果大于就 --  小于就 ++
+                _this.showNumber[_this._index(i)] = e > _this.nowNumber[_this._index(i)] ? --e : ++e;
+                // 每次值变化都更新到视图上，这样看上去就像是滚动了一下。好吧，其实就是滚动了
+                _this.num = parseFloat(_this.showNumber.join('')).toFixed(2);
+                _this.num = _this.$util.fmoney(_this.num,2)
+              }else{
+                clearInterval(inter);
+              }
+            }
+          },_this.turnTime);
+      })
+    },
+    // 保留当前i的值
+    _index(i){
+      return i
+    }
+  }
+}
+</script>
+
+<style>
+.content{
+  width: 100%;
+  text-align: center;
+}
+
+.l-input{
+  padding: 30rpx;
+}
+
+.l-num{
+  font-size: 44rpx;
+  font-family: DINAlternate, DINAlternate;
+  font-weight: bold;
+  color: #160002;
+  line-height: 52rpx;
+  display: inline-block;
+  width: 30rpx;
+  text-align: center;
+  height: 52rpx;
+  overflow: hidden;
+  position: relative;
+}
+
+.l-son{
+  width: 100%;
+  height: calc(100% * 10);
+  position: relative;
+  transition:all 0.5s;
+}
+
+.l-posi{
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  border: none;
+}
+</style>
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -898,7 +898,8 @@
          </view>

          <view class="revenueMoney">
-            <text class="moneyText">{{currentMoney}}</text>
+            <NumberScroll :number="currentMoney"/>
+<!--            <text class="moneyText">{{currentMoney}}</text>-->
            <text class="moneyLabel">实时营收/元</text>
          </view>
        </view>
@ -1309,9 +1310,10 @@ import MonthCharts from "./components/monthCharts.vue";
 import RateCharts from "./components/rateCharts.vue";
 import SliderPage from "./components/sliderPage.vue";
 import UniDataSelect from "../../components/uni-data-select/uni-data-select.vue";
+import NumberScroll from "./components/numberScroll.vue";
 var rincanvas = {};
 export default {
-  components: {SliderPage, RateCharts, MonthCharts, Tabbar,uniPopup,UniDataSelect},
+  components: {SliderPage, RateCharts, MonthCharts, Tabbar,uniPopup,UniDataSelect,NumberScroll},
  data() {
    const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
    // const lastDay = '2024-01-01'
@ -2041,7 +2043,9 @@ export default {
      }
      request.$webGet('CommercialApi/Revenue/GetCurRevenue',req).then(res=>{
        console.log('res',res)
-        this.currentMoney = this.$util.fmoney(res.Result_Data.CurRevenueAmount,2)
+        // this.currentMoney = this.$util.fmoney(res.Result_Data.CurRevenueAmount,2)
+        this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2)
+
      })
    },
    handleGetWarningList(){
@ -2200,7 +2204,7 @@ export default {
      request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
        // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        this.plan = res.Result_Data
-        this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree
+        this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree || ''
        this.plan.percentageYear =  res.Result_Data.YearBudget_Degree

        this.monthAdd = this.plan.MonthGrowth_Rate>0?`+${this.plan.MonthGrowth_Rate}`:`${this.plan.MonthGrowth_Rate}`
--- a/pages/summaryOfPortraits/components/carPortrait.vue
+++ b/pages/summaryOfPortraits/components/carPortrait.vue
@ -132,10 +132,10 @@
        </div>
      </view>
      <view class="swiperBox" v-else>
-        <view class="swiperItem">
+        <view class="swiperItem" >
 <!--          :style="{height:`calc(100vh - ${menu.bottom + 62}px)`}"-->
-          <view :style="{paddingTop:menu.bottom + 62+'px',height:`calc(100vh - ${menu.bottom + 62}px)`,overflowY: 'scroll'}">
-            <div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')',height:324-menu.bottom - 62 + 'px'}">
+          <scroll-view scroll-y="true" style="height: 100vh" @scroll="handleScroll">
+            <div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')',height:648+'rpx'}">
              <div class="analyse" v-if="analyseText">
                <text class="title">分析</text>
                <text class="content">{{analyseText}}</text>
@ -166,7 +166,7 @@
                  <div class="seize"></div>
                </div>
              </div>
-              <div class="serviceArea" :style="{top : 8 + 'px'}" >
+              <div class="serviceArea" :style="{top : menu.bottom + 70 + 'px'}" >
                <div class="detailBox">
                  <div class="detailTop">
                    <div class="topLeft">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
@ -196,7 +196,7 @@
                </div>
              </div>
            </div>
-            <div class="charts">
+            <div class="charts" @click.stop="handleClick($event)">
              <div class="chartsItem">
                <div style="display: flex;align-items: center;justify-content: space-between">
                  <p class="title">昨日入区车流</p>
@ -219,7 +219,7 @@
                </div>
              </div>

-              <div class="chartsItem" style="margin-top: 32px">
+              <div class="chartsItem" style="margin-top: 32px;height: 620px">
                <div class="time">
                  <text class="thisTime"></text>
                  <div class="select">
@ -235,7 +235,7 @@
                  <view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
                </view>

-                <p class="title">{{thisMonth?thisMonth:'-'}}月车辆归属地</p>
+                <p class="title" style="margin-bottom: 32px">车辆归属地</p>
                <div v-if="homePlace && homePlace.length>0">
                  <home-place :selectProvinceName="selectProvinceName" :selectValue="selectValue" :homeData="homePlace" :homeCity="cityPlace" @getHomeDate="getHomeData"/>
                  <div style="display: flex">
@ -251,11 +251,13 @@

                  <analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}"  />
                </div>
-                <no-data v-if="!homePlace"  :type="'car'"/>
+                <div style="height: 450px" v-if="!homePlace" >
+                  <no-data :type="'car'"/>
+                </div>
              </div>

-              <div class="chartsItem" style="margin-top: 32px">
-                <p class="title">{{thisMonth?thisMonth:'-'}}月车型停留分析/日均</p>
+              <div class="chartsItem" style="margin-top: 32px;height:280px">
+                <p class="title">车型停留分析/日均</p>
                <div v-if="carTypeTimeData.series && carTypeTimeData.series.length>0">
                  <car-type-time :data="carTypeTimeData"/>
                  <analyse :analyseInfo="{analysisins_type: 1104,analysisins_format: 2000}"  />
@ -263,18 +265,18 @@
                <no-data v-if="!carTypeTimeData.series"  :type="'car'"/>
              </div>

-              <div class="chartsItem" style="margin-top: 32px">
-                <p class="title">{{thisMonth?thisMonth:'-'}}月车型停留分布图/日均</p>
-                <div v-if="timeAnalysisData.series && timeAnalysisData.series.length>0">
+              <div class="chartsItem" style="margin-top: 32px;height:280px">
+                <p class="title" style="margin-bottom: 16px">车型停留分布图/日均</p>
+                <div>
                  <time-analysis :data="timeAnalysisData"/>
                  <analyse :analyseInfo="{analysisins_type: 1105,analysisins_format: 2000}"  />
                </div>
-                <no-data v-if="!timeAnalysisData.series"  :type="'car'"/>
+<!--                <no-data v-if="!timeAnalysisData.series"  :type="'car'"/>-->
              </div>

              <div class="chartsItem" style="margin-top: 32px">
                <div class="topItem" >
-                  <p class="title">{{thisMonth?thisMonth:'-'}}月入区车型占比</p>
+                  <p class="title">入区车型占比</p>
                  <div class="box" v-if="allEntry">
                    <text class="value">{{allEntry?allEntry:'-'}}%</text>
                    <view class="right" v-if="addAllEntry">
@ -291,7 +293,7 @@
                <no-data v-if="!percentEntryData "  :type="'car'"/>
              </div>
            </div>
-          </view>
+          </scroll-view>
        </view>
      </view>

@ -516,8 +518,11 @@ export default {
      this.searchTextMonth = ''
    },
    methods:{
+      handleClick(e){
+        // console.log('click',e)
+      },
      handleScroll(e){
-        console.log('e',e)
+        // console.log('e',e)
        this.scrollTop = e.detail.scrollTop
      },
      // 修改排序字段
@ -1982,7 +1987,6 @@ export default {
    width: 100%;
    .swiperItem{
      width: 100%;
-      height: 100vh;
      .header{
        width: 100%;
        //height: calc(1.056 * 100vw);
--- a/pages/summaryOfPortraits/components/components/car/carTypeTime.vue
+++ b/pages/summaryOfPortraits/components/components/car/carTypeTime.vue
@ -1,8 +1,16 @@
 <template>
-    <div style="min-height: 100px;">
+    <div >
            <div class="carTypeTime" >
-                <canvas style="width: 100vw;height: 252px;position: fixed;left: 100vw"  class="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>
-                <image style="width: 100vw;height: 252px;" v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>
+              <qiunDataCharts
+                type="column"
+                :opts="opts"
+                :chartData="res"
+                :animation="false"
+                :inScrollView="true"
+                tooltipFormat="carTypeTime"
+              />
+<!--                <canvas style="width: 100vw;height: 252px;position: fixed;left: 100vw"  class="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>-->
+<!--                <image style="width: 100vw;height: 252px;" v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>-->
            </div>
    </div>
 </template>
@ -11,10 +19,11 @@
 import uCharts from '@/components/u-charts.js';
 import NoData from "../noData.vue";
 import Analyse from "../analyse.vue";
+import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
    name: "carTypeTime",
-    components: {Analyse, NoData},
+    components: {Analyse, NoData,qiunDataCharts},
    data() {
        return {
            width:0,
@ -25,7 +34,9 @@ export default {
                analysisins_type: 1104,
                analysisins_format: 2000
            },
-            num:0
+            num:0,
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -70,7 +81,64 @@ export default {
            let config = {
                max:this.getSplitNumber(value.series[1].max)
            }
-            this.drawCharts('carTypeTime', res,config)
+            this.res = res
+          this.opts = {
+            categories:res.categories,
+            series: res.series,
+            animation: false,
+            canvas2d: true,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#1E80FF","#00B6FF"],
+            padding: [30,30,0,0],
+            dataLabel: false,
+            enableScroll: false,
+            legend: {
+              show: true,
+              position: "bottom",
+              lineHeight: 25,
+              float: 'center'
+
+            },
+            xAxis:{
+              disableGrid: true,
+              axisLineColor:"#F2F2F5"
+            },
+            yAxis:{
+              showTitle:true,
+              gridColor:'#F2F2F5',
+              data: [
+                {
+                  title:'单位: %',
+                  min: 0,
+                  max: 100,
+                  titleOffsetY: -5,
+                  axisLineColor:"#F2F2F5"
+                },
+                {
+                  title:'单位: 分钟',
+                  min: 0,
+                  max: config.max,
+                  position: 'right',
+                  titleOffsetY: -5,
+                  titleOffsetX: 5,
+                  axisLineColor:"#F2F2F5"
+                },
+              ]
+            },
+            extra: {
+              column: {
+                type: "group",
+                width: 12,
+                seriesGap:2,
+                categoryGap: 24,
+                activeBgColor: "#000000",
+                activeBgOpacity: 0.08,
+              }
+            }
+          }
+            // this.drawCharts('carTypeTime', res,config)
        },
        getSplitNumber(value){
            if (value === 0){
@ -171,7 +239,7 @@ export default {

 <style scoped lang="scss">
 .carTypeTime{
-    width: 100%;
+  width: calc(100vw - 16px);
    height: 252px;
    .canvas{
        width: 100%;
--- a/pages/summaryOfPortraits/components/components/car/homePlace.vue
+++ b/pages/summaryOfPortraits/components/components/car/homePlace.vue
@ -1,9 +1,18 @@
 <template>
-    <div style="min-height: 100px;">
+    <div >
            <div class="main" >
                <div class="homePlace">
-                    <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>
+                  <QiunDataCharts
+                    type="ring"
+                    :opts="opts"
+                    :animation="false"
+                    :chartData="res"
+                    :inScrollView="true"
+                    tooltipFormat="homePlace"
+                    :ontap="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>-->
                </div>
                <div class="homeCity">
 <!--                    <div class="dashed box1"></div>-->
@ -41,10 +50,11 @@
 import uCharts from '@/components/u-charts.js';
 import NoData from "../noData.vue";
 import Analyse from "../analyse.vue";
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
    name: "homePlace",
-    components: {Analyse, NoData},
+    components: {Analyse, NoData,QiunDataCharts},
    data() {
        return {
            isShowData:false,
@ -59,7 +69,9 @@ export default {
            textList:[],
            selectIndex:7,
            provinceName:'',
-            selectValueNumber:''
+            selectValueNumber:'',
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -163,7 +175,45 @@ export default {
                    }
                ]
            }
-            this.drawCharts('homePlace', res,this.provinceName)
+
+            this.res = res
+          this.opts = {
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            canvas2d: true,
+            background: "#FFFFFF",
+            color: ["#1E80FF", "#00B6FF","#38C275","#6B6FFF","#6B85AE"],
+            padding: [5, 5, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            title:{
+              name: ''
+            },
+            subtitle:{
+              name: ''
+            },
+            legend: {
+              show: true,
+              position: "right",
+              lineHeight: 25
+            },
+            extra: {
+              ring: {
+                ringWidth: 12,
+                activeOpacity: 0.5,
+                activeRadius: 10,
+                offsetAngle: -45,
+                labelWidth: 15,
+                border: false,
+                borderWidth: 3,
+                borderColor: "#FFFFFF"
+              }
+            }
+          }
+
+            // this.drawCharts('homePlace', res,this.provinceName)
        },
        drawCharts(id, data,provinceName) {
            const ctx = uni.createCanvasContext(id, this);
@ -233,10 +283,10 @@ export default {

 <style scoped lang="scss">
 .main{
-  width: 100%;
+  width: calc(100vw - 32px);
    .homePlace{
        height: 160px;
-        width: 100%;
+      width: calc(100vw - 16px);
        .carNum{
          position: absolute;

--- a/pages/summaryOfPortraits/components/components/car/monthTotal.vue
+++ b/pages/summaryOfPortraits/components/components/car/monthTotal.vue
@ -1,18 +1,32 @@
 <template>
    <div class="main">
-        <canvas  style="height: 300px;width: 100vw;position:fixed;left: 100vw" class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap"/>
-      <image style="height: 300px;width: 100vw" v-if="preferPath" class="canvas" :src="preferPath"/>
+      <qiunDataCharts
+          type="mix"
+          :opts="opts"
+          :chartData="monthData"
+          :animation="false"
+          :inScrollView="true"
+          tooltipFormat="monthTotal"
+      />
+<!--        <canvas class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap" />-->
+<!--      <image style="height: 300px;width: 100vw" v-if="preferPath" class="canvas" :src="preferPath"/>-->
    </div>
 </template>

 <script>
 import uCharts from '@/components/u-charts.js';
 var uChartsInstance = {};
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 export default {
    name: "monthTotal",
+    components: {QiunDataCharts},
    data(){
        return {
-          preferPath:''
+          preferPath:'',
+          opts:{
+
+          },
+
        }
    },
    props: {
@ -20,6 +34,10 @@ export default {
          type: Object,
          default: () => {}
        },
+        scrollTop:{
+          type:Number,
+          default:0
+        }
    },
    watch: {
        monthData: {
@ -27,17 +45,46 @@ export default {
              console.log('val1111ue',value)
              this.handleCarData(value)
            },
+        },
+      scrollTop:{
+        handler(value){
+          }
      }
    },
    methods:{
-        handleTap(e){
-            uChartsInstance[e.target.id].showToolTip(e,{
-                formatter: (item, category, index, opts) => {
-                    console.log('item',item)
-                    console.log('index',index)
-                    console.log('opts',opts)
+      tooltip(item, category, index, opts){
+        let text = ''
+        let type = item.name.slice(5,10)
+        let time = opts.series[0].info[index].year
+        if (type === '车流量'){
+          if (`${time}年车流量` === item.name){
+            let showTime = opts.series[0].info[index].year.toString().slice(2,5)
+            text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?this.$util.fmoney(opts.series[0].info[index].allCarCount):''} 辆`
+          }else{
+            let showTime = opts.series[1].info[index].year.toString().slice(2,5)
+            text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?this.$util.fmoney(opts.series[1].info[index].allCarCount):''} 辆`
+          }
+          return text
+        }else{
+          if (`${time}年交易额` === item.name){
+            let showTime = opts.series[2].year.toString().slice(2,5)
+            console.log('showTime',showTime)
+            text = `${showTime}年金额 ${opts.series[2].info[index].money?this.$util.fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
+          }else{
+            let showTime = opts.series[3].year.toString().slice(2,5)
+            text = `${showTime}年金额 ${opts.series[3].info[index].money?this.$util.fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
+          }
+          return text
+        }
+      },
+        handleTap(e){
+          console.log('e1',e)
+          console.log('offset',{x: e.detail.x, y: e.detail.y + this.scrollTop - e.currentTarget.offsetTop})
+            uChartsInstance[e.target.id].showToolTip(e,{
+                // offset: {x: e.detail.x, y: e.target.offsetTop - e.currentTarget.offsetTop},
+                offset: {x: e.detail.x, y: e.detail.y + this.scrollTop - e.currentTarget.offsetTop},
+                formatter: (item, category, index, opts) => {
                    let text = ''
-                    console.log('item.name.slice(5,10)',item.name.slice(5,10))
                    let type = item.name.slice(5,10)
                    let time = opts.series[0].info[index].year
                    if (type === '车流量'){
@ -99,7 +146,77 @@ export default {
                moneyMax:value.series[2].max > value.series[3].max ? this.getSplitNumber(value.series[2].max):this.getSplitNumber(value.series[3].max)
              }
            }
-            this.drawCharts('monthTotal', res, config)
+          let phoneInfo = uni.getStorageSync('phoneInfo')
+          let width = phoneInfo.screenWidth-32
+            this.opts={
+              type: "mix",
+              categories: res.categories,
+              series: res.series,
+              animation: false,
+              rotate: false,
+              rotateLock: false,
+              canvas2d: true,
+              background: "#FFFFFF",
+              color: ["#1E80FF", "#00B6FF","#38C275","#6B6FFF","#6B85AE"],
+              padding: [35, 10, 5, 5],
+              dataLabel: false,
+              enableScroll: false,
+              xAxis: {
+                disabled: false,
+                disableGrid: true,
+                axisLine: false,
+                fontColor: '#777777',
+                fontSize:res.categories && res.categories.length<10 ? 13 : 11
+              },
+              yAxis:{
+                showTitle:true,
+                data:[{
+                  position: "left",
+                  title: '车流量 / 万辆 ',
+                  disabled: false,
+                  axisLine: false,
+                  titleOffsetY: -5,
+                  titleOffsetX: 25,
+                  min: 0,
+                  max:config.carMax
+                },
+                  {
+                    position: "right",
+                    title: '交易金额 / 万元',
+                    disabled: false,
+                    axisLine: false,
+                    titleOffsetY: -5,
+                    titleOffsetX: -15,
+                    min: 0,
+                    max:config.moneyMax
+                  }]
+              },
+              legend: {
+                show: true,
+                position: "bottom",
+                lineHeight: 25,
+                float:'center',
+                itemGap: 30
+              },
+              extra: {
+                mix:{
+                  column:{
+                    type: "group",
+                    width: 12,
+                    activeBgColor: "#000000",
+                    activeBgOpacity: 0.08
+                  },
+                  line:{
+                    type: "curve",
+                    width: 2,
+                    activeType: "hollow"
+                  }
+                }
+              }
+            }
+
+
+            // this.drawCharts('monthTotal', res, config)
        },
        getSplitNumber(value){
            if (value === 0){
@ -187,7 +304,7 @@ export default {
                }
            });
          setTimeout( ()=>{
-            this.canvasToTempImage('monthTotal')
+            // this.canvasToTempImage('monthTotal')
          },500)
        },
      canvasToTempImage(id){
@ -213,7 +330,7 @@ export default {

 <style scoped lang="scss">
 .main{
-    width: 100%;
+    width: calc(100vw - 16px);
    height: 300px;
    .canvas{
        width: 100%;
--- a/pages/summaryOfPortraits/components/components/car/timeAnalysis.vue
+++ b/pages/summaryOfPortraits/components/components/car/timeAnalysis.vue
@ -1,21 +1,28 @@
 <template>
-    <div style="min-height: 100px;">
-            <div class="timeAnalysis" >
-                <canvas  style="width:100vw;height:220px;position:fixed;left:100vw" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis" @tap="handleTap"/>
-              <image v-if="preferPath" style="width: 100vw;height: 220px;" :src="preferPath"></image>
+    <div class="timeAnalysis">
+              <QiunDataCharts
+                  type="line"
+                  :opts="opts"
+                  :chartData="res"
+                  :inScrollView="true"
+                  :animation="false"
+                  tooltipFormat="timeAnalysis"
+              />
+<!--                <canvas  style="width:100vw;height:220px;position:fixed;left:100vw" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis" @tap="handleTap"/>-->
+<!--              <image v-if="preferPath" style="width: 100vw;height: 220px;" :src="preferPath"></image>-->

    </div>
-    </div>
 </template>

 <script>
 import uCharts from '@/components/u-charts.js';
 import NoData from "../noData.vue";
 import Analyse from "../analyse.vue";
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 var uChartsInstance = {};
 export default {
    name: "timeAnalysis",
-    components: {Analyse, NoData},
+    components: {Analyse, NoData,QiunDataCharts},
    data() {
        return {
            width:0,
@ -24,7 +31,9 @@ export default {
                analysisins_type: 1105,
                analysisins_format: 2000
            },
-          preferPath:''
+          preferPath:'',
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -73,7 +82,61 @@ export default {
                series:value.series
            }
            let max = this.getSplitNumber(value.max)
-            this.drawCharts('timeAnalysis', res,max)
+            this.res = res
+            this.opts = {
+            categories: res.categories,
+            series: res.series,
+            animation: false,
+            rotate: false,
+            canvas2d: true,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#1E80FF", "#00B6FF","#0FC862"],
+            padding: [15, 30, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            xAxis: {
+              disableGrid: true,
+              formatter:(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 ''
+                }
+              }
+            },
+            yAxis: {
+              gridType: "dash",
+              dashLength: 2,
+              showTitle:true,
+              data:[{
+                title:'单位: 分钟',
+                titleOffsetY: -5,
+                min:0,
+                max:max,
+              }]
+            },
+            legend: {
+              show: true,
+              position: "bottom",
+              lineHeight: 25,
+              float: 'center'
+
+            },
+            extra: {
+              line: {
+                type: "curve",
+                width: 2,
+                activeType: "hollow"
+              }
+            }
+          }
+
+            // this.drawCharts('timeAnalysis', res,max)
        },
        drawCharts(id, data,max) {
            const ctx = uni.createCanvasContext(id, this);
@ -163,11 +226,8 @@ export default {

 <style scoped lang="scss">
 .timeAnalysis{
-    width: 100%;
-    .timeAnalysis{
-        width: 100%;
+  width: calc(100vw - 16px);
  height: 220px;
  margin-top: 12px;
-    }
 }
 </style>
--- a/pages/summaryOfPortraits/components/components/guest/businessType.vue
+++ b/pages/summaryOfPortraits/components/components/guest/businessType.vue
@ -1,20 +1,32 @@
 <template>
    <div class="businessType">
-        <canvas class="business" style=" width: 100vw;height: 170px;position: fixed;left: 100vw" canvas-id="businessType" id="businessType" @tap="handleTap"/>
-      <image v-if="preferPath" style="width: 100vw;height: 170px" :src="preferPath"></image>
+      <QiunDataCharts
+          type="ring"
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          tooltipFormat="businessType"
+      />
+<!--        <canvas class="business" style=" width: 100vw;height: 170px;position: fixed;left: 100vw" canvas-id="businessType" id="businessType" @tap="handleTap"/>-->
+<!--      <image v-if="preferPath" style="width: 100vw;height: 170px" :src="preferPath"></image>-->

    </div>
 </template>

 <script>
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 import uCharts from '@/components/u-charts.js';
 var uChartsInstance = {};
 export default {
    name: "businessType",
+  components:{QiunDataCharts},
    data() {
        return {
            width:0,
-          preferPath:''
+          preferPath:'',
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -45,7 +57,44 @@ export default {
            let res = {
                series:value
            }
-            this.drawCharts('businessType', res)
+            this.res = res
+          this.opts = {
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#74839D","#B8C7DE"],
+            padding: [5, 5, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            title:{
+              name:''
+            },
+            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('businessType', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
@ -73,6 +122,7 @@ export default {
                    float: 'center'

                },
+
                extra: {
                    ring: {
                        ringWidth: 20,
@ -113,10 +163,11 @@ export default {

 <style scoped lang="scss">
 .businessType{
-    width: 100%;
+  width: calc(100vw - 32px);
+  height: 190px;
    .business{
        width: 100%;
-        height: 170px;
+        height: 190px;
    }
 }
 </style>
--- a/pages/summaryOfPortraits/components/components/guest/consumPrefer.vue
+++ b/pages/summaryOfPortraits/components/components/guest/consumPrefer.vue
@ -1,19 +1,31 @@
 <template>
    <div class="consumPrefer">
-        <canvas style="width: 100vw;height: 274px;position: fixed;left: 100vw"  class="prefer" canvas-id="prefer" id="prefer" @tap="tap"/>
-        <image style="width: 100vw;height: 274px;" v-if="preferPath" class="prefer" :src="preferPath"></image>
+      <QiunDataCharts
+          type="radar"
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          tooltipFormat="consumPrefer"
+      />
+<!--        <canvas style="width: 100vw;height: 274px;position: fixed;left: 100vw"  class="prefer" canvas-id="prefer" id="prefer" @tap="tap"/>-->
+<!--        <image style="width: 100vw;height: 274px;" v-if="preferPath" class="prefer" :src="preferPath"></image>-->
    </div>
 </template>

 <script>
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 import uCharts from '@/components/u-charts.js';
 var uChartsInstance = {};
 export default {
    name: "consumPrefer",
+  components:{QiunDataCharts},
    data() {
        return {
            width:0,//手机宽度
-            preferPath:''//路径
+            preferPath:'',//路径
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -37,7 +49,38 @@ export default {
        // 处理传入的数据
        handleCarData(value) {
            let res = value
-            this.drawCharts('prefer', res)
+          this.res = value
+            this.opts = {
+              categories: res.categories,
+              series: res.series,
+              animation: false,
+              rotate: false,
+              rotateLock: false,
+              background: "#FFFFFF",
+              color: ["#1E80FF", "#00C2FF"],
+              padding: [5, 5, 5, 5],
+              dataLabel: false,
+              enableScroll: false,
+              legend: {
+                show: true,
+                position: "bottom",
+                lineHeight: 25,
+                float: 'center'
+
+              },
+              extra: {
+                radar: {
+                  gridType: "radar",
+                  gridColor: "#CCCCCC",
+                  gridCount: 3,
+                  opacity: 0.2,
+                  max: res.max,
+                  labelShow: true,
+                  border: true
+                }
+              }
+            }
+          // this.drawCharts('prefer', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
@ -105,7 +148,7 @@ export default {

 <style scoped lang="scss">
 .consumPrefer{
-    width: 100%;
+    width: calc(100vw - 32px);
    height: 274px;
    .prefer{
        width: 100%;
--- a/pages/summaryOfPortraits/components/components/guest/customerSecond.vue
+++ b/pages/summaryOfPortraits/components/components/guest/customerSecond.vue
@ -26,17 +26,27 @@
          </div>
      </div>
      <div class="charts">
-          <canvas  class="sexRatio" style=" width: 100vw;height: 220px;position: fixed;left: 100vw" canvas-id="gender" id="gender" @tap="tap"/>
-          <image class="sexRatio" style=" width: 100vw;height: 220px;" v-if="customerSecondPath" :src="customerSecondPath"></image>
+        <QiunDataCharts
+            type="bubble"
+            :opts="opts"
+            :chartData="res"
+            :animation="false"
+            :inScrollView="true"
+            tooltipFormat="customerSecond"
+        />
+<!--          <canvas  class="sexRatio" style=" width: 100vw;height: 220px;position: fixed;left: 100vw" canvas-id="gender" id="gender" @tap="tap"/>-->
+<!--          <image class="sexRatio" style=" width: 100vw;height: 220px;" v-if="customerSecondPath" :src="customerSecondPath"></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: "customerSecond",
+  components: {QiunDataCharts},
    data() {
        return {
            man:0,
@ -44,6 +54,8 @@ export default {
            width:0,//手机宽度
            customerSecondPath:'',//路径
            genderList:[false,false],
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -80,7 +92,63 @@ export default {
            let res = {
                series: value.res
            }
-            this.drawCharts('gender', res)
+            this.res = res
+          this.opts = {
+            type: "bubble",
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#1E80FF", "#00C2FF"],
+            padding: [15, 5, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            legend: {
+              show: true,
+              position: "bottom",
+              lineHeight: 25,
+              float: 'center'
+
+            },
+            xAxis: {
+              disableGrid: true,
+              gridType: "solid",
+              splitNumber: 5,
+              boundaryGap: "justify",
+              title:'年龄: /岁',
+              titleOffsetY: 15,
+              titleOffsetX: -30,
+              min: 10,
+              max: 60,
+              axisLineColor:'#F2F2F5'
+            },
+            yAxis: {
+              disableGrid: false,
+              gridType: "solid",
+              showTitle:true,
+              splitNumber:6,
+              gridColor:'#F2F2F5',
+              data: [
+                {
+                  title:'单位: /元',
+                  min: 0,
+                  max: 120,
+                  titleOffsetY:-5,
+                  titleOffsetX:0,
+                  fontColor:'#786B6C',
+                  axisLineColor:'#F2F2F5'
+                }
+              ]
+            },
+            extra: {
+              bubble: {
+                border: 1,
+                opacity: 0.25
+              }
+            }
+          }
+            // this.drawCharts('gender', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
@ -288,7 +356,7 @@ export default {
      width: 100%;
      height: 220px;
      .sexRatio{
-          width: 100%;
+        width: calc(100vw - 32px);
          height: 100%;
      }
  }
--- a/pages/summaryOfPortraits/components/components/manager/moneyCompare.vue
+++ b/pages/summaryOfPortraits/components/components/manager/moneyCompare.vue
@ -1,21 +1,33 @@
 <template>
    <div class="moneyCompare">
-        <canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%"  class="compare" canvas-id="compare" id="compare"  @tap="tap"/>
-        <image style="width: calc(100vw - 32px);height: 200px;" v-if="comparePath" class="compare" :src="comparePath"></image>
+      <qiunDataCharts
+          type="column"
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          tooltipFormat="moneyCompare"
+      />
+<!--        <canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%"  class="compare" canvas-id="compare" id="compare"  @tap="tap"/>-->
+<!--        <image style="width: calc(100vw - 32px);height: 200px;" v-if="comparePath" class="compare" :src="comparePath"></image>-->
    </div>
 </template>

 <script>
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 import uCharts from '@/components/u-charts.js';
 var uChartsInstance = {};
 export default {
    name: "moneyCompare",
+  components:{QiunDataCharts},
    data() {
        return {
          width:0,
          comparePath:'',
          dataList: [],
-          selectIndex:0
+          selectIndex:0,
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -141,7 +153,56 @@ export default {
            let config  = {
                max:this.getSplitNumber(max)
            }
-            this.drawCharts('compare', res,config)
+            this.res = res
+            this.opts = {
+              categories: res.categories,
+              series: res.series,
+              animation: false,
+              rotate: false,
+              rotateLock: false,
+              background: "#FFFFFF",
+              color: ["#1E80FF", "#00B6FF","#ACB9CD"],
+              padding: [15, 40, 5, 0],
+              dataLabel: false,
+              enableScroll: false,
+              legend: {
+                show: true,
+                position: "bottom",
+                lineHeight: 25,
+                float: 'center'
+              },
+              xAxis: {
+                disableGrid: true,
+                axisLineColor:'#F2F2F5'
+              },
+              yAxis: {
+                showTitle:false,
+                splitNumber:4,
+                gridColor:'#F2F2F5',
+                data: [
+                  {
+                    min: 0,
+                    max:config.max,
+                    titleOffsetX:15,
+                    titleOffsetY:-5,
+                    fontSize:12,
+                    axisLineColor:'#F2F2F5'
+                  }
+                ],
+              },
+              extra: {
+                column: {
+                  type: "group",
+                  width: 5,
+                  seriesGap:4,
+                  activeBgColor: "#000000",
+                  activeBgOpacity: 0.08,
+                  barBorderRadius:[3,3,0,0]
+                }
+              }
+            }
+
+            // this.drawCharts('compare', res,config)
        },
        getSplitNumber(value){
            if (value === 0){
@ -234,7 +295,8 @@ export default {

 <style scoped lang="scss">
 .moneyCompare{
-    width: 100%;
+  width: 100vw;
+  height: 200px;
    .compare{
        width: calc(100vw - 32px);
        height: 200px;
--- a/pages/summaryOfPortraits/components/components/manager/revenueTrends.vue
+++ b/pages/summaryOfPortraits/components/components/manager/revenueTrends.vue
@ -1,20 +1,32 @@
 <template>
    <div class="revenueTrends">
-        <canvas style=" width: 100vw;height: 208px;position: fixed;left: 100%"  class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>
-      <image v-if="preferPath" style="width: 100vw;height: 208px;" :src="preferPath"></image>
+      <QiunDataCharts
+          type="area"
+          :opts="opts"
+          :chartData="res"
+          :animation="false"
+          :inScrollView="true"
+          tooltipFormat="revenueTrends"
+      />
+<!--        <canvas style=" width: 100vw;height: 208px;position: fixed;left: 100%"  class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>-->
+<!--      <image v-if="preferPath" style="width: 100vw;height: 208px;" :src="preferPath"></image>-->

    </div>
 </template>

 <script>
+import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
 import uCharts from '@/components/u-charts.js';
 var uChartsInstance = {};
 export default {
    name: "revenueTrends",
+  components:{QiunDataCharts},
    data() {
        return {
          trendsPath:'',
-          preferPath:''
+          preferPath:'',
+          opts:{},
+          res:{}
        }
    },
    props: {
@ -56,9 +68,58 @@ export default {
        // 处理传入的数据
        handleCarData(value) {
            let res = value
-          if (value && value.series && value.series.length>0){
-            this.drawCharts('trends', res)
+          this.res = res
+          this.opts = {
+            categories: res.categories,
+            series: res.series,
+            animation: false,
+            rotate: false,
+            rotateLock: false,
+            background: "#FFFFFF",
+            color: ["#1E80FF","#00B6FF"],
+            padding: [15, 15, 5, 5],
+            dataLabel: false,
+            enableScroll: false,
+            legend: {
+              show: true,
+              position: "bottom",
+              lineHeight: 25,
+              float: 'center'
+
+            },
+            xAxis: {
+              disableGrid: true,
+              axisLineColor:'#F2F2F5'
+            },
+            yAxis: {
+              splitNumber:4,
+              showTitle:false,
+              gridColor:'#F2F2F5',
+              data:[
+                {
+                  min:0,
+                  max:this.getNumber(data.max),
+                  titleOffsetY:-5,
+                  titleOffsetX:-5,
+                  fontSize:12,
+                  axisLineColor:'#F2F2F5'
                }
+              ]
+            },
+            extra: {
+              area: {
+                type: "curve",
+                opacity: 0.8,
+                addLine: true,
+                width: 2,
+                gradient: true,
+                activeType: "hollow"
+              }
+            }
+          }
+          // if (value && value.series && value.series.length>0){
+          //   this.drawCharts('trends', res)
+          // }
        },
        getNumber(value){
            let number = value / 40
@ -149,7 +210,8 @@ export default {

 <style scoped lang="scss">
 .revenueTrends{
-    width: 100%;
+  width: 100vw;
+  height: 210px;
    .trends{
        width: calc(100vw - 32px);
        height: 208px;
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/changelog.md
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/changelog.md
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-error/qiun-error.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-error/qiun-error.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading1.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading1.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading2.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading2.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading3.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading3.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading4.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading4.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading5.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading5.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/qiun-loading.vue
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/qiun-loading.vue
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-echarts.js
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-echarts.js
@ -51,6 +51,31 @@ const cfe = {
      }
      return result;
    },
+	monthTotal:function (item, category, index, opts){
+		let text = ''
+		let type = item.name.slice(5,10)
+		let time = opts.series[0].info[index].year
+		if (type === '车流量'){
+			if (`${time}年车流量` === item.name){
+				let showTime = opts.series[0].info[index].year.toString().slice(2,5)
+				text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?this.$util.fmoney(opts.series[0].info[index].allCarCount):''} 辆`
+			}else{
+				let showTime = opts.series[1].info[index].year.toString().slice(2,5)
+				text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?this.$util.fmoney(opts.series[1].info[index].allCarCount):''} 辆`
+			}
+			return text
+		}else{
+			if (`${time}年交易额` === item.name){
+				let showTime = opts.series[2].year.toString().slice(2,5)
+				console.log('showTime',showTime)
+				text = `${showTime}年金额 ${opts.series[2].info[index].money?this.$util.fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
+			}else{
+				let showTime = opts.series[3].year.toString().slice(2,5)
+				text = `${showTime}年金额 ${opts.series[3].info[index].money?this.$util.fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
+			}
+			return text
+		}
+	},
    legendFormat:function(name){
      return "自定义图例+"+name;
    },
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
@ -19,6 +19,47 @@
 // 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
 const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];

+const fmoney = (s, n) => {
+	/*
+	 * 参数说明：
+	 * s：要格式化的数字
+	 * n：保留几位小数
+	 * */
+	n = n > 0 && n <= 20 ? n : 2;
+	var fuhao = ''; //如果数字小于零则值为-
+	if (s < 0) {
+		s = Math.abs(s);
+		fuhao = '-'
+	}
+	s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
+	var l = s.split(".")[0].split("").reverse(),
+		r = s.split(".")[1];
+	let t = "";
+	for (let i = 0; i < l.length; i++) {
+		t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
+	}
+	if (n===0){
+		return s
+	}else{
+		return fuhao + [...t].reverse().join("") + "." + r;
+	}
+}
+
+const noDecimal = (s) =>{
+	let fuhao = ''; //如果数字小于零则值为-
+	if (s < 0) {
+		s = Math.abs(s);
+		fuhao = '-'
+	}
+	s = parseFloat((s + "").replace(/[^\d\.-]/g, "")) + ""
+	let  l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
+	let t = ''
+	for (let i = 0; i < l.length; i++) {
+		t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
+	}
+	return fuhao + [...t].reverse().join("")
+}
+
 //事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
 const formatDateTime = (timeStamp, returnType)=>{
  var date = new Date();
@ -71,6 +112,135 @@ const cfu = {
        return series[index].name+'：'+series[index].data+'元'
      }
    },
+	  monthTotal:function (item, category, index, opts){
+		  let text = ''
+		  let type = item.name.slice(5,10)
+		  let time = opts.series[0].info[index].year
+		  if (type === '车流量'){
+			  if (`${time}年车流量` === item.name){
+				  let showTime = opts.series[0].info[index].year.toString().slice(2,5)
+				  text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?fmoney(opts.series[0].info[index].allCarCount):''} 辆`
+			  }else{
+				  let showTime = opts.series[1].info[index].year.toString().slice(2,5)
+				  text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?fmoney(opts.series[1].info[index].allCarCount):''} 辆`
+			  }
+			  return text
+		  }else{
+			  if (`${time}年交易额` === item.name){
+				  let showTime = opts.series[2].year.toString().slice(2,5)
+				  console.log('showTime',showTime)
+				  text = `${showTime}年金额 ${opts.series[2].info[index].money?fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
+			  }else{
+				  let showTime = opts.series[3].year.toString().slice(2,5)
+				  text = `${showTime}年金额 ${opts.series[3].info[index].money?fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
+			  }
+			  return text
+		  }
+	  },
+	  homePlace:function (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 + '辆';
+	  },
+	  carTypeTime:function (item, category, index, opts){
+		  if (this.num===0){
+			  this.num++
+			  return '日均车辆' + ":" + opts.series[0].valueList[index] + '辆,占比' + item.data + '%';
+		  }else{
+			  this.num=0
+			  return '平均停留' + ":" + item.data + '分钟';
+		  }
+	  },
+	  timeAnalysis:function (item, category, index, opts){
+		  return item.name + ":" + item.data + '分钟'
+	  },
+	  businessType:function (item, category, index, opts){
+		  return item.name;
+	  },
+	  moneyCompare:function (item, category, index, opts){
+		  const date = new Date()
+		  let m = date.getMonth()
+		  if (index >m){
+			  if (this.selectIndex===0){
+				  if (item.name === '工作日平均'){
+					  return item.name + "：" + item.data + '万元'
+				  }else if(item.name === '周末平均'){
+					  return item.name + "：" + item.data + '万元'
+				  }else {
+					  return item.name + "：" + item.data + '万元'
+				  }
+			  }else if(this.selectIndex === 1){
+				  if (item.name === '工作日平均'){
+					  return item.name + "：" + noDecimal(item.data) + '笔'
+				  }else if(item.name === '周末平均'){
+					  return item.name + "：" + noDecimal(item.data) + '笔'
+				  }else {
+					  return item.name + "：" +noDecimal(item.data) + '笔'
+				  }
+			  }else if(this.selectIndex === 2){
+				  if (item.name === '工作日平均'){
+					  return item.name + "：" + item.data + '元'
+				  }else if(item.name === '周末平均'){
+					  return item.name + "：" + item.data + '元'
+				  }else {
+					  return item.name + "：" + item.data + '元'
+				  }
+			  }
+
+		  }else{
+			  if (this.selectIndex===0){
+				  if (item.name === '工作日平均'){
+					  return item.name + "：" + item.data + '万元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
+				  }else if(item.name === '周末平均'){
+					  return item.name + "：" + item.data + '万元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
+				  }else {
+					  // 判断有节假日就显示括号 没有就不显示
+					  if (opts.series[2].holiday[index][1]){
+						  return item.name + "：" + item.data + '万元' + '(' +  opts.series[2].holiday[index][1] + ')'
+					  }else{
+						  return item.name + "：" + item.data + '万元'
+					  }
+				  }
+			  }else if (this.selectIndex === 1){
+				  if (item.name === '工作日平均'){
+					  return item.name + "：" + noDecimal(item.data) + '笔，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
+				  }else if(item.name === '周末平均'){
+					  return item.name + "：" + noDecimal(item.data) + '笔，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
+				  }else {
+					  if (opts.series[2].holiday[index][1]){
+						  return item.name + "：" + noDecimal(item.data) + '笔' + '(' +  opts.series[2].holiday[index][1] + ')'
+					  }else{
+						  return item.name + "：" + noDecimal(item.data) + '笔'
+					  }
+				  }
+			  }else if(this.selectIndex === 2){
+				  if (item.name === '工作日平均'){
+					  return item.name + "：" + item.data + '元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
+				  }else if(item.name === '周末平均'){
+					  return item.name + "：" + item.data + '元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
+				  }else {
+					  if (opts.series[2].holiday[index][1]){
+						  return item.name + "：" + item.data + '元' + '(' +  opts.series[2].holiday[index][1] + ')'
+					  }else{
+						  return item.name + "：" + item.data + '元'
+					  }
+				  }
+			  }
+		  }
+	  }
  },
  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
  "demotype":{
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/readme.md
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/readme.md
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/u-charts.js
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/u-charts.js
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/license.md
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/license.md
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/package.json
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/package.json
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/readme.md
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/readme.md
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/static/app-plus/echarts.min.js
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/static/app-plus/echarts.min.js
--- a/pages/summaryOfPortraits/components/components/qiun-data-charts/static/h5/echarts.min.js
+++ b/pages/summaryOfPortraits/components/components/qiun-data-charts/static/h5/echarts.min.js
--- a/pages/summaryOfPortraits/components/guestPortrait.vue
+++ b/pages/summaryOfPortraits/components/guestPortrait.vue
@ -56,13 +56,13 @@
              </div>
              <no-data v-else />
          </div>
-          <div class="chartsItem" style="margin-top: 32px">
-              <p class="title">业态客单偏好</p>
-              <div v-if="businessTypeList && businessTypeList.length>0">
+          <div class="chartsItem" style="margin-top: 32px;height: 210px">
+              <p class="title" style="margin-bottom: 32px">业态客单偏好</p>
+              <div >
                  <business-type :data="businessTypeList"></business-type>
                  <analyse :analyseInfo="{analysisins_type: 1206,analysisins_format: 2000}" />
              </div>
-              <no-data v-else />
+<!--              <no-data v-else />-->
          </div>
      </div>
  </scroll-view>
--- a/pages/summaryOfPortraits/components/managePortrait.vue
+++ b/pages/summaryOfPortraits/components/managePortrait.vue
@ -138,24 +138,24 @@
                        </div>
                    </div>
                </div>
-                <div class="subItem">
-                    <div style="display: flex;align-items: center;justify-content: space-between">
-                        <p class="title" style="margin-top: 20px">{{selectTab===0?'营收特征分析':selectTab===1?'客单对比':selectTab===2?'均价对比':''}}</p>
+                <div class="subItem" style="height: 270px;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>
                        <text v-if="selectTab===1" style="margin-top: 12px">单位: 笔</text>
                        <text v-if="selectTab===2" style="margin-top: 12px">单位: 元</text>
                    </div>
-                    <div v-if="moneyCompareList.series && moneyCompareList.series.length>0">
+                    <div>
                        <money-compare :data="moneyCompareList"/>
                    </div>
-                    <no-data v-else/>
+<!--                    <no-data v-else/>-->
                </div>
-                <div class="subItem ">
-                    <div style="display: flex;align-items: center;justify-content: space-between">
-                        <p class="title" style="margin-top: 20px">营收同比分析</p>
+                <div class="subItem" style="height: 270px;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>
                    </div>
-                    <div v-if="trendsList && trendsList.series && trendsList.series.length>0">
+                    <div>
                        <revenue-trends :data="trendsList"/>
                    </div>
                    <no-data v-else/>
--- a/pages/summaryOfPortraits/index.vue
+++ b/pages/summaryOfPortraits/index.vue
@ -33,13 +33,13 @@
      <sliderPage  :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
    </view>

-    <swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait">
+    <swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait" >
      <!-- 服务区基本信息 0-->
      <swiper-item class="swiperItem">
        <mapDetail :selectIndex="selectPortrait"/>
      </swiper-item>
      <!-- 车流预警 1-->
-      <swiper-item class="swiperItem">
+      <swiper-item class="swiperItem" >
        <carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo"/>
      </swiper-item>
      <!-- 客群画像 2-->
@ -110,7 +110,6 @@ export default {
    this.isShowSwiper = false
  },
  methods:{
-
    // 商业汇总的滑动方法
    handleChangeSelect(e){
      console.log('e',e)
@ -234,6 +233,7 @@ export default {
    height: 100%;
    .swiperItem{
      width: 100%;
+      height: 100vh;
    }
  }
 }
--- a/static/images/index/spsp-no.png
+++ b/static/images/index/spsp-no.png
--- a/static/images/index/tsjy.png
+++ b/static/images/index/tsjy.png