下载地图文件:
DataV.GeoAtlas地理小工具系列
范围选择器右侧行政区划范围中输入需要选择的省份或地市,选择自己想要的数据格式,这里选择了geojson格式,点右侧的蓝色按钮复制到浏览器地址栏中,打开的geojson文件内容右键另存为json文件即可。
实现代码:
init() { // 画布初始化 if (myChart) { myChart.dispose(); // 销毁实例 } let mapDom = document.getElementById("map"); myChart = echarts.init(mapDom); // 隐藏数据刷新动画 myChart.hideLoading(); // 注册可用的地图 echarts.registerMap("jiangsu", jiangsuJson); let option = { tooltip: { triggerOn: "mousemove", // 鼠标移动时触发 }, visualMap: { show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在 type: "continuous", // 类型为连续型视觉映射 range: [0, 100], // 定义数据范围,不同数值大小显示为不同的颜色 calculable: false, // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围) inRange: { // 定义在选中范围中的视觉元素 color: ["#00ffff", "#f36a00"] }, }, // 地理坐标系组件 geo: { map: "jiangsu", aspectScale: 0.75, //长宽比 zoom: 1.2, roam: false, // 滚轮 放大缩小 label: { emphasis: { show: false, }, }, itemStyle: { normal: { areaColor: { // 默认区块颜色 type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#BFFFDD", // 0% 处的颜色 }, { offset: 1, color: "#FFFFFF", // 100% 处的颜色 }, ], }, shadowColor: "#FFFFFF", // 青色 shadowBlur: 0, shadowOffsetX: 10, shadowOffsetY: 10, borderWidth: 0, }, }, }, series: [ { id: "map", type: "map", // 图表类型 map: "jiangsu", // 已注册的地图 aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 roam: false, label: { normal: { show: true, textStyle: { color: "#333", }, }, emphasis: { textStyle: { color: "#ece8ef", }, }, }, select: { // 选中状态下的多边形和标签样式 itemStyle: { borderColor: "#E167F5", borderWidth: 1, areaColor: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#3AD7FF", // 0% 处的颜色 }, { offset: 1, color: "#0FE017", // 100% 处的颜色 }, ], }, }, label: { color: "#ece8ef", }, }, itemStyle: { // 地图区域的多边形 图形样式 normal: { borderColor: "#0FE017", borderWidth: 0.4, areaColor: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#DFFBFD", // 0% 处的颜色 }, { offset: 1, color: "#FFFFFF", // 100% 处的颜色 }, ], }, }, emphasis: { areaColor: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#D7FFA3", // 0% 处的颜色 }, { offset: 1, color: "#70FE01", // 100% 处的颜色 }, ], }, borderColor: "#1F567E", borderWidth: 1, shadowColor: "rgba(150, 225, 245, 0.7)", shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, }, }, animation: false, data: [ { name: '南京', value: 9 }, { name: '宿迁', value: 12 }, ], }, ], }; // 将配置应用到地图上 myChart.setOption(option); document.getElementById("map").removeEventListener; window.addEventListener("resize", () => { myChart.resize(); }); }