211 lines
4.8 KiB
Vue
211 lines
4.8 KiB
Vue
<template>
|
||
<div class="People">
|
||
<div class="title">
|
||
居民好友统计<span>（统计数据为去重后的数据）</span>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||
<p>{{ item.label }}</p>
|
||
<h3>{{ item.value }}</h3>
|
||
</div>
|
||
</div>
|
||
<div class="chart-content" id="chartFriend"></div>
|
||
<div class="title">
|
||
居民群统计<span>（统计数据为去重后的数据）</span>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div class="item" v-for="(item, index) in groupList" :key="index">
|
||
<p>{{ item.label }}</p>
|
||
<h3>{{ item.value }}</h3>
|
||
</div>
|
||
</div>
|
||
<div class="chart-content" id="chartGroup"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
import echarts from 'echarts'
|
||
export default {
|
||
name: "People",
|
||
data() {
|
||
return {
|
||
friendList: [
|
||
{
|
||
label: '居民好友',
|
||
value: '235,625'
|
||
},
|
||
{
|
||
label: '昨日新增',
|
||
value: '235'
|
||
},
|
||
{
|
||
label: '昨日流失',
|
||
value: '18'
|
||
}
|
||
],
|
||
groupList: [
|
||
{
|
||
label: '居民群',
|
||
value: '235'
|
||
},
|
||
{
|
||
label: '居民群',
|
||
value: '235,625'
|
||
},
|
||
{
|
||
label: '昨日新增',
|
||
value: '235'
|
||
},
|
||
{
|
||
label: '昨日流失',
|
||
value: '18'
|
||
}
|
||
],
|
||
echartDataFriend: null,
|
||
echartDataGroup: null
|
||
}
|
||
},
|
||
computed: { ...mapState(['user']) },
|
||
methods: {
|
||
chartInit() {
|
||
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||
var option = {
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#E1E5EF', //x轴的颜色
|
||
width: 1, //轴线的宽度
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#666',
|
||
},
|
||
},
|
||
data: ['4月', '5月', '6月', '7月', '8月',]
|
||
},
|
||
yAxis: {
|
||
axisLine:{ //y轴
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#666',
|
||
},
|
||
},
|
||
type: 'value',
|
||
minInterval: 50,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
series: [
|
||
{
|
||
data: [155, 130, 120, 160, 120, 130, 110],
|
||
type: 'line',
|
||
areaStyle: {//覆盖区域的渐变色
|
||
normal: {
|
||
color: {
|
||
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
},
|
||
}
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#2891FF'
|
||
}
|
||
},
|
||
itemStyle : {
|
||
normal : {
|
||
color:'#2891FF',
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
this.echartDataFriend.setOption(option)
|
||
this.echartDataGroup.setOption(option)
|
||
},
|
||
},
|
||
created() {
|
||
this.$nextTick(() => {
|
||
this.chartInit()
|
||
})
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.People {
|
||
padding: 0 30px;
|
||
.title {
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
line-height: 44px;
|
||
padding: 40px 0 24px 0;
|
||
span {
|
||
font-size: 26px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #999;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
.tab-content {
|
||
display: flex;
|
||
padding: 24px 0;
|
||
background-color: #fff;
|
||
border-radius: 16px;
|
||
margin-bottom: 16px;
|
||
.item {
|
||
flex: 1;
|
||
text-align: center;
|
||
p {
|
||
font-size: 24px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #666;
|
||
line-height: 48px;
|
||
}
|
||
h3 {
|
||
font-size: 36px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #000;
|
||
line-height: 48px;
|
||
}
|
||
}
|
||
}
|
||
.chart-content {
|
||
width: 100%;
|
||
height: 517px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
</style>
|