前段时间公司要求做一个项目分布的地图，UI设计的总体布局，后面我自己加的地图，适配整体风格
1、注册中国地图
先要引入echarts和中国地图的json文件
然后注册中国地图
import echarts from "echarts";
import china from "echarts/map/json/china.json"; //中国地图
echarts.registerMap("china", china);2、准备数据
-
省份的经纬度数据
var geoCoordMap = {
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
"辽宁": [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.611053, 43.828171],
"西藏": [91.117212, 29.646922],
"四川": [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],
"台湾": [120.702967, 24.123621],
'上海': [121.4648, 31.2891]
};-
有项目数据的省份信息
var toolTipData = [
{
name: '湖南',
value: 5,
areas: ["长沙", "株洲", "益阳"]
},
{
name: '安徽',
value: 3,
areas: ["合肥", "芜湖"]
},
{
name: '山东',
value: 80,
areas: ["济南", "青岛", "淄博", "烟台", "威海", "临沂"]
},
{
name: '四川',
value: 35,
areas: ["成都", "攀枝花", "乐山", "泸州"]
},
{
name: '云南',
value: 27,
areas: ["昆明", "玉溪", "丽江", "普洱", "临沧"]
},
{
name: '黑龙江',
value: 13,
areas: ["哈尔滨", "鹤岗", "黑河", "绥化", "大庆", "佳木斯"]
},
{
name: '甘肃',
value: 42,
areas: ["兰州", "嘉峪关", "天水", "酒泉"]
}
];3、用于地图上显示项目信息的tip数据方法
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};4、用于提示框那部分柱状图的主干和顶部的数据
-
柱状图主干
// 柱状体的主干
function lineData() {
return toolTipData.map((item) => {
return {
coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]
}
})
}-
柱状图顶部
// 柱状体的顶部
function scatterData() {
return toolTipData.map((item) => {
return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item]
})
}5、配置options
- 出现3D效果的关键在于geo数组，我叠了5层，每层的背景色不一样，并且每一层的垂直方向的位置的百分比也不一致才出现3D效果
- 想要换背景色或者减少层数，可以修改geo里面的数据，但是要保证每一层的地图大小一致
- 想要3D效果更明显可以修改layoutCenter，每一层的位置
- 并且我关闭了地图的缩放和平移
let option = {
backgroundColor: "#003366",
title: {
show: true,
text: "项目分布图",
x: 'center',
top: "10",
textStyle: {
color: "#fff",
fontFamily: "等线",
fontSize: 18,
},
},
tooltip: {
trigger: 'none',
formatter: function (params) {
if (typeof params.value[2] == 'undefined') {
var toolTiphtml = '';
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
}
}
console.log(toolTiphtml);
// console.log(convertData(data))
return toolTiphtml;
} else {
var toolTiphtml = '';
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
}
}
console.log(toolTiphtml);
return toolTiphtml;
}
},
backgroundColor: "#fff",
borderColor: "#333",
padding: [5, 10],
textStyle: {
color: "#333",
fontSize: "16"
}
},
geo: [{
layoutCenter: ['50%', '50%'],//位置
layoutSize: '180%',//大小
show: true,
map: mapName,
roam: false,
zoom: 0.65,
aspectScale: 1,
label: {
normal: {
show: false,
textStyle: {
color: '#fff'
}
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: "rgba(3,27,78,0.75)", // 0% 处的颜色
}, {
offset: 1,
color: "rgba(58,149,253,0.75)", // 50% 处的颜色
},],
global: true, // 缺省为 false
},
borderColor: "#c0f3fb",
borderWidth: 1,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
},
emphasis: {
areaColor: "rgba(0,254,233,0.6)",
// borderWidth: 0
}
}
}, {
type: "map",
map: mapName,
zlevel: -1,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "51%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor:"rgba(17, 149, 216,0.6)",
borderColor: "rgba(58,149,253,0.8)",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
}, {
type: "map",
map: mapName,
zlevel: -2,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "52%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(57, 132, 188,0.4)",
borderColor: "rgba(58,149,253,0.6)",
shadowColor: "rgba(65, 214, 255,1)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "transpercent",
},
},
}, {
type: "map",
map: mapName,
zlevel: -3,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "53%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(58,149,253,0.4)",
shadowColor: "rgba(58,149,253,1)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "transpercent",
},
},
}, {
type: "map",
map: mapName,
zlevel: -4,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "54%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 5,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(5,9,57,0.8)",
shadowColor: "rgba(29, 111, 165,0.8)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "rgba(5,21,35,0.1)",
},
},
},],
series: [
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 1, //长宽比
zoom: 0.65,
showLegendSymbol: true,
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: "120%"
},
},
emphasis: {
// show: false,
},
},
itemStyle: {
normal: {
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: "rgba(3,27,78,0.75)", // 0% 处的颜色
}, {
offset: 1,
color: "rgba(58,149,253,0.75)", // 50% 处的颜色
},],
global: true, // 缺省为 false
},
borderColor: "#fff",
borderWidth: 0.2,
},
},
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
animation: false,
markPoint: {
symbol: "none"
},
data: data,
},
//柱状体的主干
{
type: 'lines',
zlevel: 5,
effect: {
show: false,
symbolSize: 5 // 图标大小
},
lineStyle: {
width: 6, // 尾迹线条宽度
color: 'rgba(249, 105, 13, .6)',
opacity: 1, // 尾迹线条透明度
curveness: 0 // 尾迹线条曲直度
},
label: {
show: 0,
position: 'end',
formatter: '245'
},
silent: true,
data: lineData()
},
// 柱状体的顶部
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 5,
label: {
normal: {
show: true,
formatter: function (params) {
var name = params.data[2].name
var value = params.data[2].value
var text = `{tline|${name}} : {fline|${value}}个`
// var text = `{tline|项目个数} : {fline|${value}}`
return text;
},
color: '#fff',
rich: {
fline: {
// padding: [0, 25],
color: '#fff',
fontSize: 14,
fontWeight: 600
},
tline: {
// padding: [0, 27],
color: '#ABF8FF',
fontSize: 12,
},
}
},
emphasis: {
show: true
}
},
itemStyle: {
color: '#00FFF6',
opacity: 1
},
symbol: img2,
symbolSize: [110, 60],
symbolOffset: [0, -20],
z: 999,
data: scatterData(),
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(toolTipData),
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#00FFFF',
}
},
rippleEffect: {
scale: 5,
brushType: 'stroke',
},
label: {
normal: {
formatter: '{b}',
position: 'bottom',
show: false,
color: "#fff",
distance: 10,
},
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
normal: {
color: '#16ffff',
shadowBlur: 10,
shadowColor: '#16ffff',
},
opacity: 1
},
zlevel: 4,
},
],
};有什么不懂得可以给我留言
想要详细代码可以往下面这个地址，我发布的配置
https://www.isqqw.com/viewer?id=41694
扫一扫
3522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
