css

vis.html

@@ -36,25 +36,25 @@
     <div class="data-left">
         <div class="box1 boxsiz mb">
             <p class="tit row rowCenter verCenter">日均访问量PV (2016-2021)</p>
-            <div class="bar boxsiz" id="daily_pv" style="width:100%;height: 4rem;"></div>
+            <div class="bar boxsiz" id="daily_pv" style="width: 480px; height: 255px;"></div>
         </div>
         <div class="box2 boxsiz mb">
             <p class="tit row rowCenter verCenter">日均活跃用户 (2016-2021)</p>
-            <div class="bar boxsiz" id="daily_active_users" style="width:100%;height: 4rem;"></div>
+            <div class="bar boxsiz" id="daily_active_users" style="width: 480px;height:255px;"></div>
         </div>
         <div class="box3 boxsiz">
             <p class="tit row rowCenter verCenter">客户分布应用领域</p>
-            <div class="bar boxsiz" id="customer_application" style="width:90%;height: 7.5rem;"></div>
+            <div class="boxsiz" id="customer_application" style="height: 314px;"></div>
         </div>
     </div>
     <div class="data-right">
         <div class="box1 boxsiz mb">
             <p class="tit row rowCenter verCenter">日均下单用户 (2016-2021)</p>
-            <div class="bar boxsiz" id="daily_order_users" style="width:100%;height: 4rem;"></div>
+            <div class="bar boxsiz" id="daily_order_users" style="width: 480px;height: 255px;"></div>
         </div>
         <div class="box2 boxsiz">
             <p class="tit row rowCenter verCenter">日均订单数 (2016-2021)</p>
-            <div class="bar boxsiz" id="daily_order" style="width:100%;height: 4rem;"></div>
+            <div class="bar boxsiz" id="daily_order" style="width: 480px;height: 255px;"></div>
         </div>
         <div class="box3 boxsiz">
             <p class="t1">运营中公众号：</p>
@@ -140,7 +140,7 @@
 <script type="text/javascript">
   var charts = {
     date: "",
-    api: window.location.host == "btv.ichunt.com" ? "https://api.ichunt.com" : "http://api.liexin.com",
+    api: window.location.host == "btv.ichunt.com" ? "https://api.ichunt.com" : "https://api.ichunt.com",
     init: function () {
       charts.date();
       charts.getData();
@@ -154,39 +154,56 @@
       if (type == 1) {
         let myChart = echarts.init(document.getElementById('daily_pv'));
         let option = {
-          xAxis: {
-            type: 'category',
-            data: xAxis,
-            axisLine:{
-              lineStyle:{
-                color:'#25a9ab'
-              }
-            }
-          },
-          yAxis: {
-            show: false,
-            type: 'value'
-          },
-          series: [{
-            data: series,
-            type: 'bar',
-            itemStyle: {
-              normal: {
-                color: '#25a9ab'
+            xAxis: {
+              type: 'category',
+              data: xAxis,
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: "#25a9ab",
+                  fontSize: 12
+                }
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#25a9ab'
+                }
               }
             },
-          }]
-        };
+            yAxis: {
+              show: false,
+              type: 'value'
+            },
+            series: [{
+              data: series,
+              type: 'bar',
+              barWidth: 25,
+              itemStyle: {
+                normal: {
+                  color: '#25a9ab'
+                }
+              },
+            }]
+          }
+        ;
         myChart.setOption(option);
-      } else if (type == 2) {
+      } else if (type == 2
+      ) {
         let myChart = echarts.init(document.getElementById('daily_active_users'));
         let option = {
           xAxis: {
             type: 'category',
             data: xAxis,
-            axisLine:{
-              lineStyle:{
-                color:'#de6e6a'
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: "#de6e6a",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#de6e6a'
               }
             }
           },
@@ -197,6 +214,7 @@
           series: [{
             data: series,
             type: 'bar',
+            barWidth: 25,
             itemStyle: {
               normal: {
                 color: '#de6e6a'
@@ -211,9 +229,16 @@
           xAxis: {
             type: 'category',
             data: xAxis,
-            axisLine:{
-              lineStyle:{
-                color:'#5da6f1'
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: "#5da6f1",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#5da6f1'
               }
             }
           },
@@ -224,6 +249,7 @@
           series: [{
             data: series,
             type: 'bar',
+            barWidth: 25,
             itemStyle: {
               normal: {
                 color: '#5da6f1'
@@ -238,9 +264,16 @@
           xAxis: {
             type: 'category',
             data: xAxis,
-            axisLine:{
-              lineStyle:{
-                color:'#d7a545'
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: "#d7a545",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#d7a545'
               }
             }
           },
@@ -251,6 +284,7 @@
           series: [{
             data: series,
             type: 'bar',
+            barWidth: 25,
             itemStyle: {
               normal: {
                 color: '#d7a545'
@@ -266,10 +300,9 @@
             trigger: 'item'
           },
           legend: {
-            bottom: '40',
+            bottom: 'left',
             textStyle: {
-              color: "#96bcf6",
-              fontSize:20
+              color: "#96bcf6"
             }
           },
           series: [
@@ -389,7 +422,8 @@
 
         }
       });
-    },
+    }
+    ,
     date: function () {
       var day1 = new Date();
       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
@@ -432,7 +466,8 @@
         }
         $("#time").html(h + ":" + m + ":" + s);
       }, 1000)
-    },
+    }
+    ,
   }
   charts.init()
 </script>