Skip to content

M
Muse
Commit 665eb77e authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

点聚合（未完成）

parent 033ebdc4
Show whitespace changes
Inline Side-by-side
Showing with 401 additions and 22 deletions
public/index.html
View file @ 665eb77e
......@@ -5,8 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="renderer" content="webkit">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=z58ZwNa8oYvzEYI6dD8hAS0GFbfKpttP"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=z58ZwNa8oYvzEYI6dD8hAS0GFbfKpttP"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>数据可视化</title>
</head>
......
src/components/sellDashboard/map/centerMpBaidu.vue 0 → 100644
View file @ 665eb77e
<style>
.centerMpBaidu-box{
display: flex;
justify-content: center;
align-items: center;
}
.BMap_noprint,.anchorBL{
display: none;
}
</style>
<template>
<div class="echarts centerMpBaidu-box" :style="{height:'100%',width:'100%'}">
<div :style="{height:'80%',width:'80%'}" ref="myEchart" id="centerMpBaidu"></div>
</div>
</template>
<script>
import BMap from 'BMap'
export default {
props: ['baiduMapData'],
data(){
return {
dataList: [],
}
},
watch: {
},created(){
},mounted() {
let _this = this
this.bus.$on('addpoint',newArr=>{
//this.SourceData=newArr;
this.dataList = newArr
})
let map = new BMap.Map("centerMpBaidu");
map.setMapStyle({
style: 'midnight'
});
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var MAX = this.baiduMapData.length;
let data = this.baiduMapData;
if (data.length > 0) {
map.centerAndZoom(new BMap.Point(data[0].Lng, data[0].Lat), 10);
} else {
map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
}
var markers = [];
var pt = null;
for (let i = 0; i < MAX; i++) {
pt = new BMap.Point(data[i].Lng, data[i].Lat);
markers.push(new BMap.Marker(pt));
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
},methods:{
}
}
</script>
\ No newline at end of file
src/components/sellDashboard/map/centerMpBaidu2.vue 0 → 100644
View file @ 665eb77e
<style>
.centerMpBaidu-box{
display: flex;
justify-content: center;
align-items: center;
}
.BMap_noprint,.anchorBL{
display: none;
}
</style>
<template>
<div class="echarts centerMpBaidu-box" :style="{height:'100%',width:'100%'}">
<div :style="{height:'80%',width:'80%'}" ref="myEchart" id="map"></div>
<!-- <canvas id="canvas"></canvas> -->
</div>
</template>
<script>
import BMap from 'BMap'
export default {
props: ['newBaiduArr'],
data(){
return {
dataList: [],
}
},
watch: {
},created(){
},mounted() {
this.createdMap()
},methods:{
createdMap(){
let newBaiduArr = this.newBaiduArr
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 1); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
style: 'midnight'
});
var randomCount = 10;
var data = [];
// var citys = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
// 构造数据
for (let index = 0; index < newBaiduArr.length; index++) {
data.push({
geometry: {
type: 'Point',
coordinates: [newBaiduArr[index].Lng, newBaiduArr[index].Lat]
}
});
}
var dataSet = new mapv.DataSet(data);
console.log(newBaiduArr)
var options = {
// shadowColor: 'rgba(255, 250, 50, 1)',
// shadowBlur: 10,
fillStyle: 'rgba(255, 50, 0, 1.0)', // 非聚合点的颜色
size: 5, // 非聚合点的半径
minSize: 8, // 聚合点最小半径
maxSize: 31, // 聚合点最大半径
globalAlpha: 0.8, // 透明度
clusterRadius: 150, // 聚合像素半径
methods: {
click: function(item) {
console.log(item); // 点击事件
}
},
maxZoom: 19, // 最大显示级别
label: { // 聚合文本样式
show: true, // 是否显示
fillStyle: 'white',
// shadowColor: 'yellow',
// font: '20px Arial',
// shadowBlur: 10,
},
gradient: { 0: "blue", 0.5: 'yellow', 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
draw: 'cluster'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
}
}
}
</script>
\ No newline at end of file
src/components/sellDashboard/map/viittoMap2.vue
View file @ 665eb77e
<template>
<div class="echarts" :style="{height:'110%',width:'110%'}">
<div :style="{height:'110%',width:'110%'}" ref="myEchart"></div>
<div class="echarts" :style="{height:'100%',width:'100%'}">
<div :style="{height:'100%',width:'100%'}" ref="myEchart"></div>
</div>
</template>
<script>
import echarts from "echarts";
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
const https = require('https')
export default {
name: "echarts",
props: ["userJson"],
......@@ -17,6 +18,7 @@ export default {
ActivateList:[],
//不活跃人数
InActivateList:[],
NotVisit: [],
myChart:{},
//SourceData:[]
};
......@@ -26,6 +28,7 @@ export default {
//this.SourceData=newArr;
this.addPoint(newArr)
})
},
beforeDestroy() {
if (!this.chart) {
......@@ -36,19 +39,35 @@ export default {
},
methods: {
mapConfigure() {
var _this = this;
window.onresize = _this.myChart.resize;
this.myChart.on('click', function(params){
console.log(params)
return
_this.bus.$emit('send-centerMpShow', name)
});
},
addPoint(newArr){
var that = this;
that.InActivateList = [];//不活动
that.ActivateList = [];//活动
that.NotVisit = [];//非正式
newArr[0].forEach(x => {
that.InActivateList.push({
name:x.City,
name: '正式同行',
value:[x.Lng,x.Lat]
})
});
newArr[1].forEach(x => {
that.ActivateList.push({
name:x.City,
name: '激活总数',
value:[x.Lng,x.Lat]
})
});
newArr[2].forEach(x => {
that.NotVisit.push({
name:'非正式同行',
value:[x.Lng,x.Lat]
})
});
......@@ -141,9 +160,28 @@ export default {
color: '#2a73fe'
}
}
},
{
// type: "effectScatter",
type:"scatter",
name: "", //series名称
coordinateSystem: "geo", // series坐标系类型
data: this.NotVisit,
symbol: "circle",
symbolSize: 4,
tooltip:this.tooltip,
//配置散点的颜色
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: '#07c160',
color: '#07c160'
}
}
}
]
});
this.mapConfigure();
},
},
watch:{
......
src/components/sellDashboard/map/viittoMap3.vue 0 → 100644
View file @ 665eb77e
<template>
<div class="echarts" :style="{height:'110%',width:'110%'}">
<div :style="{height:'110%',width:'110%'}" ref="myEchart"></div>
</div>
</template>
<script>
import echarts from "echarts";
// import '../../node_modules/echarts/map/js/world.js'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import BMap from 'BMap';
export default {
name: "echarts",
props: ["userJson","dataArea", "newArr"],
data() {
return {
chart: null,
position: [-999999, -999999],
myChart:{},
};
},created () {
},
mounted() {
this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chinaConfigure() {
var myData = [];
this.myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = this.myChart.resize;
this.myChart.setOption({
// 进行相关配置
backgroundColor: "transparent",
tooltip: { // 鼠标移到图里面的浮动提示框
showContent:false,
},
dataRange: {
min: 0,
max: 100,
calculable: true,
color: ["#ff3333", "orange", "yellow", "lime", "aqua"],
itemWidth: 15, //调整左侧彩条的大小。
itemHeight: 100,
y: "center",
textStyle: {
color: "#fff"
},
show: false
},
grid: {
left: "0",
right: "0",
top: "0",
bottom:'0'
},
geo: {
// 这个是重点配置区
map: "china", // 表示中国地图
roam: false,
label: {
normal: {
show: false, // 是否显示对应地名
textStyle: {
color: "rgba(0,0,0,0.4)"
}
},
emphasis: {//对应的鼠标悬浮效果
show: false
}
},
itemStyle: {
normal: {
areaColor: "#242B46", //地图本身的颜色
borderColor: "#151A30", //省份的边框颜色rgb(60,180,207)
borderWidth: 1, //省份的边框宽度
opacity: 0.8, //图形透明度
textStyle: {
color:"#242B46"
}
},
emphasis: {
areaColor: "#242B46", //高亮时候地图显示的颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 1,
opacity: 0.8,
borderColor: "#151A30"
}
}
},
series: [
{
type: "scatter",
markPoint: this.markPoint,
name: "", //series名称
coordinateSystem: "geo", // series坐标系类型
data: this.dataArea,
symbol: "circle",
symbolSize: [5, 5],
animation: false,
tooltip:this.tooltip,
silent: false
},
{
type: "heatmap",
markPoint: this.markPoint,
name: "", //series名称
coordinateSystem: "geo", // series坐标系类型
data: this.newArr,
symbol: "circle",
symbolSize: [5, 5],
animation: false,
tooltip:this.tooltip,
silent: false,
}
]
});
},
}
};
</script>
\ No newline at end of file
src/components/viitto/viittoData2.vue
View file @ 665eb77e
......@@ -237,11 +237,20 @@
font-family: PINGFANG REGULAR;
cursor: pointer;
}
.map-box-centerMpBaidu .map-box-centerMpBaidu-return{
position: absolute;
right: 40px;
background-color: #7691ee;
padding: 3px 18px;
border-radius: 15px;
color: white;
cursor: pointer;
}
</style>
<template>
<div class="viittoData2" :style="{zoom: zoom}">
<el-row class="viittoRow">
<el-col :span="5">
<div class="viittoData2" >
<el-row class="viittoRow" >
<el-col :span="5" :style="{zoom: zoom}">
<div class="clearfix" style="visibility:hidden">
<p class="tit yuefen-box">
<span>2019年</span>
......@@ -287,12 +296,17 @@
<div class="noCked2" @click="exChangeBoard()">交易统计</div>
<div class="ditu2">客户统计</div>
</div>
<div class="map-box" style="position:relative;left:-90px;top:-80px;z-index:1;">
<div class="map-box" v-show="centerMpShow" style="position:relative;left:0;top:0;z-index:1;">
<centerMp></centerMp>
<!-- <centerMpBaidu2 :newBaiduArr="newBaiduArr" v-if="newBaiduArr.length > 0"></centerMpBaidu2> -->
</div>
<div class="map-box map-box-centerMpBaidu" v-if="!centerMpShow" style="position:relative;z-index:1;">
<div class="map-box-centerMpBaidu-return" @click="centerMpShow = true, baiduMapData = []">返回</div>
<centerMpBaidu :baiduMapData="baiduMapData" v-if="baiduMapData.length > 0"></centerMpBaidu>
</div>
<el-row class="tonghangshu">
<el-col :span="12">
<p class="tj-tit">同行总数</p>
<el-col :span="10">
<p class="tj-tit">正式同行数</p>
<div class="tj-number">
<span>{{dataList.ClientNum}}</span>
<div>
......@@ -304,8 +318,8 @@
</div>
</div>
</el-col>
<el-col :span="12">
<p class="tj-tit">激活总数</p>
<el-col :span="10">
<p class="tj-tit">激活同行数</p>
<div class="tj-number">
<span>{{dataList.ClientEnableNum}}</span>
<div>
......@@ -317,9 +331,15 @@
</div>
</div>
</el-col>
<el-col :span="4">
<p class="tj-tit">非正式同行数</p>
<div class="tj-number">
<span>{{NotVisitCount}}</span>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="7">
<el-col :span="7" :style="{zoom: zoom}">
<div>
<p class="name">印象之旅数据看板</p>
</div>
......@@ -340,9 +360,13 @@
</template>
<script>
import centerMp from "../sellDashboard/map/viittoMap2";
import centerMpBaidu from "../sellDashboard/map/centerMpBaidu";
import centerMpBaidu2 from "../sellDashboard/map/centerMpBaidu2";
export default {
components: {
centerMp
centerMp,
centerMpBaidu,
centerMpBaidu2
},
data() {
return {
......@@ -357,7 +381,12 @@ export default {
ActiveArr:[],
//传递不活跃用户
InActiveArr:[],
zoom: 1
NotVisit: [],
NotVisitCount: 0,
zoom: 1,
centerMpShow: true,
baiduMapData: [],
newBaiduArr: [],
};
},
mounted() {
......@@ -371,8 +400,22 @@ export default {
setTimeout(() => {
this.exChangeBoard();
}, 300000);
let _this = this
this.bus.$on('send-centerMpShow', r=>{
_this.centerMpShow = false
_this.getCityData(r)
})
},
methods: {
getCityData(r){
this.apipost('financestatistics_post_GetB2BBoardClientAddressList', {ProvinceName: r}, res=>{
if(res.data.resultCode == 1) {
let data = res.data.data
let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit]
this.baiduMapData = baiduMapData
}
})
},
getdata(){
let url='http://47.96.23.199:5000/api/user/get_b2b_data'
let msg={
......@@ -523,29 +566,41 @@ export default {
},
//获取地址、
getB2BAddress(){
this.apipost("financestatistics_post_GetB2BBoardClientAddressList", {}, res => {
this.apipost("financestatistics_post_GetB2BBoardClientAddressList", {ProvinceName: ""}, res => {
//不经常活动的地址
let InActiveList = res.data.data.InActiveList;
let ActivateList = res.data.data.ActivateList;
let NotVisit = res.data.data.NotVisit;
this.InActiveArr = [];
this.NotVisitCount = res.data.data.NotVisitCount;
var obj = {};
for(var i =0; i<InActiveList.length; i++){
if(!obj[InActiveList[i].Address]&&InActiveList[i].District!=InActiveList[i].City){
// if(!obj[InActiveList[i].Address]&&InActiveList[i].District!=InActiveList[i].City){
this.InActiveArr.push(InActiveList[i]);
obj[InActiveList[i].Address] = true;
}
// }
}
//活动的
this.ActiveArr = [];
var obj2 = {};
for(var i =0; i<ActivateList.length; i++){
if(!obj2[ActivateList[i].Address]&&ActivateList[i].District!=ActivateList[i].City){
// if(!obj2[ActivateList[i].Address]&&ActivateList[i].District!=ActivateList[i].City){
this.ActiveArr.push(ActivateList[i]);
obj2[ActivateList[i].Address] = true;
// }
}
//非正式
this.NotVisit = [];
var obj3 = {};
for(var i =0; i<NotVisit.length; i++){
// if(!obj3[ActivateList[i].Address]&&ActivateList[i].District!=ActivateList[i].City){
this.NotVisit.push(NotVisit[i]);
obj2[NotVisit[i].Address] = true;
// }
}
if(res.data.resultCode==1){
var newArr = [this.InActiveArr,this.ActiveArr];
var newArr = [this.InActiveArr,this.ActiveArr, this.NotVisit];
this.newBaiduArr = [...this.InActiveArr,...this.ActiveArr, ...this.NotVisit];
//调用生成
this.bus.$emit("addpoint",newArr);
}else{
......
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