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 @@ ...@@ -5,8 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="renderer" content="webkit"> <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/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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>数据可视化</title> <title>数据可视化</title>
</head> </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> <template>
<div class="echarts" :style="{height:'110%',width:'110%'}"> <div class="echarts" :style="{height:'100%',width:'100%'}">
<div :style="{height:'110%',width:'110%'}" ref="myEchart"></div> <div :style="{height:'100%',width:'100%'}" ref="myEchart"></div>
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts"; import echarts from "echarts";
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据 import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
const https = require('https')
export default { export default {
name: "echarts", name: "echarts",
props: ["userJson"], props: ["userJson"],
...@@ -17,6 +18,7 @@ export default { ...@@ -17,6 +18,7 @@ export default {
ActivateList:[], ActivateList:[],
//不活跃人数 //不活跃人数
InActivateList:[], InActivateList:[],
NotVisit: [],
myChart:{}, myChart:{},
//SourceData:[] //SourceData:[]
}; };
...@@ -26,6 +28,7 @@ export default { ...@@ -26,6 +28,7 @@ export default {
//this.SourceData=newArr; //this.SourceData=newArr;
this.addPoint(newArr) this.addPoint(newArr)
}) })
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
...@@ -36,19 +39,35 @@ export default { ...@@ -36,19 +39,35 @@ export default {
}, },
methods: { 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){ addPoint(newArr){
var that = this; var that = this;
that.InActivateList = [];//不活动 that.InActivateList = [];//不活动
that.ActivateList = [];//活动 that.ActivateList = [];//活动
that.NotVisit = [];//非正式
newArr[0].forEach(x => { newArr[0].forEach(x => {
that.InActivateList.push({ that.InActivateList.push({
name:x.City, name: '正式同行',
value:[x.Lng,x.Lat] value:[x.Lng,x.Lat]
}) })
}); });
newArr[1].forEach(x => { newArr[1].forEach(x => {
that.ActivateList.push({ 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] value:[x.Lng,x.Lat]
}) })
}); });
...@@ -141,9 +160,28 @@ export default { ...@@ -141,9 +160,28 @@ export default {
color: '#2a73fe' 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:{ 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 @@ ...@@ -237,11 +237,20 @@
font-family: PINGFANG REGULAR; font-family: PINGFANG REGULAR;
cursor: pointer; 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> </style>
<template> <template>
<div class="viittoData2" :style="{zoom: zoom}"> <div class="viittoData2" >
<el-row class="viittoRow"> <el-row class="viittoRow" >
<el-col :span="5"> <el-col :span="5" :style="{zoom: zoom}">
<div class="clearfix" style="visibility:hidden"> <div class="clearfix" style="visibility:hidden">
<p class="tit yuefen-box"> <p class="tit yuefen-box">
<span>2019年</span> <span>2019年</span>
...@@ -287,12 +296,17 @@ ...@@ -287,12 +296,17 @@
<div class="noCked2" @click="exChangeBoard()">交易统计</div> <div class="noCked2" @click="exChangeBoard()">交易统计</div>
<div class="ditu2">客户统计</div> <div class="ditu2">客户统计</div>
</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> <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> </div>
<el-row class="tonghangshu"> <el-row class="tonghangshu">
<el-col :span="12"> <el-col :span="10">
<p class="tj-tit">同行总数</p> <p class="tj-tit">正式同行数</p>
<div class="tj-number"> <div class="tj-number">
<span>{{dataList.ClientNum}}</span> <span>{{dataList.ClientNum}}</span>
<div> <div>
...@@ -304,8 +318,8 @@ ...@@ -304,8 +318,8 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="10">
<p class="tj-tit">激活总数</p> <p class="tj-tit">激活同行数</p>
<div class="tj-number"> <div class="tj-number">
<span>{{dataList.ClientEnableNum}}</span> <span>{{dataList.ClientEnableNum}}</span>
<div> <div>
...@@ -317,9 +331,15 @@ ...@@ -317,9 +331,15 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="4">
<p class="tj-tit">非正式同行数</p>
<div class="tj-number">
<span>{{NotVisitCount}}</span>
</div>
</el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7" :style="{zoom: zoom}">
<div> <div>
<p class="name">印象之旅数据看板</p> <p class="name">印象之旅数据看板</p>
</div> </div>
...@@ -340,9 +360,13 @@ ...@@ -340,9 +360,13 @@
</template> </template>
<script> <script>
import centerMp from "../sellDashboard/map/viittoMap2"; import centerMp from "../sellDashboard/map/viittoMap2";
import centerMpBaidu from "../sellDashboard/map/centerMpBaidu";
import centerMpBaidu2 from "../sellDashboard/map/centerMpBaidu2";
export default { export default {
components: { components: {
centerMp centerMp,
centerMpBaidu,
centerMpBaidu2
}, },
data() { data() {
return { return {
...@@ -357,7 +381,12 @@ export default { ...@@ -357,7 +381,12 @@ export default {
ActiveArr:[], ActiveArr:[],
//传递不活跃用户 //传递不活跃用户
InActiveArr:[], InActiveArr:[],
zoom: 1 NotVisit: [],
NotVisitCount: 0,
zoom: 1,
centerMpShow: true,
baiduMapData: [],
newBaiduArr: [],
}; };
}, },
mounted() { mounted() {
...@@ -371,8 +400,22 @@ export default { ...@@ -371,8 +400,22 @@ export default {
setTimeout(() => { setTimeout(() => {
this.exChangeBoard(); this.exChangeBoard();
}, 300000); }, 300000);
let _this = this
this.bus.$on('send-centerMpShow', r=>{
_this.centerMpShow = false
_this.getCityData(r)
})
}, },
methods: { 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(){ getdata(){
let url='http://47.96.23.199:5000/api/user/get_b2b_data' let url='http://47.96.23.199:5000/api/user/get_b2b_data'
let msg={ let msg={
...@@ -523,29 +566,41 @@ export default { ...@@ -523,29 +566,41 @@ export default {
}, },
//获取地址、 //获取地址、
getB2BAddress(){ getB2BAddress(){
this.apipost("financestatistics_post_GetB2BBoardClientAddressList", {}, res => { this.apipost("financestatistics_post_GetB2BBoardClientAddressList", {ProvinceName: ""}, res => {
//不经常活动的地址 //不经常活动的地址
let InActiveList = res.data.data.InActiveList; let InActiveList = res.data.data.InActiveList;
let ActivateList = res.data.data.ActivateList; let ActivateList = res.data.data.ActivateList;
let NotVisit = res.data.data.NotVisit;
this.InActiveArr = []; this.InActiveArr = [];
this.NotVisitCount = res.data.data.NotVisitCount;
var obj = {}; var obj = {};
for(var i =0; i<InActiveList.length; i++){ 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]); this.InActiveArr.push(InActiveList[i]);
obj[InActiveList[i].Address] = true; obj[InActiveList[i].Address] = true;
} // }
} }
//活动的 //活动的
this.ActiveArr = []; this.ActiveArr = [];
var obj2 = {}; var obj2 = {};
for(var i =0; i<ActivateList.length; i++){ 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]); this.ActiveArr.push(ActivateList[i]);
obj2[ActivateList[i].Address] = true; 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){ 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); this.bus.$emit("addpoint",newArr);
}else{ }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