图表X轴及tooltip调整

src/pages/index/index.vue

@@ -36,18 +36,40 @@
                                  :values="state.items"
                                  @clickItem="handleClickPeriod"
                                  styleType="text" activeColor="#4cd964"></uni-segmented-control>
-          <view>
+          <view v-for="canvas in state.canvasList" :key="canvas.id">
+            <view class="title">{{ canvas.label }}</view>
+            <canvas
+                :id="canvas.id"
+                :canvas-id="canvas.id"
+                class="charts1"
+                disable-scroll
+                @touchstart="handleTouchStart($event,canvas.id)"
+                @touchmove="handleTouchMove($event,canvas.id)"
+                @touchend="handleTouchEnd($event,canvas.id)"
+                :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
+          </view>
+<!--          <view>
             <view class="title">总金额&服务费</view>
-            <canvas id="charge-ele-total" canvas-id="charge-ele-total" class="charts1" @touchend="tap" :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
+            <canvas id="charge-ele-total" canvas-id="charge-ele-total" class="charts1"
+                    disable-scroll
+                    @touchstart="handleTouchStart($event,'charge-ele-total')"
+                    @touchmove="handleTouchMove($event,'charge-ele-total')"
+                    @touchend="handleTouchEnd($event,'charge-ele-total')"
+                    :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
           </view>
           <view>
             <view class="title">电量&电费</view>
-            <canvas id="elec-power" canvas-id="elec-power" class="charts1" @touchend="tap" :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
+            <canvas id="elec-power" canvas-id="elec-power" class="charts1"
+                    disable-scroll
+                    @touchstart="handleTouchStart($event,'elec-power')"
+                    @touchmove="handleTouchMove($event,'elec-power')"
+                    @touchend="handleTouchEnd($event,'elec-power')"
+                    :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
           </view>
           <view>
             <view class="title">充电客户&订单</view>
             <canvas id="charge-user-order" canvas-id="charge-user-order" class="charts1" @touchend="tap" :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
-          </view>
+          </view>-->
         </uni-card>
       </block>
 
@@ -63,7 +85,6 @@ import {onLoad, onShow} from '@dcloudio/uni-app'
 import uCharts from "../../assets/u-charts.min";
 import {cfg, get, fmtMoney, fmtDate, msg} from "../../assets/utils";
 
-const uChartsInstance = {};
 
 const state = reactive({
   login: false,
@@ -71,12 +92,12 @@ const state = reactive({
   cWidth: 750,
   cHeight: 500,
   statList: [
-    {label: '今日充电量', value: '100'},
-    {label: '今日订单总金额', value: '100'},
-    {label: '今日总电费', value: '100'},
-    {label: '今日实付总服务费', value: '100'},
-    {label: '今日充电人数', value: '100'},
-    {label: '今日充电订单数', value: '100'},
+    {label: '充电量', value: '100'},
+    {label: '订单总金额', value: '100'},
+    {label: '总电费', value: '100'},
+    {label: '实付总服务费', value: '100'},
+    {label: '充电人数', value: '100'},
+    {label: '充电订单数', value: '100'},
   ],
   user: null,
   stationList: [],
@@ -84,7 +105,12 @@ const state = reactive({
   items: ['7天', '30天', '90天'],
   current: 0,
   chartData: null,
-  uChartsInstance:{}
+  uChartsInstance:{},
+  canvasList:[
+    {label:'总金额&服务费',id:'charge-ele-total'},
+    {label:'电量&电费',id:'elec-power'},
+    {label:'充电客户&订单',id:'charge-user-order'}
+  ]
 })
 
 
@@ -107,7 +133,7 @@ watch(() => state.current, (newVal, oldVal) => {
 
 onLoad(() => {
   //这里的 750 对应 css .charts 的 width
-  state.cWidth = uni.upx2px(750);
+  state.cWidth = uni.upx2px(750-30-70);
   //这里的 500 对应 css .charts 的 height
   state.cHeight = uni.upx2px(500);
   checkLogin();
@@ -206,7 +232,7 @@ const drawServiceAndTotalMoneyChart = (stationId) => {
   if(!dataList || dataList.length==0){
     return;
   }
-  let categories = dataList.map(k=>k.statDay);
+  let categories = dataList.map(k=>k.statDay.split('-').slice(1).join('-'));
   let series =[
     {
       name:'总金额',
@@ -221,15 +247,25 @@ const drawServiceAndTotalMoneyChart = (stationId) => {
     type: "area",
     color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
     padding: [15,15,0,15],
+    background:'#FFFFFF',
     enableScroll: true,
+    canvas2d:true,
     width: state.cWidth,
     height: state.cHeight,
     categories: categories,
     series: series,
     xAxis: {
+      disabled:false,
       disableGrid: true,
       itemCount:4,
-      scrollShow:true
+      labelCount:5,
+      // scrollShow:true,
+      // scrollAlign:'left',//滚动条初始位置
+      // scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
+      // scrollColor:'#DEE7F7',//默认为 #A6A6A6
+      // formatter:function (value,index,opts){
+      //   return value.split('-').slice(1).join('-');
+      // }
     },
     yAxis: {
       gridType: "dash",
@@ -243,6 +279,9 @@ const drawServiceAndTotalMoneyChart = (stationId) => {
         width: 2,
         gradient: true,
         activeType: "hollow"
+      },
+      tooltip:{
+        showCategory:true
       }
     }
   }
@@ -269,7 +308,7 @@ const drawElectricAndPowerChart = (stationId) => {
   if(!dataList || dataList.length==0){
     return;
   }
-  let categories = dataList.map(k=>k.statDay);
+  let categories = dataList.map(k=>k.statDay.split('-').slice(1).join('-'));
   let series =[
     {
       name:'电量',
@@ -291,14 +330,18 @@ const drawElectricAndPowerChart = (stationId) => {
     padding: [15,15,0,15],
     enableScroll: true,
     animation: true,
+    canvas2d:true,
     width: state.cWidth,
     height: state.cHeight,
     categories: categories,
     series: series,
+    background:'#FFFFFF',
     xAxis: {
       disableGrid: true,
       itemCount:4,
-      scrollShow:true
+      // formatter:function (value,index,opts){
+      //   return value.split('-').slice(1).join('-');
+      // }
     },
     yAxis: {
       disabled: false,
@@ -312,15 +355,8 @@ const drawElectricAndPowerChart = (stationId) => {
       data: [
         {
           position: "left",
-          title: "折线"
+          title: ""
         },
-        {
-          position: "right",
-          min: 0,
-          max: 200,
-          title: "柱状图",
-          textAlign: "left"
-        }
       ]
     },
     extra: {
@@ -328,6 +364,9 @@ const drawElectricAndPowerChart = (stationId) => {
         column: {
           width: 20
         }
+      },
+      tooltip:{
+        showCategory:true
       }
     }
   }
@@ -352,7 +391,7 @@ const drawChargeUserChart = (stationId) => {
   if(!dataList || dataList.length==0){
     return;
   }
-  let categories = dataList.map(k=>k.statDay);
+  let categories = dataList.map(k=>k.statDay.split('-').slice(1).join('-'));
   let series =[
     {
       name:'人次',
@@ -367,20 +406,22 @@ const drawChargeUserChart = (stationId) => {
     type: "column",
     color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
     padding: [15,15,0,15],
+    background:'#FFFFFF',
     enableScroll: true,
     animation: true,
+    canvas2d:true,
     width: state.cWidth,
     height: state.cHeight,
     categories: categories,
     series: series,
     xAxis: {
       itemCount:4,
-      scrollShow:true,
+      // scrollShow:true,
       boundaryGap: "justify",
-      disableGrid: false,
+      disableGrid: true,
       min: 0,
       axisLine: false,
-      max: 40
+      max: 40,
     },
     yAxis: {
       data: [
@@ -403,6 +444,9 @@ const drawChargeUserChart = (stationId) => {
           "#1890FF",
           "#91CB74"
         ]
+      },
+      tooltip:{
+        showCategory:true
       }
     }
   }
@@ -418,15 +462,44 @@ const drawChargeUserChart = (stationId) => {
   }
 }
 
+const handleTouchStart = (e,canvasId) => {
+  // console.log(e,canvasId)
+  let charts = state.uChartsInstance[canvasId];
+  if(charts){
+    charts.scrollStart(e);
+  }
+}
+
+const handleTouchMove = (e,canvasId) => {
+  // console.error(e,canvasId)
+  let charts = state.uChartsInstance[canvasId];
+  if(charts){
+    charts.scroll(e);
+  }
+}
+
+const handleTouchEnd = (e,canvasId) => {
+  // console.warn(e,canvasId)
+  let charts = state.uChartsInstance[canvasId];
+  if(charts){
+    charts.scrollEnd(e);
+    charts.showToolTip(e,{
+      format:function (item, category) {
+        console.log(item,category)
+        return category + ' ' + item.name + ':' + item.data
+      }
+    })
+  }
+}
 
 
 const handleStationCheck = (e) => {
-  console.log(e)
+  // console.log(e)
   state.index = e.detail.value;
 }
 
 const handleClickPeriod = (e) => {
-  console.log(e)
+  // console.log(e)
   state.current = e.currentIndex;
 }
 
@@ -490,7 +563,7 @@ const drawCharts = (canvasId, data) => {
 
 .header {
   width: 100%;
-  padding: 10px;
+  padding: 15rpx;
   display: inline-flex;
 justify-content: space-between;
 
@@ -519,8 +592,8 @@ justify-content: space-between;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 120px;
-    padding: 10px;
+    width: 115px;
+    padding: 5px;
     //box-shadow: 2px   2px  2px 2px #e6e6e6;
   }
 }