Commit 6fbe8761 authored by xj's avatar xj

.

parent 6d217452
...@@ -4,7 +4,8 @@ VUE_APP_API_BASE_URL=http://8.136.255.30:11078 ...@@ -4,7 +4,8 @@ VUE_APP_API_BASE_URL=http://8.136.255.30:11078
#图片显示拼接 #图片显示拼接
VUE_APP_API_IMG_URL=http://8.136.255.30:11078/ VUE_APP_API_IMG_URL=http://8.136.255.30:11078/
#余林 #余林
VUE_APP_API_PHP_URL=http://8.136.255.30:8090 VUE_APP_API_PHP_URL=http://112.19.80.237:8090
#VUE_APP_API_PHP_URL=http://8.136.255.30:8090
#宜宾 #宜宾
#VUE_APP_API_BASE_URL=http://10.12.185.213:11072 #VUE_APP_API_BASE_URL=http://10.12.185.213:11072
......
...@@ -42,9 +42,10 @@ export default { ...@@ -42,9 +42,10 @@ export default {
}, },
}, },
async mounted() { async mounted() {
let {data} = await getStatisticAges() let res = await getStatisticAges()
let label = data.map(item=> item.age_area) if (res.code != 1) return
let value = data.map(item=> item.nums) let label = res.data.map(item=> item.age_area)
let value = res.data.map(item=> item.nums)
this._initEcharts(label,value); this._initEcharts(label,value);
}, },
methods: { methods: {
......
...@@ -26,8 +26,9 @@ export default { ...@@ -26,8 +26,9 @@ export default {
}, },
}, },
async mounted() { async mounted() {
let {data} = await getStatisticSexual() let res = await getStatisticSexual()
let value = data.map(({idcard_Sex,nums})=>({name:idcard_Sex,value:nums})) if (res.code != 1) return
let value = res.data.map(({idcard_Sex,nums})=>({name:idcard_Sex,value:nums}))
this._initEcharts(value); this._initEcharts(value);
}, },
methods: { methods: {
......
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
const echarts = this.$echarts; const echarts = this.$echarts;
let option = { let option = {
title: { title: {
text: `{c|${this.info.starttime}~${this.info.endtime}} \n{a|` + this.info.success_rate * 100 + "%" + "}", text: `{c|${this.info.starttime}~${this.info.endtime}} \n{a|` + (this.info.success_rate * 100).toFixed(2) + "%" + "}",
x: "center", x: "center",
y: "center", y: "center",
textStyle: { textStyle: {
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
}, },
data: [ data: [
{ {
value: this.info.success_rate * 100, value: (this.info.success_rate * 100).toFixed(2),
name: "", name: "",
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
}, },
}, },
{ {
value: 100 - (this.info.success_rate * 100), value: 100 - (this.info.success_rate * 100).toFixed(2),
name: "", name: "",
label: { label: {
normal: { normal: {
......
<template> <template>
<div class="CrowdPortrait-Container"> <div class="CrowdPortrait-Container">
<div class="diyufenbu"> <div class="diyufenbu">
<Head :title="'地域分布'"> </Head> <Head :title="'地域分布'">
<template slot="operation">
<a-range-picker valueFormat="YYYY-MM-DD" class="range_picker_style" @change="rangePickerChange"
v-model="BegindAndEndTime" v-if="day == 5">
</a-range-picker>
<a-select v-model="day">
<a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </a-select-option>
<a-select-option value="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option>
</a-select>
<a-button type="primary" class="addclass" @click="searchData">搜索</a-button>
</template>
</Head>
<div class="diyufenbu_box"> <div class="diyufenbu_box">
<div class="_left"> <div class="_left">
<div ref="chart" style="width: 100%;height: 100%;"></div> <div ref="chart" style="width: 100%;height: 100%;"></div>
<img v-show="false" ref="img" src="@/assets/images/Banner.png" alt="" />
</div> </div>
<ul class="_right"> <ul class="_right">
<li class="list"> <li class="list">
...@@ -51,16 +68,16 @@ ...@@ -51,16 +68,16 @@
} from '@/api/dataAdmin.js' } from '@/api/dataAdmin.js'
import axios from 'axios' import axios from 'axios'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import china from "@/assets/json/china.json";
export default { export default {
name: "PortalAdminVueCrowdPortrait", name: "PortalAdminVueCrowdPortrait",
data() { data() {
return { return {
day: '0',
BegindAndEndTime: [],
area: [], area: [],
sign: [], sign: [],
config: { chart: null
bgImgSrc: require('../../../../assets/china.svg')
},
chart:null
}; };
}, },
components: { components: {
...@@ -69,23 +86,31 @@ ...@@ -69,23 +86,31 @@
XingbiePie, XingbiePie,
QiandaoPie, QiandaoPie,
}, },
async mounted() { mounted() {
let { this.init(china)
data this.getStatisticArea()
} = await getStatisticArea() this.getStatisticSignin()
this.area = data
let sign = await getStatisticSignin()
this.sign = sign.data
let point = await axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
console.log(point)
this.init(point.data)
}, },
methods: { methods: {
// 搜索
searchData() {
this.getStatisticArea()
this.getStatisticSignin()
},
async getStatisticArea() {
let res = await getStatisticArea()
if (res.code != 1) return
this.area = res.data
},
async getStatisticSignin() {
let res = await getStatisticSignin()
if (res.code != 1) return
this.sign = res.data
},
//初始化 //初始化
init(data) { init(data) {
if (this.chart == null) { if (this.chart == null) {
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
} }
echarts.registerMap('china', data); echarts.registerMap('china', data);
var geoGpsMap = [104.64, 28.75]; var geoGpsMap = [104.64, 28.75];
...@@ -96,32 +121,32 @@ ...@@ -96,32 +121,32 @@
'吉林': [125.8154, 44.2584], '吉林': [125.8154, 44.2584],
'北京': [116.4551, 40.2539], '北京': [116.4551, 40.2539],
'辽宁': [123.1238, 42.1216], '辽宁': [123.1238, 42.1216],
// 河北: [114.4995, 38.1006], '河北': [114.4995, 38.1006],
'天津': [117.4219, 39.4189], '天津': [117.4219, 39.4189],
// 山西: [112.3352, 37.9413], '山西': [112.3352, 37.9413],
'陕西': [109.1162, 34.2004], '陕西': [109.1162, 34.2004],
// 甘肃: [103.5901, 36.3043], '甘肃': [103.5901, 36.3043],
// 宁夏: [106.3586, 38.1775], '宁夏': [106.3586, 38.1775],
青海: [101.4038, 36.8207], '青海': [101.4038, 36.8207],
'新疆': [87.9236, 43.5883], '新疆': [87.9236, 43.5883],
'四川': [103.9526, 30.7617], '四川': [103.9526, 30.7617],
// 重庆: [108.384366, 30.439702], '重庆': [108.384366, 30.439702],
'山东': [117.1582, 36.8701], '山东': [117.1582, 36.8701],
// 河南: [113.4668, 34.6234], '河南': [113.4668, 34.6234],
// '安徽': [117.29, 32.0581], '安徽': [117.29, 32.0581],
'湖北': [114.3896, 30.6628], '湖北': [114.3896, 30.6628],
'浙江': [119.5313, 29.8773], '浙江': [119.5313, 29.8773],
// 福建: [119.4543, 25.9222], '福建': [119.4543, 25.9222],
// 江西: [116.0046, 28.6633], '江西': [116.0046, 28.6633],
'湖南': [113.0823, 28.2568], '湖南': [113.0823, 28.2568],
// 贵州: [106.6992, 26.7682], '贵州': [106.6992, 26.7682],
// 云南: [102.9199, 25.4663], '云南': [102.9199, 25.4663],
// 广东: [113.12244, 23.009505], '广东': [113.12244, 23.009505],
// 广西: [108.479, 23.1152], '广西': [108.479, 23.1152],
// 海南: [110.3893, 19.8516], '海南': [110.3893, 19.8516],
'上海': [121.4648, 31.2891], '上海': [121.4648, 31.2891],
'西藏': [91.141017, 29.668461], '西藏': [91.141017, 29.668461],
// 台湾: [121.509062, 25.044332] '台湾': [121.509062, 25.044332]
}; };
var data = []; var data = [];
var mapData = []; var mapData = [];
...@@ -282,7 +307,7 @@ ...@@ -282,7 +307,7 @@
type: 'map', type: 'map',
mapType: 'china', mapType: 'china',
top: '30%', top: '30%',
left: '25%', left: '25%',
zoom: 1.7, zoom: 1.7,
label: { // 地图上的文字 label: { // 地图上的文字
normal: { normal: {
...@@ -294,22 +319,33 @@ ...@@ -294,22 +319,33 @@
}, },
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: '#6194F8', areaColor: {
borderColor: '#fff', image: this.$refs.img, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
borderColor: '#76C6E7',
borderWidth: 1, borderWidth: 1,
shadowColor: '#CCEAFD', shadowColor: '#CCEAFD',
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
emphasis: { // 高亮时区域颜色 emphasis: { // 高亮时区域颜色
itemStyle: { itemStyle: {
areaColor: '#1890FF', areaColor: '#1890FF',
}, },
label: { label: {
color: '#ffffff' color: '#ffffff'
} }
},
select: {
itemStyle: {
areaColor: '#1890FF'
},
label: {
color: '#ffffff'
}
}, },
data: data.map((item, index) => { data: data.map((item, index) => {
return { return {
...@@ -348,27 +384,6 @@ ...@@ -348,27 +384,6 @@
} }
} }
}] }]
},
tooltip: {
show: false,
trigger: 'item',
backgroundColor: '#CCEAFD',
padding: 0,
formatter: function(params) {
var name = params.name || params.seriesName;
var value = params.data.value || 0;
// 实际来源地**
// 最终目的地规模**人
var content = `<div class="info_box">
<div class="info_box_marker"></div>
<div class="info_box_box">
<span class="name">${name}</span>
<span class="value">${value}</span>
<span class="company">人</span>
</div>
</div>`;
return content;
}
} }
}; };
this.chart.setOption(option); this.chart.setOption(option);
...@@ -494,5 +509,84 @@ ...@@ -494,5 +509,84 @@
} }
} }
} }
.range_picker_style {
margin-right: 20px;
// color: #32a6fb !important;
.ant-calendar-picker-input {
// background: transparent !important;
// border-color: #32a6fb !important;
// color: #32a6fb !important;
}
.ant-calendar-range-picker-separator {
// color: #32a6fb !important;
}
::-webkit-input-placeholder {
/* WebKit browsers,webkit内核浏览器 */
// color: #32a6fb;
// font-size: 16px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
// color: #32a6fb;
// font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
// color: #32a6fb;
// font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
// color: #32a6fb;
// font-size: 16px;
}
}
/deep/.ant-input-affix-wrapper {
width: 17rem !important;
margin-right: 1rem !important;
}
/deep/.ant-input {
height: 2.3rem !important;
}
/deep/.ant-select-selection {
width: 170px !important;
height: 2.3rem !important;
margin-right: 1rem !important;
}
/deep/.ant-select-selection__rendered {
height: 100% !important;
}
/deep/.ant-select-selection-selected-value {
height: 100% !important;
line-height: 2.3rem !important;
}
.search_btn {
padding: 0.8rem 1.2rem;
border: 0;
border-radius: 5px;
background: #1890ff;
box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 0.8rem;
color: hsl(0, 0%, 100%);
transition: all 0.5s ease;
cursor: pointer;
&:hover {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 2px 10px 0px;
}
&:active {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
transform: translateY(2px);
transition: 100ms;
}
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment