develop
/
qwl-data-report-h5
10
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Labels Milestones
New Pull Request

develop #3

Merged
bill_del merged 4 commits from develop into test 3 years ago
Conversation 0 Commits 4 Files Changed 2
2 changed files with 118 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      src/views/PerformanceData/index.vue
  2. 99
      src/views/cityDistribution/index.vue

89
src/views/PerformanceData/index.vue
View File

@ -4,15 +4,17 @@
<p class="title">2021年总业绩</p>
<p class="money" v-if="year_count_order_money">¥{{year_count_order_money | capitalize}}</p>
</div>
<div class="time">
<!-- <div class="time">
<div class="active">月</div>
</div>
</div> -->
<div class="list">
<div class="title">营业额</div>
<div class="money" v-if="money_count_order_money"><span>¥</span>{{money_count_order_money | capitalize}}
</div>
<div class="name">轻未来阻燃粉：{{order_goods_num | capitalize}}/盒</div>
<div class="cartogram" ref="cartogram"></div>
<div class="bar" ref="bar"></div>
</div>
</div>
</template>
@ -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);
},
},
}
</script>
@ -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;
}
}
}

99
src/views/cityDistribution/index.vue
View File

@ -15,41 +15,13 @@
<div class="ranking">
<p class="title">代理城市排名</p>
<div class="rankingCity">
<div v-for="(item,index) in rankArea" :key="index">
<div class="item" v-if="item.top == 1">
<div v-for="(item,index) in city" :key="index">
<div class="item">
<div class="city">
<p class="rankNum">1</p>
<p class="cityName">{{item.cityName}}</p>
<p class="rankNum">{{index+1}}</p>
<p class="cityName">{{item.name}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item" v-if="item.top == 2">
<div class="city">
<p class="rankNum">2</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item" v-if="item.top == 3">
<div class="city">
<p class="rankNum">3</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item" v-if="item.top == 4">
<div class="city">
<p class="rankNum">4</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts |capitalize}}</p>
</div>
<div class="item" v-if="item.top == 5">
<div class="city">
<p class="rankNum">5</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
<p class="number">{{item.num.counts | capitalize}}</p>
</div>
</div>
</div>
@ -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;

Write Preview
Loading…
Cancel
Save