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

develop #4

Merged
bill_del merged 7 commits from develop into master 3 years ago
Conversation 0 Commits 7 Files Changed 2
2 changed files with 119 additions and 79 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. 91
      src/views/PerformanceData/index.vue
  2. 105
      src/views/cityDistribution/index.vue

91
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>
@ -22,16 +24,17 @@
export default {
data() {
return {
opinionData: [0, 0, 0, 0, 15904960, 0, 0, 0, 0],
opinionData: [],
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) {
@ -41,7 +44,6 @@
methods: {
async getData() {
this.opinionData = []
// let data = new Date()
let month = new Date().getMonth() + 1;
const res = await data.earningReport();
let list = res.data.month_list_money_count
@ -80,7 +82,7 @@
xAxis: {
type: 'category',
boundaryGap: false,
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
data:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
},
yAxis: {
type: 'value'
@ -93,7 +95,74 @@
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: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
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 +272,14 @@
width: 610px;
height: 490px;
margin: 0 auto;
margin-bottom: 60px;
}
.bar {
width: 610px;
height: 490px;
margin: 0 auto;
// margin-bottom: 60px;
}
}
}

105
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>
@ -64,16 +36,11 @@
name: 'cityDistribution',
data() {
return {
chinachart: null,
chartOption: null,
poxy_sum: '',
city: {},
cityName: '广东',
cityInfo: [],
rankArea: [],
selectArea: [],
regions: [],
chartBar:null,
chartBar: null,
}
},
filters: {
@ -91,53 +58,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]');
this.cityName = this.city[0].name
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)
})
@ -187,7 +151,7 @@
}
}
}, {
name: "广东",
name: this.city[0].name,
selected: true,
}],
itemStyle: {
@ -205,7 +169,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 +280,6 @@
width: 690px;
min-height: 509px;
background: #373A4A;
margin-bottom: 40px;
.title {
font-size: 40px;

Write Preview
Loading…
Cancel
Save