|
|
|
|
<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>
|
