|
@@ -117,19 +117,19 @@
|
|
|
<div class="wholeCountry">
|
|
|
<h4>当日平台总成交额 </h4>
|
|
|
<div class="money">
|
|
|
- <span>1</span>
|
|
|
- <span>5</span>
|
|
|
- <span>3</span>
|
|
|
- <span>8</span>
|
|
|
- <span>9</span>
|
|
|
- <span>7</span>
|
|
|
- <span>4</span>
|
|
|
- <span>5</span>
|
|
|
+ <span>{{getFirstDigit(0)}}</span>
|
|
|
+ <span>{{getFirstDigit(1)}}</span>
|
|
|
+ <span>{{getFirstDigit(2)}}</span>
|
|
|
+ <span>{{getFirstDigit(3)}}</span>
|
|
|
+ <span>{{getFirstDigit(4)}}</span>
|
|
|
+ <span>{{getFirstDigit(5)}}</span>
|
|
|
+ <span>{{getFirstDigit(6)}}</span>
|
|
|
+ <span>{{getFirstDigit(7)}}</span>
|
|
|
</div>
|
|
|
- <div class="_count">当日累计总游客数<ins>234856</ins>人</div>
|
|
|
+ <div class="_count">当日累计总游客数<ins>{{ peopleNum }}</ins>人</div>
|
|
|
</div>
|
|
|
<div class="map bor">
|
|
|
- <div id="mapByPerson" style="width: 740px;height: 570px"></div>
|
|
|
+ <div id="mapByPerson" style="width: 740px;height: 426px"></div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@@ -251,25 +251,32 @@ export default {
|
|
|
moreMeunSmalLeft_3:false,
|
|
|
regionInShowOne:false,
|
|
|
regionInShowTwo:true,
|
|
|
+ money:15389740,
|
|
|
+ peopleNum:234856,
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
//近一个月排行
|
|
|
- this.chartRankOneMonthGet()
|
|
|
+ this.chartRankOneMonthGet();
|
|
|
//近一年销售
|
|
|
- this.chartRankOneSaleGet()
|
|
|
+ this.chartRankOneSaleGet();
|
|
|
//客源地省份
|
|
|
- this.chartRankOneCityGet()
|
|
|
+ this.chartRankOneCityGet();
|
|
|
//游客年龄
|
|
|
- this.chartRankOneAgeGet()
|
|
|
+ this.chartRankOneAgeGet();
|
|
|
//支付方式与购买渠道
|
|
|
- this.chartRankOnePayGet()
|
|
|
+ this.chartRankOnePayGet();
|
|
|
//停车场
|
|
|
- this.chartRankOneParkGet()
|
|
|
+ this.chartRankOneParkGet();
|
|
|
//人流量排行
|
|
|
- this.chartRankOneMbsGet()
|
|
|
+ this.chartRankOneMbsGet();
|
|
|
//地图
|
|
|
- setTimeout(this.getMapByPerson(),100)
|
|
|
+ this.getMapByPerson();
|
|
|
+ let _this = this;
|
|
|
+ setInterval(function(){
|
|
|
+ _this.money += Math.round(Math.random()*100);
|
|
|
+ _this.peopleNum += Math.round(Math.random()*100);
|
|
|
+ },3000)
|
|
|
},
|
|
|
methods: {
|
|
|
selectByMonth(val){
|
|
@@ -677,7 +684,7 @@ export default {
|
|
|
let option = {
|
|
|
grid: {
|
|
|
left: "2%",
|
|
|
- right: "12%",
|
|
|
+ right: "2%",
|
|
|
bottom: "2%",
|
|
|
top: "2%",
|
|
|
containLabel: true,
|
|
@@ -687,8 +694,24 @@ export default {
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
},
|
|
|
+ confine: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: "rgba(255, 255, 255, 0.8)",
|
|
|
+ },
|
|
|
formatter: function (params) {
|
|
|
- return params[0].axisValueLabel + ": "+params[0].value + '%'
|
|
|
+ return (
|
|
|
+ params[0].name +
|
|
|
+ "<br/>" +
|
|
|
+ "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(90deg, #388CFF 0% ,#6CFEFF 100%)'></span>" +
|
|
|
+ params[0].seriesName +
|
|
|
+ " : " +
|
|
|
+ params[0].value
|
|
|
+ .toLocaleString()
|
|
|
+ .toString()
|
|
|
+ .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
|
|
|
+ " 辆/天"
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
@@ -697,14 +720,33 @@ export default {
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
- show:false,
|
|
|
type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "rgba(255, 255, 255, 0.8)",
|
|
|
+ },
|
|
|
+ formatter: function (name) {
|
|
|
+ return name + ": ";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
data: [
|
|
|
- "成人票",
|
|
|
- "儿童票",
|
|
|
- "船票",
|
|
|
- "免费票",
|
|
|
- "亲子票",
|
|
|
+ "香榭丽",
|
|
|
+ "拉斯维",
|
|
|
+ "格林",
|
|
|
+ "密歇根",
|
|
|
+ "格拉西",
|
|
|
],
|
|
|
},
|
|
|
{
|
|
@@ -726,16 +768,15 @@ export default {
|
|
|
.replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
|
|
|
},
|
|
|
},
|
|
|
- data: [5, 5, 10, 30, 50],
|
|
|
+ data: [50000, 22000, 10000, 5000, 2000],
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: "人流量占比",
|
|
|
+ name: "车辆",
|
|
|
type: "bar",
|
|
|
zlevel: 1, //通过 zlevel 设置层级
|
|
|
barWidth: 10,
|
|
|
- inverse: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius: 10,
|
|
@@ -754,15 +795,14 @@ export default {
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
- // data: [60, 30, 10, 5, 5],
|
|
|
- data: [5, 5, 10, 30, 50],
|
|
|
+ data: [50000, 22000, 10000, 5000, 2000],
|
|
|
},
|
|
|
{
|
|
|
name: "背景",
|
|
|
type: "bar",
|
|
|
barWidth: 10,
|
|
|
barGap: "-100%", //两条柱状图重合
|
|
|
- data: [100, 100, 100, 100, 100],
|
|
|
+ data: [50000, 50000, 50000, 50000, 50000],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgba(108, 254, 255, 0.3)",
|
|
@@ -790,7 +830,9 @@ export default {
|
|
|
this.getMapByPerson()
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ getFirstDigit(num) {
|
|
|
+ return Number(String(this.money).charAt(num));
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
}
|