优化滚动条样式

app/view/datacollect/index.ejs

@@ -646,32 +646,42 @@
         },
         dataZoom: [
             {
+                type: 'slider',
                 show: true,
                 realtime: true,
-                dataZoomIndex: 10,
+                showdetail: false,
+                showDataShadow: false,
+                // dataZoomIndex: 10,
                 start: 0,
-                end: 5,
+                end: 8,
                 handleSize: 0,
-                // startValue: 1,
-                // 结束位置的数值
-                // endValue: 10
+                height: 10,
+                bottom: '10%'
             },
-            {
-                type: 'inside',
-                // realtime: true,
-                start: 1,
-                end: 10
-            }
+            // {
+            //     // realtime: true,
+            //     type: 'slider',
+            //     show: true,
+            //     realtime: true,
+            //     showdetail: false,
+            //     showDataShadow: false,
+            //     // dataZoomIndex: 10,
+            //     start: 0,
+            //     end: 8,
+            //     handleSize: 0,
+            //     bottom:30,
+            //     height:10,
+            // }
         ],
         legend: {
             data: ['台帐', '合同计量', '变更计量'],
             top:'17%'
         },
         grid: {
-            top:'35%',
+            top:'25%',
             left: '3%',
             right: '4%',
-            bottom: '3%',
+            bottom: '15%',
             containLabel: true
         },
         xAxis: [
@@ -787,8 +797,8 @@
             }
         },
         grid: {
-            left: '3%',
-            right: '4%',
+            left: '10%',
+            right: '10%',
             bottom: '3%',
             containLabel: true
         },
@@ -821,16 +831,13 @@
                 show: true,
                 handleSize: 0,
                 realtime: true,
-                filterMode: 'filter',
+                // filterMode: 'empty',
                 yAxisIndex: [0,1],
+                width: 10,
+                height: '80%',
+                right: '5%',
+                bottom:'2%'
             },
-            {
-                type: 'inside',
-                realtime: true,
-                start: 0,
-                end: 10,
-                yAxisIndex: [0,1],
-            }
         ],
         series: [
             {
@@ -878,7 +885,7 @@
             top:'25%',
             left: '3%',
             right: '4%',
-            bottom: '0',
+            bottom: '15%',
             containLabel: true
         },
         xAxis: [
@@ -920,16 +927,9 @@
                 start: 0,
                 end: 5,
                 handleSize: 0,
-                // startValue: 1,
-                // 结束位置的数值
-                // endValue: 10
+                height: 10,
+                bottom: '10%'
             },
-            {
-                type: 'inside',
-                // realtime: true,
-                start: 1,
-                end: 10
-            }
         ],
         series: [
             {
@@ -1357,7 +1357,7 @@
             // 图表数据赋值
             const option2 = myChart2_1.getOption();
             option2.dataZoom[0].end = computedPosition(tenderList.length);
-            option2.dataZoom[1].end = computedPosition(tenderList.length);
+            // option2.dataZoom[1].end = computedPosition(tenderList.length);
             option2.xAxis[0].data = chart_option_name;
             option2.series[0].data = chart_option2_data.total_price;
             option2.series[1].data = chart_option2_data.contract_tp;
@@ -1369,7 +1369,6 @@
 
             const option3 = myChart3_1.getOption();
             option3.dataZoom[0].end = computedPosition(tenderList.length);
-            option3.dataZoom[1].end = computedPosition(tenderList.length);
             option3.yAxis[0].data = chart_option_name;
             option3.series[0].data = chart_option3_data;
             myChart3_1.setOption(option3);
@@ -1399,7 +1398,6 @@
             }
             const option4 = myChart4_1.getOption();
             option4.dataZoom[0].end = computedPosition(option4_data.yearmonth.length);
-            option4.dataZoom[1].end = computedPosition(option4_data.yearmonth.length);
             option4.xAxis[0].data = option4_data.yearmonth;
             option4.series[0].data = option4_data.tp;
             option4.series[1].data = option4_data.end_tp;
@@ -1579,8 +1577,8 @@
     }
     // 计算显示滚动条长度
     function computedPosition(xArrayLength) {
-        if (xArrayLength >= 10) {
-            return Math.floor(10 / xArrayLength * 100) > 100 ? 100 : Math.floor(10 / xArrayLength * 100);
+        if (xArrayLength >= 8) {
+            return Math.floor(8 / xArrayLength * 100) > 100 ? 100 : Math.floor(8 / xArrayLength * 100);
             // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
         } else {
             return 100;