废话不多说直接上图片与代码:
1593867638(1).jpg
import echarts from 'ecahrts'; // 引入echarts文件
import "./china" // 引入中国js文件
const chartsChina = (that, el, chartData, Fun = () =>{} ) => {
that.chart = echarts.init(document.getElementById(el);
that.chart.on('click', function(params) { // 通过ecahrts的点击事件,将点击的信息传给函数 Fun;
Fun(params);
}
chartData = [
{
name:"广东省",
coord: [ 113.12244, 23.009505 ],
value: 1
}
]
const convertData = function(data) { // 根据数据设置地图圆点的颜色
let res = [];
for(var i = 0; i < data.length; i++) {
res.push({
name: data[i].name;
value: data[i].coord, // 坐标
data: data[i].value,
itemStyle: {
normal:{ color: data[i].value == "1" ? "#0090FF" : data[i].value == "2" ? "#E59800" : "#F24949" }
}
});
}
return res;
}
option = {
backgroundColor: '#000',
title: {
top: 20,
text: '中国地图',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
legend: {
show: false
},
tooltip: {
show: false
},
geo: {
map: 'china',
aspectScale: 0.75, //长宽比
roam: false,
show: true,
silent: true,
zlevel: 1,
top: '10%',
left: '20%',
regions: [{ // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
name: "广东省", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
itemStyle: {
normal: {
opacity: 1, // 透明度
borderColor: "#fff", // 省份界线颜色
borderWidth: 3, // 省份界线的宽度
areaColor: 'red', // 整个省份的颜色
},
},
}],
itemStyle: { // 设置地图的样式
normal: {
// areaColor: '#013C62', // 地图样色
// shadowColor: '#182f68', // 阴影
// shadowOffsetX: 0,
// shadowOffsetY: 25
borderColor: "#000404",
borderWidth:3,
areaColor: {
type: 'linear-gradient',
x: 1000,
y: 600,
x2: 1000,
y2: 0,
colorStops:[{
offset: 0,
color: '#0A155D' // 0%处颜色
},{
offset: 1,
color: '#007Ac1'
}],
global: true // 缺省为 false
},
opacity:1,
},
emphasis: {
show: false,
areaColor: '#FF8420'
}
}
},
series: [
{
type: 'map',
map: 'china',
roam: false,
show: true,
silent: true,
top: '11%',
left: '20.5%',
aspectScale: .75, //长宽比
label: {
emphasis: {
textStyle: {
color: '#fff',
show: true
}
}
},
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 0)",
borderWidth:0,
areaColor: {
x: 1000,
y: 600,
x2: 1000,
y2: 0,
colorStops:[{
offset: 0,
color: '#082248' // 0%处颜色
},{
offset: 1,
color: '#082248'
}],
global: true // 缺省为 false
},
opacity:1,
},
emphasis: {
areaColor: '#0882248',
show: false,
}
},
z: 1,
},
{
type: 'scatter',
name: 'light',
coordinateSystem: 'geo',
zlevel: 2,
symbolSize: 20,
data: convertData(chartData),
itemStyle: {
normal: {
color: '#ffff',
}
},
label: {
normal: {
fontSize: 15,
fontWeight: 'bolder',
formatter(params) {
return (params.name + ':' + params.data.data)
},
position: 'right',
show: false
},
emphasis: {
show: true
}
}
}
]
};
data: convertData(chartData)
}
]
};
}
在这里插入图片描述
其实省份界线的样色特别的容易修改,只需要修改 geo.regions 下的属性即可,但是有一个问题,就是regions的设置 只能在geo中设置,series中不可以设置,所以用到地图立体效果的时候还需要注意层级的设置,z:1 的层级小于 zlevel:1,如果不需要设置立体地图,则不需要注意这一点,可以直接设置 .
如果这篇文章对您有所帮助,请帮忙点一个小小的赞,如果大家有更好的解决方法或者有任何疑问都可以私信我,
菜鸟一枚,如果有不对的地方,请在下面留言,我会尽快改正!!
