1

src/views/Home/home.vue

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

src/views/cityDistribution/index.vue

@@ -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;
@@ -340,6 +341,7 @@
 
                     .city {
                         display: flex;
+
                         .rankNum {
                             display: inline-block;
                             width: 48px;