我在第一篇可视化地图中，有一些基础介绍，本篇文章就是多展示一些效果，大家可以按需获取。
先直接上效果图
这里的配置项有用到
1、通过geo展示多层地图，这样可以像上图所示，通过错位有了一些3D效果；
2、北京的特殊图标展示通过scatter类型实现；
3、区域散点图effectScatter类型；
4、有方向流动的线，lines类型；
5、也是通过scatter实现了黄色icon的效果；
6、series最后一组类型lines，实现文本框；
let box = document.querySelector('.box');
$.get('./chinas.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
let e = echarts.init(box);
let data = [
{
name: "郑州",
value: [114.14, 34.16, 100]
},
{
name: "深圳",
value: [114.271522, 22.753644]
},
{
name: "重庆",
value: [106.54, 29.59]
},
{
name: "浙江",
value: [120.19, 30.26]
}
];
let LableData = [
{
name: "郑州",
coords: [
[114.14, 34.16],
[120.24, 46.55]
], // 线条位置[开始位置，结束位置]
value: [10.21, 1.20]
},
{
name: "深圳",
coords: [
[114.271522, 22.753644],
[118.24, 18.55]
], // 线条位置[开始位置，结束位置]
value: [10.21, 1.20]
},
{
name: "重庆",
coords: [
[106.54, 29.59],
[100.24, 40.55]
], // 线条位置[开始位置，结束位置]
value: [10.21, 1.20]
},
{
name: "浙江",
coords: [
[120.19, 30.26],
[128.24, 35.55]
], // 线条位置[开始位置，结束位置]
value: [10.21, 1.20]
},
];
let option = {
backgroundColor: '#000f1e',
geo: {
map: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.5,
},
emphasis: {
areaColor: '#276fce'
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
}
},
label: {
show: false,
color: '#FFFFFF',
fontSize: 12,
}
}]
},
series: [
// 常规地图
{
type: 'map',
mapType: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
itemStyle: {
normal: {
areaColor: '#0c274b',
borderColor: '#1cccff',
borderWidth: 1.5
},
emphasis: {
areaColor: '#02102b',
label: {
color: "#fff"
}
}
}
},
{ //首都星图标
name: '首都',
type: 'scatter',
coordinateSystem: 'geo',
data: [{
name: '首都',
value: [116.24, 41.55, 100],
},],
symbol: 'diamond',
symbolSize: 20,
itemStyle: {
color: "#f00"
},
label: {
normal: {
show: false,
color: "#f00"
},
emphasis: {
show: false
}
}
},
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
symbolSize: 10,
rippleEffect: { //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#b3e2f2',
fontWeight: "bold",
fontSize: 18
}
},
data: data,
itemStyle: { //坐标点颜色
normal: {
show: true,
color: 'green',
shadowBlur: 20,
shadowColor: '#fff'
},
emphasis: {
areaColor: '#f00'
}
},
},
// 线 和 点
{
type: 'lines',
zlevel: 1, //设置这个才会有轨迹线的小尾巴
polyline: true,
effect: {
show: true,
period: 10,
trailLength: 0.7,
color: '#fff', //流动点颜色
symbol: 'arrow',
symbolSize: 6
},
lineStyle: {
normal: {
color: '#fff', //线条颜色
width: 1.5,
curveness: 0.2,
shadowColor: '#fff',
}
},
data: [
{
fromName: "深圳",
toName: "郑州",
coords: [
[114.271522, 22.753644],
[114.14, 34.16],
[114.271522, 22.753644]
]
},
{
fromName: "深圳",
toName: "浙江",
coords: [
[114.271522, 22.753644],
[120.19, 30.26],
[114.271522, 22.753644]
]
},
{
fromName: "深圳",
toName: "重庆",
coords: [
[114.271522, 22.753644],
[106.54, 29.59],
[114.271522, 22.753644]
]
}
],
},
// 黄色icon
{
name: 'lable',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50, 50],
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter(value) {
return value.data.value[2]
}
}
},
itemStyle: {
normal: {
color: '#D8BC37', //标志颜色
}
},
data: data,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
},
// 文本框，白色圆点
{
type: 'lines',
zlevel: 3,
symbol: 'circle',
symbolSize: [5, 5],
color: '#ff8003',
opacity: 1,
label: {
show: true,
padding: [10, 20],
color: '#fff',
backgroundColor: "#1a3961",
borderColor: '#aee9fb',
borderWidth: 3,
borderRadius: 6,
formatter(params)
let arr = [params.name, "上行：" + params.value[1] + "G/s", "下行：" + params.value[0] + "G/s"];
return arr.join("\n")
},
textStyle: {
align: 'left',
lineHeight: 20
}
/* normal: {
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter (value){
return value.data.value[2]
},
}*/
},
lineStyle: {
type: 'solid',
color: '#fff',
width: 1,
opacity: 1,
},
data: LableData,
},
]
};
e.setOption(option);
});
