修改储值视图滚动精度

src/containers/Dashboard/CustomerData/CustomerData.vue

@@ -50,6 +50,7 @@
 import CustomerRecharge from '../CustomerRecharge/CustomerRecharge';
 import CustomerConsumption from '../CustomerConsumption/CustomerConsumption';
 import { mapGetters, mapActions } from 'vuex';
+import { getFilters } from '@/utils/index';
 
 export default {
   name: 'CustomerMoneyData',
@@ -66,7 +67,8 @@ export default {
       'updateFilters',
     ]),
     ...mapActions('Dashboard/customerRecharge', ['getRechargeOrderList']),
-    fetchAllData(entity) {
+    fetchAllData() {
+      let entity = getFilters(this.filters);
       this.getConsumeOrderList(entity);
       this.getRechargeOrderList(entity);
     },

src/containers/Dashboard/CustomerRecharge/chart.vue

@@ -103,15 +103,24 @@ export default {
   },
   computed: {
     dataList() {
-      return this.data.map((item, index) => ({ ...item, index: index }));
+      return this.data.map((item, index, array) => ({
+        ...item,
+        index: index,
+        scaleValue: array.length - 1 ? index / (array.length - 1) : 0,
+      }));
     },
   },
   methods: {
     initData() {
+      let start =
+        this.dataList.length - 4 >= 0
+          ? (this.dataList.length - 4) / this.dataList.length
+          : 0;
+      let end = 1;
       this.ds = new DataSet({
         state: {
-          start: 0,
-          end: 3,
+          start: start,
+          end: end,
         },
       });
       const dv = this.ds.createView().source(this.dataList);
@@ -127,7 +136,7 @@ export default {
       dv.transform({
         type: 'filter',
         callback: obj => {
-          const currentRadio = obj.index;
+          const currentRadio = obj.scaleValue;
           return (
             currentRadio >= this.ds.state.start &&
             currentRadio <= this.ds.state.end
@@ -143,11 +152,6 @@ export default {
       });
 
       this.chart.source(dv, {
-        index: {
-          type: 'linear',
-          min: 0,
-          max: this.dataList.length - 1,
-        },
         rechargeMoney: {
           alias: '充值金额',
         },
@@ -213,17 +217,19 @@ export default {
       this.sliderDom = document.getElementById('CustomerRechangeSlider');
       this.sliderDom.style = `height:${this.height}px`;
 
+      const spanNum = 4 / this.dataList.length;
+
       this.slider = new Slider({
         container: this.sliderDom, // dom 容器 id 或者 dom 容器对象
         width: 26, // slider 的宽度，默认为 'auto'，即自适应宽度
         height: this.height, // slider 的高度，默认为 '26px'
         padding: [20, 0, 20, 0],
         xAxis: 'rechargeMen', // 背景图的横轴对应字段，同时为数据筛选的字段
-        yAxis: 'index', // 背景图的纵轴对应字段
+        yAxis: 'scaleValue', // 背景图的纵轴对应字段
         start: 0,
-        end: 3,
-        minSpan: 4,
-        maxSpan: 4,
+        end: 3 / this.dataList.length,
+        minSpan: spanNum,
+        maxSpan: spanNum,
         data: this.dataList, // slider 的数据源
         textStyle: {
           display: 'none',
@@ -245,9 +251,13 @@ export default {
       this.sliderDom.innerHTML = '';
 
       const arrLength = this.dataList.length;
-      let start = this.dataList.length - 4 >= 0 ? this.dataList.length - 4 : 0;
-      let end = this.dataList.length - 1 >= 1 ? this.dataList.length - 1 : 1;
+      let start =
+        this.dataList.length - 4 >= 0
+          ? (this.dataList.length - 4) / this.dataList.length
+          : 0;
+      let end = 1;
       // console.log('2222', this.dataList.length - 1, start, end);
+      const spanNum = 4 / this.dataList.length;
 
       if (arrLength) {
         this.slider = new Slider({
@@ -256,21 +266,20 @@ export default {
           height: this.height,
           padding: [20, 0, 20, 0],
           xAxis: 'rechargeMoney',
-          yAxis: 'index',
+          yAxis: 'scaleValue',
           scales: {
-            min: 0,
-            max: arrLength - 1,
-            index: {
-              type: 'linear',
+            scaleValue: {
               formatter: val => {
-                return parseInt(val, 10);
+                let indexValue = val * (this.dataList.length - 1);
+                // console.log(val, indexValue);
+                return parseInt(indexValue, 10);
               },
             },
           },
           start: start,
           end: end,
-          minSpan: 4,
-          maxSpan: 4,
+          minSpan: spanNum,
+          maxSpan: spanNum,
           data: this.dataList,
 
           handleStyle: {
@@ -293,14 +302,15 @@ export default {
         const arrLength = this.data.length;
         let spanNum = 4 / arrLength;
         let start =
-          this.dataList.length - 4 >= 0 ? this.dataList.length - 4 : 0;
-        let end = this.dataList.length - 1 >= 1 ? this.dataList.length - 1 : 1;
+          this.dataList.length - 4 >= 0
+            ? (this.dataList.length - 4) / this.dataList.length
+            : 0;
+        let end = 1;
 
         this.ds.setState('start', start);
         this.ds.setState('end', end);
         this.dv.source(this.dataList);
-        // let height = this.data.length * 50;
-        // this.chart.changeHeight(height);
+
         this.updateSlider();
         this.updateData();
         console.log(this.chart.getYScales());

src/dev-local/develop.js

 import System from '../lib/main';
 
 window.manageShell = { default: System };
+console.log('manageShell');
 
 setTimeout(() => {
   let allAasyncRouterMap = [