You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
459 lines
12 KiB
459 lines
12 KiB
<template>
|
|
<view class="v-page">
|
|
<view class="v-card contain">
|
|
<!-- 客源地分布统计 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'客源地分布统计'" ></common-title>
|
|
<view class="charts-box">
|
|
<qiun-data-charts :chartData="chartData" :opts="chartOpts" type="bar" />
|
|
</view>
|
|
</view></view>
|
|
<!-- 年龄占比 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'年龄占比'" ></common-title>
|
|
<view class="charts-box-pie">
|
|
<qiun-data-charts :chartData="chartData2" :opts="chartOpts2" type="pie" />
|
|
</view>
|
|
</view></view>
|
|
<!-- 游客偏好 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'游客偏好'" ></common-title>
|
|
<view class="charts-box-pie">
|
|
<qiun-data-charts :chartData="chartData3" :opts="chartOpts3" type="pie" />
|
|
</view>
|
|
</view></view>
|
|
<!-- 职业占比 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'职业占比'" ></common-title>
|
|
<view class="charts-box-pie">
|
|
<qiun-data-charts :chartData="chartData4" :opts="chartOpts4" type="pie" />
|
|
</view>
|
|
</view></view>
|
|
<!-- 停留时长 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'停留时长'" ></common-title>
|
|
<view class="charts-box-pie">
|
|
<qiun-data-charts :chartData="chartData6" :opts="chartOpts6" type="column" />
|
|
</view>
|
|
</view></view>
|
|
<!-- 学历占比 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'学历占比'" ></common-title>
|
|
<view class="charts-box-pie">
|
|
<qiun-data-charts :chartData="chartData5" :opts="chartOpts5" type="pie" />
|
|
</view>
|
|
</view> </view>
|
|
<!-- 出行方式 -->
|
|
<view class="v-card-item"><view class="v-card-box">
|
|
<common-title :title="'出行方式'" ></common-title>
|
|
<view class="charts-box">
|
|
<qiun-data-charts
|
|
type="mount"
|
|
:opts="chartOpts7"
|
|
:chartData="chartData7"
|
|
:ontouch="true"
|
|
/>
|
|
</view>
|
|
</view> </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getTouristsData,getSexScaleData,getTouristsPreferencesData,getCareerScaleData,getStayTimeData,getEducationScaleData,getTravelWayData} from '@/api/detail/touristPortrait.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
chartData:{},
|
|
chartData1:{},
|
|
chartData2:{},
|
|
chartData3:{},
|
|
chartData4:{},
|
|
chartData5:{},
|
|
chartData6:{},
|
|
chartData7:{},
|
|
chartOpts:{},
|
|
chartOpts1:{},
|
|
chartOpts2:{},
|
|
chartOpts3:{},
|
|
chartOpts4:{},
|
|
chartOpts5:{},
|
|
chartOpts6:{},
|
|
chartOpts7:{},
|
|
};
|
|
},
|
|
mounted(){
|
|
// this.getServerData4()
|
|
// this.getServerData5()
|
|
// this.getServerData6()
|
|
//客源地分布统计
|
|
this.getTouristsData();
|
|
// 年龄占比
|
|
this.getSexScaleData();
|
|
//游客偏好
|
|
this.getTouristsPreferencesData();
|
|
//职业占比
|
|
this.getCareerScaleData();
|
|
//逗留时长
|
|
this.getStayTimeData();
|
|
//学历占比
|
|
this.getEducationScaleData();
|
|
// 出行方式
|
|
this.getTravelWayData();
|
|
},
|
|
methods:{
|
|
|
|
getServerData6() {
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
let res = {
|
|
series: [
|
|
{
|
|
data:
|
|
[{
|
|
"name": "火车",
|
|
"value": 415
|
|
},
|
|
{
|
|
"name": "飞机",
|
|
"value": 627
|
|
},
|
|
{
|
|
"name": "旅游大巴",
|
|
"value": 964
|
|
},
|
|
{
|
|
"name": "自驾",
|
|
"value": 1689
|
|
},
|
|
{
|
|
"name": "其他",
|
|
"value": 999
|
|
}]
|
|
}
|
|
]
|
|
};
|
|
this.chartData7 = JSON.parse(JSON.stringify(res));
|
|
this.chartOpts7= {
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,15,0,5],
|
|
enableScroll: true,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
itemCount: 4,
|
|
scrollShow: true
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
mount: {
|
|
type: "sharp",
|
|
widthRatio: 1.5,
|
|
borderWidth: 2,
|
|
linearType: "opacity",
|
|
linearOpacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
}, 500);
|
|
},
|
|
|
|
// 客源地分布统计
|
|
getTouristsData(){
|
|
getTouristsData().then(res =>{
|
|
const categories = res.data.seriesData.map(function(item,index){
|
|
return item.name
|
|
})
|
|
|
|
let data ={
|
|
categories: categories,
|
|
series: res.data.seriesData
|
|
}
|
|
if (data.series&&data.series.length>0){
|
|
let arr = []
|
|
data.series.forEach(item=>{
|
|
arr.push(item.percentage)
|
|
})
|
|
this.chartData = {
|
|
categories:data.categories,
|
|
series : [
|
|
{
|
|
name:'百分比',
|
|
data: arr
|
|
}
|
|
]
|
|
}
|
|
}
|
|
this.chartData = JSON.parse(JSON.stringify(this.chartData));
|
|
this.chartOpts =
|
|
{
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,30,0,5],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: [{
|
|
boundaryGap: "justify",
|
|
disableGrid: false,
|
|
min: 0,
|
|
axisLine: false,
|
|
max: 100
|
|
}],
|
|
extra: {
|
|
bar: {
|
|
type: "group",
|
|
width: 30,
|
|
meterBorde: 1,
|
|
meterFillColor: "#FFFFFF",
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08,
|
|
linearType: "custom",
|
|
barBorderCircle: true,
|
|
seriesGap: 2,
|
|
categoryGap: 2
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//性别占比
|
|
getSexScaleData(){
|
|
getSexScaleData().then(res=>{
|
|
let data = {
|
|
series:[
|
|
{data:res.data.seriesData}
|
|
]
|
|
};
|
|
this.chartData2 = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts2= {
|
|
dataLabel:false,
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [5,5,5,5],
|
|
enableScroll: false,
|
|
legend: {
|
|
show: true,
|
|
position: "right",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
pie: {
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 0.1,
|
|
border: true,
|
|
borderWidth: 1,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "custom"
|
|
},
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//游客偏好
|
|
getTouristsPreferencesData(){
|
|
getTouristsPreferencesData().then(res =>{
|
|
let data = {
|
|
series:[
|
|
{data:res.data.seriesData}
|
|
]
|
|
};
|
|
this.chartData3 = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts3= {
|
|
dataLabel:false,
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [5,5,5,5],
|
|
enableScroll: false,
|
|
legend: {
|
|
show: false,
|
|
position: "right",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
pie: {
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 0.1,
|
|
border: true,
|
|
borderWidth: 1,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "custom"
|
|
},
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//职业占比
|
|
getCareerScaleData(){
|
|
getCareerScaleData().then(res =>{
|
|
let data = {
|
|
series:[
|
|
{data:res.data.seriesData}
|
|
]
|
|
};
|
|
this.chartData4 = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts4= {
|
|
dataLabel:false,
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [5,5,5,5],
|
|
enableScroll: false,
|
|
legend: {
|
|
show: false,
|
|
position: "right",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
pie: {
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 0.1,
|
|
border: true,
|
|
borderWidth: 1,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "custom"
|
|
},
|
|
}
|
|
}
|
|
|
|
})
|
|
},
|
|
//停留时长
|
|
getStayTimeData(){
|
|
getStayTimeData().then(res =>{
|
|
res.data.seriesData.forEach(item =>{
|
|
item.data =item.value.map(Number)
|
|
})
|
|
let data = {
|
|
categories: res.data.categories,
|
|
series: res.data.seriesData
|
|
};
|
|
this.chartData6 = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts6= {
|
|
opts: {
|
|
color: ["#FAC858","#EE6666","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,15,0,5],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 30,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08,
|
|
linearType: "custom",
|
|
seriesGap: 5,
|
|
linearOpacity: 0.5,
|
|
barBorderCircle: true,
|
|
customColor: [
|
|
"#FA7D8D",
|
|
"#EB88E2"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 学历占比
|
|
getEducationScaleData(){
|
|
getEducationScaleData().then(res =>{
|
|
let data = {
|
|
series: [
|
|
{
|
|
data: res.data.seriesData
|
|
|
|
}
|
|
]
|
|
};
|
|
this.chartData5 = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts5= {
|
|
dataLabel:false,
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [5,5,5,5],
|
|
enableScroll: false,
|
|
extra: {
|
|
pie: {
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 0.1,
|
|
border: false,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF"
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 出行方式
|
|
getTravelWayData(){
|
|
getTravelWayData().then(res =>{
|
|
let data = {
|
|
series: [
|
|
{
|
|
data: res.data.seriesData
|
|
}
|
|
]
|
|
};
|
|
this.chartData7 = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts7= {
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,15,0,5],
|
|
enableScroll: true,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
itemCount: 4,
|
|
scrollShow: true
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
mount: {
|
|
type: "sharp",
|
|
widthRatio: 1.5,
|
|
borderWidth: 2,
|
|
linearType: "opacity",
|
|
linearOpacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.charts-box {
|
|
height: 630rpx;
|
|
margin: 20rpx auto;
|
|
}
|
|
.charts-box-pie{
|
|
width: 80%;
|
|
height: 430rpx;
|
|
margin: 20rpx auto;
|
|
}
|
|
</style>
|
|
|