You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
642 lines
21 KiB
642 lines
21 KiB
<template> |
|
<div id="chart_map" class="map_box"></div> |
|
</template> |
|
<script> |
|
import prefecture from "@/assets/json/prefecture.json"; |
|
|
|
// import 'echarts/map/js/china.js' // 引入中国地图数据 |
|
// import 'echarts/map/js/province/guangdong.js' |
|
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/ |
|
export default { |
|
props: { |
|
mapData:{ |
|
type:Array, |
|
}, |
|
datas:{ |
|
type:Array |
|
} |
|
}, |
|
data() { |
|
return { |
|
//下面是经纬度，用哪个地方的就填哪个地方的就可以 |
|
geoCoordMap1: { |
|
黑龙江: [127.9688, 45.368], |
|
内蒙古: [110.3467, 41.4899], |
|
吉林: [125.8154, 44.2584], |
|
辽宁: [123.1238, 42.1216], |
|
河北: [114.4995, 38.1006], |
|
天津: [117.4219, 39.4189], |
|
山西: [112.3352, 37.9413], |
|
陕西: [109.1162, 34.2004], |
|
甘肃: [103.5901, 36.3043], |
|
宁夏: [106.3586, 38.1775], |
|
青海: [101.4038, 36.8207], |
|
新疆: [87.9236, 43.5883], |
|
西藏: [91.11, 29.97], |
|
北京: [116.4551, 40.2539], |
|
四川: [103.9526, 30.7617], |
|
重庆: [108.384366, 30.439702], |
|
山东: [117.1582, 36.8701], |
|
河南: [113.4668, 34.6234], |
|
江苏: [118.8062, 31.9208], |
|
安徽: [117.29, 32.0581], |
|
湖北: [114.3896, 30.6628], |
|
浙江: [119.5313, 29.8773], |
|
福建: [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], |
|
上海: [121.4648, 31.2891], |
|
|
|
广州市: [113.264385, 23.129112], |
|
云浮市: [112.044439, 22.929801], |
|
韶关市: [113.597313, 24.811094], |
|
惠州市: [114.412599, 23.079404], |
|
深圳市: [114.085947, 22.547], |
|
汕头市: [116.708463, 23.37102], |
|
佛山市: [113.122717, 23.028762], |
|
江门市: [113.094942, 22.590431], |
|
湛江市: [110.364977, 21.274898], |
|
茂名市: [110.919229, 21.659751], |
|
肇庆市: [112.472529, 23.051546], |
|
梅州市: [116.117582, 24.299112], |
|
汕尾市: [115.364238, 22.774485], |
|
河源市: [114.697802, 23.746266], |
|
阳江市: [111.975107, 21.859222], |
|
东莞市: [113.746262, 23.046237], |
|
揭阳市: [116.355733, 23.543778], |
|
潮州市: [116.62286, 23.656324], |
|
珠海市: [113.553986, 22.224979], |
|
澄海市: [116.756092, 23.46596], |
|
清远市: [113.056892, 23.680117], |
|
中山市: [113.382391, 22.521113], |
|
}, |
|
geoCoordMap: { |
|
棋山镇: [118.895378, 35.877537], |
|
东莞镇: [118.972146, 35.991826], |
|
安庄镇: [118.815076, 35.812024], |
|
果庄乡: [118.769212, 35.77904], |
|
洛河镇: [118.833803, 35.753576], |
|
库山乡: [118.979909, 35.92304], |
|
招贤镇: [118.929219, 35.723248], |
|
桑园镇: [119.046012, 35.678553], |
|
阎庄街道: [118.834585, 35.670621], |
|
莒县电子商务公共服务中心: [118.901658, 35.60688], |
|
店子集街道: [118.914151, 35.5844], |
|
城阳街道: [118.82472, 35.583488], |
|
峤山镇: [118.946005, 35.657339], |
|
龙山镇: [119.003747, 35.515955], |
|
陵阳街道: [118.890825, 35.545056], |
|
寨里河镇: [118.931584, 35.469982], |
|
经济开发区: [118.851312, 35.626514], |
|
浮来山街道: [118.744789, 35.596051], |
|
刘官庄镇: [118.801123, 35.522202], |
|
长岭镇: [118.844125, 35.484677], |
|
小店镇: [118.81007, 35.422484], |
|
夏庄镇: [118.700674, 35.419525], |
|
}, |
|
datas1: [ |
|
[{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "安庄镇", value: 6992.6 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "果庄乡", value: 44045.49 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "洛河镇", value: 40689.64 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "招贤镇", value: 37659.78 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "桑园镇", value: 45180.97 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "阎庄镇", value: 5204.26 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "城阳街道", value: 21900.9 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "莒县经济开发区", value: 4918.26 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "峤山镇", value: 5881.84 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "浮来山镇", value: 4178.01 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "店子集镇", value: 2227.92 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "龙山镇", value: 2180.98 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "刘官庄镇", value: 9172.94 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "陵阳镇", value: 3368 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "长岭镇", value: 306.98 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "寨里河镇", value: 810.66 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "东莞镇", value: 542.2 }, { name: "莒县电子商务公共服务中心" }], |
|
[{ name: "小店镇", value: 256.38 }, { name: "莒县电子商务公共服务中心" }], |
|
], |
|
chardata1: [ |
|
{ name: "夏庄镇", value: 120057.34 }, |
|
{ name: "库山乡", value: 15477.48 }, |
|
{ name: "棋山镇", value: 131686.1 }, |
|
{ name: "安庄镇", value: 6992.6 }, |
|
{ name: "果庄乡", value: 44045.49 }, |
|
{ name: "洛河镇", value: 40689.64 }, |
|
{ name: "招贤镇", value: 37659.78 }, |
|
{ name: "桑园镇", value: 45180.97 }, |
|
{ name: "阎庄镇", value: 5204.26 }, |
|
{ name: "城阳街道", value: 21900.9 }, |
|
{ name: "莒县经济开发区", value: 4918.26 }, |
|
{ name: "峤山镇", value: 5881.84 }, |
|
{ name: "浮来山镇", value: 4178.01 }, |
|
{ name: "店子集镇", value: 2227.92 }, |
|
{ name: "龙山镇", value: 2180.98 }, |
|
{ name: "刘官庄镇", value: 9172.94 }, |
|
{ name: "陵阳镇", value: 3368 }, |
|
{ name: "长岭镇", value: 306.98 }, |
|
{ name: "寨里河镇", value: 810.66 }, |
|
{ name: "东莞镇", value: 542.2 }, |
|
{ name: "小店镇", value: 256.38 }, |
|
], |
|
myChart1: null, |
|
}; |
|
}, |
|
mounted() { |
|
this.createCharts1(); |
|
}, |
|
created() { |
|
// this.$nextTick(() =>{ |
|
// }) |
|
}, |
|
watch:{ |
|
mapData:{ |
|
handler(newValue,oldValue){ |
|
} |
|
} |
|
}, |
|
methods: { |
|
//修改echarts图表字体大小 |
|
fontSize(res){ |
|
const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; |
|
if (!clientWidth) return; |
|
let fontSize = clientWidth / 1920; |
|
return res*fontSize; |
|
}, |
|
createCharts1() { |
|
var convertData = (data) => { |
|
var res = []; |
|
for (var i = 0; i < data.length; i++) { |
|
var dataItem = data[i]; |
|
var fromCoord = this.geoCoordMap[dataItem[0].name]; |
|
var toCoord = this.geoCoordMap[dataItem[1].name]; |
|
if (fromCoord && toCoord) { |
|
res.push([ |
|
{ |
|
coord: toCoord, |
|
fromName: dataItem[0].name, |
|
value: dataItem[0].value, |
|
// name: dataItem[0].name, |
|
visualMap: false, |
|
|
|
}, |
|
{ |
|
coord: fromCoord, |
|
toName: dataItem[1].name, |
|
visualMap: false, |
|
|
|
}, |
|
]); |
|
} |
|
} |
|
return res; |
|
}; |
|
this.mapData = this.mapData.sort(function (a, b) { |
|
return b.value - a.value; |
|
}); |
|
this.mapData.map((item,index) =>{ |
|
if(index > 2){ |
|
this.mapData[index].label = {show:false} |
|
} |
|
}) |
|
var yMax = 0; |
|
for (var j = 0; j < this.mapData.length; j++) { |
|
if (yMax < this.mapData[j].value) { |
|
yMax = this.mapData[j].value; |
|
} |
|
} |
|
const series = []; |
|
var color = ['#000']; |
|
// 迁入地特殊显示//广东 |
|
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => { |
|
series.push( |
|
{ |
|
type: "lines", |
|
zlevel: 2, |
|
tooltip: { |
|
trigger: "item", |
|
formatter(params) { |
|
}, |
|
}, |
|
effect: { |
|
show: true, |
|
period: 10, // 箭头指向速度，值越小速度越快 |
|
trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重 |
|
symbol: "arrow", // 箭头图标 |
|
symbolSize: this.fontSize(6), // 图标大小 |
|
trailColor: '#ffd419', |
|
color: '#ffd419', //流动点颜色 |
|
}, |
|
lineStyle: { |
|
// normal: { |
|
color: "#ffd419", |
|
width: 1, // 尾迹线条宽度 |
|
opacity: 0.6, // 尾迹线条透明度 |
|
curveness: 0.2, // 尾迹线条曲直度 |
|
// }, |
|
}, |
|
data: convertData(item[1]), |
|
}, |
|
// { |
|
// type: "effectScatter", |
|
// coordinateSystem: "geo", |
|
// zlevel: 2, |
|
// rippleEffect: { |
|
// // 涟漪特效 |
|
// period: 4, // 动画时间，值越小速度越快 |
|
// brushType: "stroke", // 波纹绘制方式 stroke, fill |
|
// scale: 3, // 波纹圆环最大限制，值越大波纹越大 |
|
// }, |
|
// tooltip: { |
|
// trigger: "item", |
|
// formatter(params) { |
|
// return params.data.name + ':' + params.data.value[2] |
|
// }, |
|
// }, |
|
// label: { |
|
// normal: { |
|
// show: true, |
|
// position: "right", // 显示位置 |
|
// offset: [5, 0], // 偏移设置 |
|
// formatter(params) { |
|
// // 圆环显示文字 |
|
// return ''; |
|
// }, |
|
// fontSize: 13, |
|
// }, |
|
// emphasis: { |
|
// show: true, |
|
// }, |
|
// }, |
|
// symbol: "circle", |
|
// symbolSize: 3, |
|
// // itemStyle: { |
|
// // normal: { |
|
// // // show: false, |
|
// // color: "#000", |
|
// // }, |
|
// // }, |
|
// itemStyle: { |
|
// color: "#000" |
|
// }, |
|
// data: item[1].map((dataItem) => { |
|
// return { |
|
// visualMap: false, |
|
// name: dataItem[0].name, |
|
// value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]), |
|
// }; |
|
// }), |
|
// }, |
|
{ |
|
name: "数据名称", |
|
type: "map", |
|
zlevel: 0, |
|
mapType: "莒县", |
|
selectedMode: "multiple", |
|
tooltip: { |
|
trigger: "item", |
|
formatter: "{b}<br/>{c} (件)", |
|
textStyle:{ |
|
fontSize:this.fontSize(12) |
|
} |
|
}, |
|
aspectScale:'1.2', |
|
label: { |
|
show: true, |
|
textStyle:{ |
|
color:'#fff', |
|
fontSize:this.fontSize(12) |
|
} |
|
}, |
|
// itemStyle: { |
|
// normal: { |
|
// borderWidth: 1, |
|
// borderColor: "#0e94eb", |
|
// // label: { |
|
// // show: false, |
|
// // }, |
|
// }, |
|
// emphasis: { |
|
// // 也是选中样式 |
|
// borderWidth: 1, |
|
// borderColor: "#fff", |
|
// backgroundColor: "red", |
|
// label: { |
|
// show: false, |
|
// textStyle: { |
|
// color: "#fff", |
|
// }, |
|
// }, |
|
// }, |
|
// }, |
|
data: this.mapData, |
|
} |
|
); |
|
}); |
|
this.myChart1 = this.$echarts.init(document.getElementById("chart_map")); |
|
// this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps')); |
|
// this.$echarts.registerMap("china1", china1, {}); |
|
this.$echarts.registerMap("莒县", prefecture, {}); |
|
window.addEventListener("resize", () => { |
|
this.myChart1.resize(); |
|
}); |
|
var yMax = 0; |
|
for (var j = 0; j < this.mapData.length; j++) { |
|
if (yMax < this.mapData[j].value) { |
|
yMax = this.mapData[j].value; |
|
} |
|
} |
|
this.myChart1.hideLoading(); |
|
// this.myCharts1.hideLoading(); |
|
var option = { |
|
animation: true, |
|
tooltip: { |
|
show: true, |
|
}, |
|
visualMap: { |
|
min: 0, |
|
max: yMax, |
|
text: ["高", "低"], |
|
orient: "horizontal", |
|
itemWidth: this.fontSize(15), |
|
itemHeight: this.fontSize(150), |
|
right: 0, |
|
bottom: '0.6%', |
|
inRange: { |
|
color: ["#1e73dd", "#04296f"], |
|
}, |
|
textStyle: { |
|
color: "#fff", |
|
fontSize:this.fontSize(12) |
|
}, |
|
}, |
|
geo: { |
|
map: "莒县", |
|
// zoom: 1.2, |
|
label: { |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
aspectScale:'1.2', |
|
roam: false, // 是否允许缩放 |
|
itemStyle: { |
|
normal: { |
|
borderColor: "rgba(147, 235, 248, 1)", |
|
borderWidth: 1, |
|
areaColor: { |
|
type: "radial", |
|
x: 0.5, |
|
y: 0.5, |
|
r: 0.8, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "rgba(175,238,238, 0)", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(47,79,79, .1)", // 100% 处的颜色 |
|
}, |
|
], |
|
globalCoord: false, // 缺省为 false |
|
}, |
|
shadowColor: "rgba(128, 217, 248, 1)", |
|
// shadowColor: 'rgba(255, 255, 255, 1)', |
|
shadowOffsetX: -2, |
|
shadowOffsetY: 2, |
|
shadowBlur: 10, |
|
}, |
|
emphasis: { |
|
areaColor: "#389BB7", |
|
borderWidth: 0, |
|
}, |
|
}, |
|
}, |
|
series, |
|
}; |
|
|
|
this.myChart1.setOption(option); |
|
// this.myCharts1.setOption(option); |
|
}, |
|
//3d地图 |
|
render3DMap() { |
|
var convertData = (data) => { |
|
var res = []; |
|
for (var i = 0; i < data.length; i++) { |
|
var dataItem = data[i]; |
|
var fromCoord = this.geoCoordMap[dataItem[0].name]; |
|
var toCoord = this.geoCoordMap[dataItem[1].name]; |
|
if (fromCoord && toCoord) { |
|
res.push( |
|
{ |
|
fromName: dataItem[1].name, |
|
toName: dataItem[0].name, |
|
coords: [ |
|
toCoord, |
|
fromCoord, |
|
|
|
], |
|
visualMap: false, |
|
}, |
|
); |
|
} |
|
} |
|
return res; |
|
}; |
|
var seriesData = []; |
|
this.datas.map((item, i) => { |
|
seriesData.push( |
|
{ |
|
coords: [this.geoCoordMap[item[1].name], this.geoCoordMap[item[0].name]] |
|
} |
|
); |
|
}) |
|
var yMax = 0; |
|
for (var j = 0; j < this.mapData.length; j++) { |
|
if (yMax < this.mapData[j].value) { |
|
yMax = this.mapData[j].value; |
|
} |
|
} |
|
this.mapData = this.mapData.sort(function (a, b) { |
|
return b.value - a.value; |
|
}); |
|
this.mapData.map((item,index) =>{ |
|
if(index > 2){ |
|
this.mapData[index].label = {show:false} |
|
} |
|
}) |
|
|
|
let option = { |
|
// backgroundColor: '#000f1e', |
|
visualMap: { |
|
min: 0, |
|
max: yMax, |
|
text: ["高", "低"], |
|
orient: "horizontal", |
|
itemWidth: 15, |
|
itemHeight: 200, |
|
right: 0, |
|
bottom: 5, |
|
inRange: { |
|
color: ["#1e73dd", "#04296f"], |
|
}, |
|
textStyle: { |
|
color: "#fff", |
|
}, |
|
}, |
|
geo3D: { |
|
map: '莒县', |
|
show: false, |
|
zlevel: -10, |
|
top:-30, |
|
boxWidth: 200, |
|
boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度 |
|
regionHeight: 15, |
|
shading: 'lambert', |
|
viewControl: { |
|
projection: 'perspective', |
|
autoRotate: false, |
|
damping: 0, |
|
rotateSensitivity: 2, //旋转操作的灵敏度 |
|
rotateMouseButton: 'left', //旋转操作使用的鼠标按键 |
|
zoomSensitivity: 2, //缩放操作的灵敏度 |
|
panSensitivity: 2, //平移操作的灵敏度 |
|
panMouseButton: 'right', //平移操作使用的鼠标按键 |
|
|
|
distance: 350, //默认视角距离主体的距离 |
|
alpha: 40, // 地图版块垂直方向的角度 |
|
beta: 10, // 地图版块水平方向的角度 |
|
center: [0, 0, 0], |
|
|
|
animation: true, |
|
animationDurationUpdate: 1000, |
|
animationEasingUpdate: 'cubicInOut' |
|
}, |
|
}, |
|
|
|
series: [ |
|
{ |
|
type: 'map3D', |
|
map: '莒县', |
|
show: true, |
|
zlevel: 1, |
|
top:-30, |
|
boxWidth: 200, |
|
//boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度 |
|
regionHeight: 15, |
|
shading: 'lambert', |
|
label: { // 标签的相关设置 |
|
show: true, |
|
textStyle: { |
|
color: '#fff',// 字体背景色 |
|
} |
|
}, |
|
|
|
itemStyle: { |
|
color: '#025894', |
|
areaColor: '#025894', |
|
opacity: 1, |
|
borderWidth: 1, |
|
borderColor: '#1cccff' |
|
}, |
|
emphasis: { |
|
label: { |
|
show: false, |
|
|
|
textStyle: { |
|
color: '#fff', |
|
fontSize: 14, |
|
backgroundColor: 'transparent' // 字体背景色 |
|
} |
|
}, |
|
borderColor: '#333', |
|
borderWidth: 5, |
|
itemStyle: { |
|
color: '#025894', |
|
areaColor: '#025894', |
|
|
|
} |
|
}, |
|
light: { |
|
main: { |
|
|
|
shadow: true, |
|
shadowQuality: 'ultra', |
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
viewControl: { |
|
projection: 'perspective', |
|
autoRotate: false, |
|
damping: 0, |
|
rotateSensitivity: 2, //旋转操作的灵敏度 |
|
rotateMouseButton: 'left', //旋转操作使用的鼠标按键 |
|
zoomSensitivity: 2, //缩放操作的灵敏度 |
|
panSensitivity: 2, //平移操作的灵敏度 |
|
panMouseButton: 'right', //平移操作使用的鼠标按键 |
|
|
|
distance: 350, //默认视角距离主体的距离 |
|
alpha: 40, // 地图版块垂直方向的角度 |
|
beta: 10, // 地图版块水平方向的角度 |
|
center: [0, 0, 0], |
|
|
|
animation: true, |
|
animationDurationUpdate: 1000, |
|
animationEasingUpdate: 'cubicInOut' |
|
}, |
|
|
|
data:this.mapData |
|
}, |
|
// 线 和 点 |
|
{ |
|
type: 'lines3D', |
|
coordinateSystem: 'geo3D', |
|
zlevel: 2, //设置这个才会有轨迹线的小尾巴 |
|
polyline: false, |
|
effect: { |
|
show: true, |
|
period: 10, |
|
trailLength: 0.1, |
|
trailColor: '#ffd419', |
|
color: '#fff', //流动点颜色 |
|
symbol: 'arrow', |
|
symbolSize: 6 |
|
}, |
|
lineStyle: { |
|
normal: { |
|
color: '#ffd419', //线条颜色 |
|
width: 2, |
|
curveness: 0.5, |
|
shadowColor: '#fff', |
|
} |
|
}, |
|
blendMode: 'lighter', |
|
data: convertData(this.datas), |
|
|
|
}, |
|
|
|
|
|
] |
|
}; |
|
this.myChart.setOption(option); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style scoped> |
|
.map_box { |
|
width: 100%; |
|
height: 100%; |
|
/* background: rgba(117,221,255,1); */ |
|
} |
|
</style>
|
|
|