1

src/views/Home/home.vue

@@ -43,26 +43,32 @@
     .tabs {
         font-size: 36px;
         height: 80px;
-        ::v-deep .van-tabs__wrap{
-            height: 90px;
-            padding-bottom: 10px;
-        }
-        ::v-deep .van-tabs__nav--line{
 
-            background: rgba(63, 66, 85, 1);
-        }
-        ::v-deep .van-tab__text--ellipsis{
-            color: #ffff;
-            font-size: 28px;
-            height: 70px;
-            line-height: 70px;
-        }
-        ::v-deep .van-tab--active{
-            background: rgba(114, 158, 255, 0.1);
-        }
-        ::v-deep .van-tabs__line{
-            background-color:rgba(114, 158, 255, 1);
-            width: 33.667vw;
+        ::v-deep {
+            .van-tabs__wrap {
+                height: 90px;
+                padding-bottom: 10px;
+            }
+
+            .van-tabs__nav--line {
+                background: rgba(63, 66, 85, 1);
+            }
+
+            .van-tab__text--ellipsis {
+                color: #ffff;
+                font-size: 28px;
+                height: 70px;
+                line-height: 70px;
+            }
+
+            .van-tab--active {
+                background: rgba(114, 158, 255, 0.1);
+            }
+
+            .van-tabs__line {
+                background-color: rgba(114, 158, 255, 1);
+                width: 33.667vw;
+            }
         }
     }
 </style>

src/views/cityDistribution/index.vue

@@ -33,7 +33,7 @@
                     <div class="item" v-if="item.top == 3">
                         <div class="city">
                             <p class="rankNum">3</p>
-                           <p class="cityName">{{item.cityName}}</p>
+                            <p class="cityName">{{item.cityName}}</p>
                         </div>
                         <p class="number">{{item.counts | capitalize}}</p>
                     </div>
@@ -73,6 +73,7 @@
                 rankArea: [],
                 selectArea: [],
                 regions: [],
+                chartBar:null,
             }
         },
         filters: {
@@ -83,7 +84,7 @@
         async mounted() {
             await this.getData()
             this.drawarea();
-            this.aa(this.cityInfo)
+            this.statistical(this.cityInfo)
         },
         methods: {
             async getData() {
@@ -119,9 +120,7 @@
                 const _this = this
                 this.$nextTick(() => {
                     _this.myChinaMap = echarts.init(this.$refs.area)
-
                     _this.myChinaMap.on('click', function (param) {
-                        console.log(param, '--------------data');
                         _this.cityInfo = []
                         _this.cityName = param.name
                         _this.cityInfo.push({
@@ -140,7 +139,7 @@
                             value: _this.city[_this.cityName].level_id_5,
                             name: '股东'
                         })
-                        _this.aa(_this.cityInfo)
+                        _this.statistical(_this.cityInfo)
                     })
 
                     _this.myChinaMap.setOption({ // 进行相关配置
@@ -158,7 +157,7 @@
                         geo: { // 这个是重点配置区
                             backgroundColor: '#000',
                             map: 'china', // 表示中国地图
-                            roam: false, // 缩小放大
+                            roam: true, // 缩小放大
                             selectedMode: 'single',
                             label: {
                                 normal: {
@@ -202,12 +201,15 @@
                     })
                 })
             },
-            aa(cityInfo) {
-                var chartBar = echarts.init((this.$refs.chartBar));
+            statistical(cityInfo) {
+                if (this.chartBar != null && this.chartBar != "" && this.chartBar != undefined) {
+                    this.chartBar.dispose();
+                }
+                this.chartBar= echarts.init((this.$refs.chartBar));
                 var option = {
                     title: {
-                        text: this.cityName + '数据占比',
-                        subtext: '纯属虚构',
+                        text: this.cityName + '数占据比',
+                        // subtext: '纯属虚构',
                         textStyle: {
                             color: "#fff",
                         },
@@ -237,7 +239,7 @@
                         }
                     }]
                 };
-                chartBar.setOption(option)
+                this.chartBar.setOption(option)
 
             }
         }
@@ -247,7 +249,6 @@
     .cityDistribution {
         min-height: 100vh;
         background: #3C3F50;
-        // background: linear-gradient(0deg, #424558, #202335);
 
         .top {
             height: 258px;
@@ -305,7 +306,7 @@
                 font-family: Microsoft YaHei;
                 font-weight: 400;
                 color: #FFFFFF;
-               margin-bottom: 10px;
+                margin-bottom: 10px;
             }
         }
 
@@ -340,6 +341,7 @@
 
                     .city {
                         display: flex;
+
                         .rankNum {
                             display: inline-block;
                             width: 48px;