因为香港特别行政区和澳门特别行政区的名字特别长又需要显示全名
所以显示在地图上会挤在一起,所以根据天地图的坐标来加了两个引导线(echarts5以下!!!)
var fullName = {
北京: '北京市',
天津: '天津市',
河北: '河北省',
山西: '山西省',
内蒙古: '内蒙古自治区',
辽宁: '辽宁省',
吉林: '吉林省',
黑龙江: '黑龙江省',
江苏: '江苏省',
浙江: '浙江省',
安徽: '安徽省',
福建: '福建省',
江西: '江西省',
山东: '山东省',
河南: '河南省',
湖北: '湖北省',
湖南: '湖南省',
广东: '广东省',
广西: '广西壮族自治区',
海南: '海南省',
四川: '四川省',
贵州: '贵州省',
云南: '云南省',
西藏: '西藏自治区',
陕西: '陕西省',
甘肃: '甘肃省',
青海: '青海省',
宁夏: '宁夏回族自治区',
新疆: '新疆维吾尔自治区',
香港: '香港特别行政区',
澳门: '澳门特别行政区',
台湾: '台湾省',
};
option = {
title: {
show: false,
text: '',
subtext: '',
left: 'center',
textStyle: {
color: '#121212',
fontSize: 16,
fontWeight: 'normal',
fontFamily: 'Source Han Sans CN',
},
subtextStyle: {
color: '#121212',
fontSize: 13,
fontWeight: 'normal',
fontFamily: 'Source Han Sans CN',
},
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}: {c}家',
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'top',
iconStyle: {
normal: {
color: '#fff',
},
},
feature: {
mark: {
// '辅助线开关'
show: true,
},
saveAsImage: {
//保存为图片。
show: true, //是否显示该工具。
type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
name: 'pic1', //保存的文件名称,默认使用 title.text 作为名称
backgroundColor: '#ffffff', //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
title: '中国地图',
pixelRatio: 1, //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
},
// dataView: {readOnly: false},
},
},
visualMap: {
min: 0,
max: 100,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#ebdecb', '#8aa87d', '#7d97a8']
}
},
geo: {
map: 'china',
roam: true,
zoom: 1.6,
center: [104.46, 35.92],
label: {
normal: {
show: true,
formatter: function (param) {
var reName = '';
if (
param.name == '香港' ||
param.name == '澳门'
) {
reName = '';
} else {
if (fullName[param.name]) {
reName = fullName[param.name];
} else {
reName = '';
}
}
return reName;
},
textStyle: {
color: '#000',
fontSize: 12,
},
},
emphasis: {
show: true,
textStyle: {
color: '#640000',
fontSize: 13,
},
},
},
itemStyle: {
normal: {
// borderColor: 'rgba(147, 235, 248, 1)',
borderColor: '#9c978b',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.2,
y: 0.2,
r: 0.9,
colorStops: [
{
offset: 0,
color: 'rgba(255, 255, 255, 0)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 255, 255, .1)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
// shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: '#043563',
// shadowOffsetX: -2,
// shadowOffsetY: 2,
// shadowBlur: 10
},
emphasis: {
areaColor: '#ffdf33',
borderWidth: 0,
},
},
},
visualMap: {
min: 0,
max: 150,
right: '0',
bottom: '2px',
text: ['高', '低'],
calculable: true,
// seriesIndex: [1],
inRange: {
// color: ['#D2EAFF', '#177FE8']
color: ['#ebdecb', '#8aa87d', '#7d97a8'],
},
show: true,
textStyle: {
color: ['#DCE5F5'],
},
},
series: [
{
name: 'china',
type: 'map',
geoIndex: 0, // 关联到上面的 geo 配置
data: [],
},
{
name: '引导线',
type: 'lines',
zlevel: 3,
lineStyle: {
normal: {
color: 'rgb(36, 36, 36)',
width: 1,
type: 'solid',
},
},
data: [
{
coords: [
[114.16, 22.28],
[116.87, 22.18],
], // 香港引导线
label: {
show: true,
position: 'end',
formatter: '香港特别行政区',
color: '#000',
},
},
{
coords: [
[113.55, 22.14],
[113.27, 21.05],
], // 澳门引导线
label: {
show: true,
position: 'end',
formatter: '澳门特别行政区',
color: '#000',
},
},
],
},
]
}