From 2f195bdbc434836aee863ee336c131202dff5cc1 Mon Sep 17 00:00:00 2001 From: zhaoguoqiang <849348323@qq.com> Date: Fri, 30 Jul 2021 18:04:08 +0800 Subject: [PATCH] 1 --- src/views/Home/home.vue | 44 ++++++++++++++++------------ src/views/cityDistribution/index.vue | 28 ++++++++++-------- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/views/Home/home.vue b/src/views/Home/home.vue index 7c88a7f..c83b3f8 100644 --- a/src/views/Home/home.vue +++ b/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; + } } } \ No newline at end of file diff --git a/src/views/cityDistribution/index.vue b/src/views/cityDistribution/index.vue index c40782e..cb3f84d 100644 --- a/src/views/cityDistribution/index.vue +++ b/src/views/cityDistribution/index.vue @@ -33,7 +33,7 @@

3

-

{{item.cityName}}

+

{{item.cityName}}

{{item.counts | capitalize}}

@@ -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;