修改echarts

songhua-ui/src/views/index/index.vue

@@ -269,7 +269,7 @@ export default {
     //人流量排行
     this.chartRankOneMbsGet()
     //地图
-    this.chartRankOneMbsGet()
+    setTimeout(this.getMapByPerson(),100)
   },
   methods: {
     selectByMonth(val){
@@ -677,7 +677,7 @@ export default {
       let option = {
         grid: {
           left: "2%",
-          right: "2%",
+          right: "12%",
           bottom: "2%",
           top: "2%",
           containLabel: true,
@@ -687,24 +687,8 @@ export default {
           axisPointer: {
             type: "shadow",
           },
-          confine: true,
-          textStyle: {
-            fontSize: 13,
-            color: "rgba(255, 255, 255, 0.8)",
-          },
           formatter: function (params) {
-            return (
-              params[0].name +
-              "<br/>" +
-              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(90deg, #388CFF 0% ,#6CFEFF 100%)'></span>" +
-              params[0].seriesName +
-              " : " +
-              params[0].value
-                .toLocaleString()
-                .toString()
-                .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
-              " 辆/天"
-            );
+            return params[0].axisValueLabel + ": "+params[0].value + '%'
           },
         },
         xAxis: {
@@ -713,33 +697,14 @@ export default {
         },
         yAxis: [
           {
+            show:false,
             type: "category",
-            inverse: true,
-            axisLabel: {
-              show: true,
-              textStyle: {
-                fontSize: 20,
-                color: "rgba(255, 255, 255, 0.8)",
-              },
-              formatter: function (name) {
-                return name + ": ";
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
             data: [
-              "香榭丽",
-              "拉斯维",
-              "格林",
-              "密歇根",
-              "格拉西",
+              "成人票",
+              "儿童票",
+              "船票",
+              "免费票",
+              "亲子票",
             ],
           },
           {
@@ -761,15 +726,16 @@ export default {
                   .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
               },
             },
-            data: [50000, 22000, 10000, 5000, 2000],
+            data: [5, 5, 10, 30, 50],
           },
         ],
         series: [
           {
-            name: "车辆",
+            name: "人流量占比",
             type: "bar",
             zlevel: 1, //通过 zlevel 设置层级
             barWidth: 10,
+            inverse: true,
             itemStyle: {
               normal: {
                 barBorderRadius: 10,
@@ -788,14 +754,15 @@ export default {
                 ]),
               },
             },
-            data: [50000, 22000, 10000, 5000, 2000],
+            // data: [60, 30, 10, 5, 5],
+            data: [5, 5, 10, 30, 50],
           },
           {
             name: "背景",
             type: "bar",
             barWidth: 10,
             barGap: "-100%", //两条柱状图重合
-            data: [50000, 50000, 50000, 50000, 50000],
+            data: [100, 100, 100, 100, 100],
             itemStyle: {
               normal: {
                 color: "rgba(108, 254, 255, 0.3)",