最近接到一个需求是做一个中国地图 样式大概是这样的
在这里插入图片描述
需求是要去掉南海，但是由于csdn地图校验，图片如果没有南海会出现图片违规情况，要实现去掉南海，百度查阅相关资料都是说要这样，这个方法的大概意思就是：在地图中对特定的区域配置样式。穿梭车
regions: [
{
name: "南海诸岛",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
},
},
},
},
],
经实现还是不行，因为可能是因为我用的china.json的问题，只有一部分小的那个南海群岛去掉了，但是地图鸡脚那个地方的依旧显示。百度后需要替换json数据，穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。
代码
首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本
npm install echarts --save 或者
cnpm install echarts --save
引入成功后
import * as echarts from 'echarts'
import china from '../public/china.json';
echarts.registerMap('china', china);
app.config.globalProperties.$echarts = echarts
//注意如果不显示的话，需要给myMap增加固定的高和宽
<div id="myMap" ref="myMap" class="border"></div>
<script>
import {
defineComponent,
ref,
getCurrentInstance,
onMounted,
} from "vue";
export default defineComponent({
setup(){
let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({
backgroundColor: "#FFFFFF",
geo: {
map: "china",
roam: false,
zoom: 1.2,
scaleLimit: { min: 0, max: 3 }, // 缩放级别
regions: [
{
name: "南海诸岛",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
},
},
},
},
],
itemStyle: {
areaColor: "#BEDAEE", //默认的地图板块颜色
borderWidth: 1,
borderColor: "#009ce0",
},
},
title: {
text: "资源池分步",
x: "center",
y: 20,
},
tooltip: {
trigger: "item",
},
//配置属性
series: [
{
name: "数据",
type: "map",
mapType: "china",
roam: false,
geoIndex: 0,
label: {
normal: {
show: false, //省份名称,
},
emphasis: {
show: false,
},
},
data: [
{ name: "北京", value: Math.round(Math.random() * 500) },
{ name: "天津", value: Math.round(Math.random() * 500) },
{ name: "上海", value: Math.round(Math.random() * 500) },
{ name: "重庆", value: Math.round(Math.random() * 500) },
{ name: "河北", value: Math.round(Math.random() * 500) },
{ name: "河南", value: Math.round(Math.random() * 500) },
{ name: "云南", value: Math.round(Math.random() * 500) },
{ name: "辽宁", value: Math.round(Math.random() * 500) },
{ name: "黑龙江", value: Math.round(Math.random() * 500) },
{ name: "湖南", value: Math.round(Math.random() * 500) },
{ name: "安徽", value: Math.round(Math.random() * 500) },
{ name: "山东", value: Math.round(Math.random() * 500) },
{ name: "新疆", value: Math.round(Math.random() * 500) },
{ name: "江苏", value: Math.round(Math.random() * 500) },
{ name: "浙江", value: Math.round(Math.random() * 500) },
{ name: "江西", value: Math.round(Math.random() * 500) },
{ name: "湖北", value: Math.round(Math.random() * 500) },
{ name: "广西", value: Math.round(Math.random() * 500) },
{ name: "甘肃", value: Math.round(Math.random() * 500) },
{ name: "山西", value: Math.round(Math.random() * 500) },
{ name: "内蒙古", value: Math.round(Math.random() * 500) },
{ name: "陕西", value: Math.round(Math.random() * 500) },
{ name: "吉林", value: Math.round(Math.random() * 500) },
{ name: "福建", value: Math.round(Math.random() * 500) },
{ name: "贵州", value: Math.round(Math.random() * 500) },
{ name: "广东", value: Math.round(Math.random() * 500) },
{ name: "青海", value: Math.round(Math.random() * 500) },
{ name: "西藏", value: Math.round(Math.random() * 500) },
{ name: "四川", value: Math.round(Math.random() * 500) },
{ name: "宁夏", value: Math.round(Math.random() * 500) },
{ name: "海南", value: Math.round(Math.random() * 500) },
{ name: "台湾", value: Math.round(Math.random() * 500) },
{ name: "香港", value: Math.round(Math.random() * 500) },
{ name: "澳门", value: Math.round(Math.random() * 500) },
], //数据
},
],
});
onMounted(() => {
console.log(proxy, chart.value, mapOption.value);
chart.value = proxy.$echarts.init(
document.getElementById("myMap"),
"macarons"
);
chart.value.setOption(mapOption.value);
// this.chart.on("click", function(params) {
// //此点击事件也可以做为其他echarts图表的点击 事件
// alert(params.name);
// console.info(params);
// });
});
}
})
</script>
还有一张地图是这样的
在这里插入图片描述
这里边也去掉了南海，如果你的需要增加，请按照最上边修改China.json,并修改下边regions的南海诸岛的样式
每个地图板块的颜色不一样。这个百度我没找到方法，所以就自己看文档找到了一个实现方法，如果有更好的方法实现方法，可以共同交流。
实现方法见下
//记住一定要给这个id加宽高
<div id="NationView" ref="NationView"></div>
<script>
import {
defineComponent,
ref,
getCurrentInstance,
onMounted,
} from "vue";
export default defineComponent({
setup(){
let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({
backgroundColor: "#FFFFFF",
geo: {
map: "china",
roam: false,
zoom: 1.2,
scaleLimit: { min: 0, max: 3 }, // 缩放级别
regions: [
{
name: "南海诸岛",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
},
},
},
},
{
name: "新疆",
value: Math.round(Math.random() * 500),
itemStyle: {
areaColor: "#7995B1",
},
},
{
name: "北京",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#55718C" },
},
{
name: "天津",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#9AAFC3" },
},
{
name: "上海",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7894B0" },
},
{
name: "重庆",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7A96B1" },
},
{
name: "河北",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#A0B1C7" },
},
{
name: "河南",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7995B1" },
},
{
name: "云南",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#B4C2D2" },
},
{
name: "辽宁",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#98ABC3" },
},
{
name: "黑龙江",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7B96B1" },
},
{
name: "湖南",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#F3F5F7" },
},
{
name: "安徽",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#A4B5C5" },
},
{
name: "山东",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#98ADC3" },
},
{
name: "江苏",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#BDC9D9" },
},
{
name: "浙江",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#93A9BE" },
},
{
name: "江西",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#BBC7D6" },
},
{
name: "湖北",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#9DB2C7" },
},
{
name: "广西",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#D1DBE5" },
},
{
name: "甘肃",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#91A7BE" },
},
{
name: "山西",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#ADBBCA" },
},
{
name: "内蒙古",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#98ADC3" },
},
{
name: "陕西",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#96ACC2" },
},
{
name: "吉林",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#819AB4" },
},
{
name: "福建",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#90A9C0" },
},
{
name: "贵州",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#97ABC1" },
},
{
name: "广东",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#EEEDEA" },
},
{
name: "青海",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#8CA3BB" },
},
{
name: "西藏",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#859EB8" },
},
{
name: "四川",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7B97B2" },
},
{
name: "宁夏",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#B5C2D3" },
},
{
name: "海南",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#ADBCCC" },
},
{
name: "台湾",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#DFE0EE" },
},
{
name: "香港",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7995B1" },
},
{
name: "澳门",
value: Math.round(Math.random() * 500),
itemStyle: { areaColor: "#7995B1" },
},
],
itemStyle: {
//areaColor: "#BEDAEE", //默认的地图板块颜色
borderWidth: 1,
borderColor: "#009ce0",
},
},
title: {
text: "资源池分步",
x: "center",
y: 20,
},
tooltip: {
trigger: "item",
},
//配置属性
series: [
{
name: "数据",
type: "map",
mapType: "china",
roam: false,
geoIndex: 0,
label: {
normal: {
show: false, //省份名称,
},
emphasis: {
show: false,
},
},
//data 这里的data删除了，因为设置了geoIndex之后，这里边的itemStyle就不生效了
},
],
});
onMounted(() => {
console.log(proxy, chart.value, mapOption.value);
chart.value = proxy.$echarts.init(
document.getElementById("myMap"),
"macarons"
);
chart.value.setOption(mapOption.value);
// this.chart.on("click", function(params) {
// //此点击事件也可以做为其他echarts图表的点击 事件
// alert(params.name);
// console.info(params);
// });
//鼠标移入地图不变黄色
chart.value.on("mouseover", function() {
chart.value.dispatchAction({
type: "downplay",
});
});
});
}
})
</script>
