地图比普通的echarts多了一步 需要注册，就是要引入某个地区的json文件
各个地区的json文件链接 数据可视化平台(各个地区的json文件)
示例1
<template>
<div :id="id" style="width: 100%;height: 100%;">111</div>
</template>
<script setup>
import * as echarts from "echarts";
import { fontChart } from "@/utils/echartPxToRem.js";
import chinaJson from "@/assets/map/100000.json"; // 引入某个地区所需要的json文件
import { onMounted } from "vue";
const props = defineProps({
id: {
type: String,
required: true,
},
});
let charts = "";
onMounted(() => {
loadMap();
});
const loadMap = () => {
charts = echarts.init(document.getElementById(props.id));
echarts.registerMap("china", chinaJson); // 注册
let option = {
// backgroundColor: 'rgb(1,30,64)', // 背景
title: {
show: false,
//标题样式
text: "ECharts 中国地图",
x: "center",
textStyle: {
fontSize: fontChart(18),
color: "red",
},
},
tooltip: {
show: false,
//这里设置提示框
trigger: "item", //数据项图形触发
backgroundColor: "red", //提示框浮层的背景颜色。
//字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
formatter: "地区：{b}<br/>模拟数据：{c}",
},
visualMap: {
//视觉映射组件
show: false,
top: "bottom",
left: "left",
min: 10,
max: 500000,
text: ["High", "Low"],
realtime: false, //拖拽时，是否实时更新
calculable: true, //是否显示拖拽用的手柄
inRange: {
color: ["red", "yellow", "blue"],
},
},
series: [
{
name: "china",
type: "map",
mapType: "china",
roam: false, //是否开启鼠标缩放和平移漫游
zoom: 1, //地图缩放比例,默认为1
itemStyle: {
//地图区域的多边形 图形样式
normal: {
// borderColor: 'yellow',
// areaColor: 'red',
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(0, 84, 148, 1)", // 0% 处的颜色
// color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0, 84, 148, .8)", // 100% 处的颜色
// color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
//是图形在默认状态下的样式
label: {
show: false, //是否显示标签
textStyle: {
color: "black",
},
},
},
},
emphasis: {
//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label: { show: true },
itemStyle: {
areaColor: "red",
},
},
top: "8%", //组件距离容器的距离
// left: '10%',
data: [
// 数据的展示（颜色） 一般搭配视觉映射组件visualMap
// { name: "北京", value: 275005 },
// { name: "四川省", value: 480000 },
// { name: "青海省", value: 400000 },
// { name: "内蒙古自治区", value: 10000 },
],
},
],
};
charts.setOption(option);
window.addEventListener("resize", selfAdaption);
};
// 自适应
function selfAdaption() {
if (!charts) return;
charts.resize();
loadMap();
}
</script>示例2
<template>
<div :id="id" style="width: 100%; height: 100%">111</div>
</template>
<script setup>
import * as echarts from "echarts";
import { fontChart } from "@/utils/echartPxToRem.js";
import chinaJson from "@/assets/map/100000.json"; // 引入某个地区所需要的json文件
import { onMounted } from "vue";
const props = defineProps({
id: {
type: String,
required: true,
},
});
let charts = "";
onMounted(() => {
loadMap();
});
const loadMap = () => {
charts = echarts.init(document.getElementById(props.id));
echarts.registerMap("china", chinaJson); // 注册
let option = {
tooltip: {
show: true,
textStyle: {
fontSize: fontChart(12),
},
formatter: (params) => {
if (params.data)
// return params.name + "：" + params.data["showValue"];
return "哈哈哈";
},
},
geo: {
map: 'china',
roam: false,
layoutCenter: ["50%", "50%"],
layoutSize: "100%",
show: true,
zoom: 1.3,
// itemStyle: {
// normal: {
// // areaColor: "#15e3c9",
// shadowColor: "rgba(0,243,255,0.6)",
// shadowOffsetX: 9,
// shadowOffsetY: 9,
// areaColor: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: "rgba(66, 229, 119, 1)", // 0% 处的颜色
// // color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
// },
// {
// offset: 1,
// color: "rgba(66, 229, 119, .8)", // 100% 处的颜色
// // color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
// },
// ],
// globalCoord: false, // 缺省为 false
// },
// },
// emphasis: {
// areaColor: "#2AB8FF",
// borderWidth: 0,
// color: "green",
// label: {
// show: false,
// },
// },
// },
itemStyle: {
normal: {
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(66, 229, 119, 1)", // 0% 处的颜色
// color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
},
{
offset: 1,
color: "rgba(66, 229, 119, .8)", // 100% 处的颜色
// color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
borderWidth: fontChart(0), //设置外层边框
borderColor: "#2157aa", //外层边框颜色
shadowOffsetX: "10", //阴影X偏移量
shadowOffsetY: "5", //阴影Y偏移量
shadowColor: "#00b9c5", // 阴影颜色
shadowBlur: 1,
opacity: "1", //阴影图形透明度
},
emphasis: {
show: false,
areaColor: "red",
},
},
},
series: [
{
name: "MAP",
type: "map",
mapType: 'china',
layoutCenter: ["40%", "38%"], // position位置
zoom: 1.2,
selectedMode: "single", //是否允许选中多个区域
regions: [
{
name: "南海诸岛",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
},
},
},
},
],
label: {
normal: {
show: true,
fontSize: fontChart(13),
color: "#fff",
},
emphasis: {
show: true,
textStyle: { color: "#FFFFFF" },
},
},
itemStyle: {
normal: {
areaColor: "rgba(1, 77, 139,.6)", //地图区域颜色
borderColor: "#05c9d5", //地图边框颜色
borderWidth: "0",
},
emphasis: {
// areaColor: "#005497",
areaColor: "#0f72fc", // 鼠标移入区域颜色
},
},
data: [
{
value: 100,
// longitude: 106.881862,
// latitude: 29.805519
},
],
},
// {
// type: "effectScatter",
// coordinateSystem: "geo",
// showEffectOn: "render",
// zlevel: 1,
// rippleEffect: {
// period: 6,
// scale: 3,
// // brushType: 'fill'
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: function (params) {
// //圆环显示文字
// return params.data.name;
// },
// fontSize: 16,
// position: "right",
// offset: [15, 0],
// color: "#fff",
// show: true,
// },
// },
// itemStyle: {
// normal: {
// color: "#fff",
// shadowBlur: 20,
// },
// },
// symbolSize: 10,
// data: [
// {
// value: [118.8062, 31.9208],
// itemStyle:{color:'red'},
// name:"浙江能源"
// },
// {
// value: [119.09648,40.058726],
// itemStyle:{
// color:'red'
// },
// name:"北方港"
// },
// {
// value: [100.846362,55.254671],
// itemStyle:{
// color:'red'
// },
// name:"俄罗斯"
// }
// ],
// }
{
type: "scatter", //配置显示方式为用户自定义
coordinateSystem: "geo",
data: [
// 点
{
value: [100.846362, 55.254671],
itemStyle: {
emphasis: {
shadowBlur: 20,
shadowOffsetX: 20,
shadowColor: "rgba(1, 210, 255, 0.5)",
labelLine: { show: true },
label: {
show: true,
formatter: "{b} : {c} ({d}%)",
},
},
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#00d3ff", // 0% 处的颜色
},
{
offset: 1,
color: "#00d3ff", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
name: "dian-name",
},
],
// data: [
// {value: [106.881862, 29.805519],
// name: '显示信息'}
// ],
tooltip: {
// 提示框组件
show: true, // 显示提示框组件
trigger: "item", // 触发类型
triggerOn: "mousemove", // 出发条件
formatter: function (params) {
console.log(params);
return "params";
},
},
},
],
};
charts.setOption(option);
window.addEventListener("resize", selfAdaption);
};
// 自适应
function selfAdaption() {
if (!charts) return;
charts.resize();
loadMap();
}
</script>
