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
#图片显示拼接
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
......
......@@ -42,9 +42,10 @@ export default {
},
},
async mounted() {
let {data} = await getStatisticAges()
let label = data.map(item=> item.age_area)
let value = data.map(item=> item.nums)
let res = await getStatisticAges()
if (res.code != 1) return
let label = res.data.map(item=> item.age_area)
let value = res.data.map(item=> item.nums)
this._initEcharts(label,value);
},
methods: {
......
......@@ -26,8 +26,9 @@ export default {
},
},
async mounted() {
let {data} = await getStatisticSexual()
let value = data.map(({idcard_Sex,nums})=>({name:idcard_Sex,value:nums}))
let res = await getStatisticSexual()
if (res.code != 1) return
let value = res.data.map(({idcard_Sex,nums})=>({name:idcard_Sex,value:nums}))
this._initEcharts(value);
},
methods: {
......
......@@ -29,7 +29,7 @@ export default {
const echarts = this.$echarts;
let option = {
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",
y: "center",
textStyle: {
......@@ -62,7 +62,7 @@ export default {
},
data: [
{
value: this.info.success_rate * 100,
value: (this.info.success_rate * 100).toFixed(2),
name: "",
itemStyle: {
normal: {
......@@ -82,7 +82,7 @@ export default {
},
},
{
value: 100 - (this.info.success_rate * 100),
value: 100 - (this.info.success_rate * 100).toFixed(2),
name: "",
label: {
normal: {
......
<template>
<div class="CrowdPortrait-Container">
<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="_left">
<div ref="chart" style="width: 100%;height: 100%;"></div>
<img v-show="false" ref="img" src="@/assets/images/Banner.png" alt="" />
</div>
<ul class="_right">
<li class="list">
......@@ -51,16 +68,16 @@
} from '@/api/dataAdmin.js'
import axios from 'axios'
import * as echarts from 'echarts'
import china from "@/assets/json/china.json";
export default {
name: "PortalAdminVueCrowdPortrait",
data() {
return {
day: '0',
BegindAndEndTime: [],
area: [],
sign: [],
config: {
bgImgSrc: require('../../../../assets/china.svg')
},
chart:null
chart: null
};
},
components: {
......@@ -69,23 +86,31 @@
XingbiePie,
QiandaoPie,
},
async mounted() {
let {
data
} = await getStatisticArea()
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)
mounted() {
this.init(china)
this.getStatisticArea()
this.getStatisticSignin()
},
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) {
if (this.chart == null) {
this.chart = echarts.init(this.$refs.chart);
init(data) {
if (this.chart == null) {
this.chart = echarts.init(this.$refs.chart);
}
echarts.registerMap('china', data);
var geoGpsMap = [104.64, 28.75];
......@@ -96,32 +121,32 @@
'吉林': [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
'辽宁': [123.1238, 42.1216],
// 河北: [114.4995, 38.1006],
'河北': [114.4995, 38.1006],
'天津': [117.4219, 39.4189],
// 山西: [112.3352, 37.9413],
'山西': [112.3352, 37.9413],
'陕西': [109.1162, 34.2004],
// 甘肃: [103.5901, 36.3043],
// 宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
'甘肃': [103.5901, 36.3043],
'宁夏': [106.3586, 38.1775],
'青海': [101.4038, 36.8207],
'新疆': [87.9236, 43.5883],
'四川': [103.9526, 30.7617],
// 重庆: [108.384366, 30.439702],
'重庆': [108.384366, 30.439702],
'山东': [117.1582, 36.8701],
// 河南: [113.4668, 34.6234],
// '安徽': [117.29, 32.0581],
'河南': [113.4668, 34.6234],
'安徽': [117.29, 32.0581],
'湖北': [114.3896, 30.6628],
'浙江': [119.5313, 29.8773],
// 福建: [119.4543, 25.9222],
// 江西: [116.0046, 28.6633],
'福建': [119.4543, 25.9222],
'江西': [116.0046, 28.6633],
'湖南': [113.0823, 28.2568],
// 贵州: [106.6992, 26.7682],
// 云南: [102.9199, 25.4663],
// 广东: [113.12244, 23.009505],
// 广西: [108.479, 23.1152],
// 海南: [110.3893, 19.8516],
'贵州': [106.6992, 26.7682],
'云南': [102.9199, 25.4663],
'广东': [113.12244, 23.009505],
'广西': [108.479, 23.1152],
'海南': [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
'西藏': [91.141017, 29.668461],
// 台湾: [121.509062, 25.044332]
'台湾': [121.509062, 25.044332]
};
var data = [];
var mapData = [];
......@@ -282,7 +307,7 @@
type: 'map',
mapType: 'china',
top: '30%',
left: '25%',
left: '25%',
zoom: 1.7,
label: { // 地图上的文字
normal: {
......@@ -294,22 +319,33 @@
},
itemStyle: {
normal: {
areaColor: '#6194F8',
borderColor: '#fff',
areaColor: {
image: this.$refs.img, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
borderColor: '#76C6E7',
borderWidth: 1,
shadowColor: '#CCEAFD',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
},
},
emphasis: { // 高亮时区域颜色
itemStyle: {
areaColor: '#1890FF',
},
label: {
color: '#ffffff'
}
},
emphasis: { // 高亮时区域颜色
itemStyle: {
areaColor: '#1890FF',
},
label: {
color: '#ffffff'
}
},
select: {
itemStyle: {
areaColor: '#1890FF'
},
label: {
color: '#ffffff'
}
},
data: data.map((item, index) => {
return {
......@@ -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);
......@@ -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>
\ 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