diff --git a/src/views/PerformanceData/index.vue b/src/views/PerformanceData/index.vue index 0eddf0f..76de249 100644 --- a/src/views/PerformanceData/index.vue +++ b/src/views/PerformanceData/index.vue @@ -4,15 +4,17 @@

2021年总业绩

¥{{year_count_order_money | capitalize}}

-
+
营业额
¥{{money_count_order_money | capitalize}}
轻未来阻燃粉:{{order_goods_num | capitalize}}/盒
+ +
@@ -25,13 +27,14 @@ opinionData: [0, 0, 0, 0, 15904960, 0, 0, 0, 0], year_count_order_money: '', money_count_order_money: '', - order_goods_num:'', + order_goods_num: '', } }, - + async mounted() { await this.getData() this.drawLine(this.opinionData) + this.barData(this.opinionData) }, filters: { capitalize: function (val) { @@ -93,7 +96,75 @@ data: opinionData }] }) - } + }, + barData(opinionData) { + let barBox = this.$echarts.init(this.$refs.bar); + var option = { + color: ['#2860fc'], + tooltip: { + trigger: 'axis', + axisPointer: { // 坐标轴指示器,坐标轴触发有效 + type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'|'none' + } + }, + // title: { + // text: '业绩', + // top: '15', + // left: '-3', + // textStyle: { + // fontSize: 14, //字体大小 + // color: '#666666', //字体颜色 + // fontWeight: '500' + // }, + // }, + axisLabel: { + color: '#666666', + }, + grid: { + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true, + + }, + xAxis: [{ + type: 'category', + data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], + axisLine: { // 改变x轴颜色 + lineStyle: { + color: '#c1c1c1', + width: '1', + } + }, + axisLabel: { // 改变x轴字体颜色和大小 + textStyle: { + color: "#666666", + fontSize: 12, + }, + }, + }], + yAxis: [{ + type: 'value', + axisTick: 'none', // 右边轴样式的显示 + axisLine: 'none', // 右边轴样式的显示 + // 修改网格的颜色 + splitLine: { + show: true, + lineStyle: { + type: 'solid', + color: '#f5f5f5' + } + }, + }], + series: [{ + name: '', + type: 'bar', + barWidth: '50%', + data: opinionData + }] + } + barBox.setOption(option, true); + }, }, } @@ -203,6 +274,14 @@ width: 610px; height: 490px; margin: 0 auto; + margin-bottom: 60px; + } + + .bar { + width: 610px; + height: 490px; + margin: 0 auto; + // margin-bottom: 60px; } } } diff --git a/src/views/cityDistribution/index.vue b/src/views/cityDistribution/index.vue index cb3f84d..85ef228 100644 --- a/src/views/cityDistribution/index.vue +++ b/src/views/cityDistribution/index.vue @@ -15,41 +15,13 @@

代理城市排名

-
-
+
+
-

1

-

{{item.cityName}}

+

{{index+1}}

+

{{item.name}}

-

{{item.counts | capitalize}}

-
-
-
-

2

-

{{item.cityName}}

-
-

{{item.counts | capitalize}}

-
-
-
-

3

-

{{item.cityName}}

-
-

{{item.counts | capitalize}}

-
-
-
-

4

-

{{item.cityName}}

-
-

{{item.counts |capitalize}}

-
-
-
-

5

-

{{item.cityName}}

-
-

{{item.counts | capitalize}}

+

{{item.num.counts | capitalize}}

@@ -73,7 +45,7 @@ rankArea: [], selectArea: [], regions: [], - chartBar:null, + chartBar: null, } }, filters: { @@ -83,6 +55,7 @@ }, async mounted() { await this.getData() + // return this.drawarea(); this.statistical(this.cityInfo) }, @@ -91,53 +64,50 @@ const res = await data.dataDistribution(); this.poxy_sum = res.data.poxy_sum this.city = res.data.city - this.city[this.cityName] - console.log(this.city[this.cityName], '---this.city[this.cityName]'); + console.log(this.city, '---this.city[this.cityName]'); this.cityInfo.push({ - value: this.city[this.cityName].level_id_1, + value: this.city[0].num.level_id_1, name: 'vip' }, { - value: this.city[this.cityName].level_id_2, + value: this.city[0].num.level_id_2, name: '总代' }, { - value: this.city[this.cityName].level_id_3, + value: this.city[0].num.level_id_3, name: '合伙人' }, { - value: this.city[this.cityName].level_id_4, + value: this.city[0].num.level_id_4, name: '分公司' }, { - value: this.city[this.cityName].level_id_5, + value: this.city[0].num.level_id_5, name: '股东' }) - let top5 = res.data.top5 - for (let i in top5) { - top5[i].cityName = i - this.rankArea.push(top5[i]) - } - }, drawarea() { const _this = this this.$nextTick(() => { _this.myChinaMap = echarts.init(this.$refs.area) _this.myChinaMap.on('click', function (param) { - _this.cityInfo = [] _this.cityName = param.name - _this.cityInfo.push({ - value: _this.city[_this.cityName].level_id_1, - name: 'vip' - }, { - value: _this.city[_this.cityName].level_id_2, - name: '总代' - }, { - value: _this.city[_this.cityName].level_id_3, - name: '合伙人' - }, { - value: _this.city[_this.cityName].level_id_4, - name: '分公司' - }, { - value: _this.city[_this.cityName].level_id_5, - name: '股东' + _this.cityInfo = [] + _this.city.forEach((item, index) => { + if (item.name == param.name) { + _this.cityInfo.push({ + value: item.num.level_id_1, + name: 'vip' + }, { + value: item.num.level_id_2, + name: '总代' + }, { + value: item.num.level_id_3, + name: '合伙人' + }, { + value: item.num.level_id_4, + name: '分公司' + }, { + value: item.num.level_id_5, + name: '股东' + }) + } }) _this.statistical(_this.cityInfo) }) @@ -205,7 +175,7 @@ if (this.chartBar != null && this.chartBar != "" && this.chartBar != undefined) { this.chartBar.dispose(); } - this.chartBar= echarts.init((this.$refs.chartBar)); + this.chartBar = echarts.init((this.$refs.chartBar)); var option = { title: { text: this.cityName + '数占据比', @@ -316,7 +286,6 @@ width: 690px; min-height: 509px; background: #373A4A; - margin-bottom: 40px; .title { font-size: 40px;