Echarts渲染行政区划，实现聚焦高亮交互

首先需要准备行政区划的JSON数据，可以在DataV获取省市区的JSON数据。

最终效果图

渲染地图

建立一个地图容器，注意要给宽高

<!-- 地图容器 -->
<div id="map"></div>

请求JSON数据，渲染地图

$(function() {var mapChart = null// 请求地图JSONfunction getGeo(level, adcode) {const url = `../map/${level}/${adcode}.json`;$.get(url, function (geoJson) {var seriesData = geoJson.features.map(function (item) {return {name: item.properties.name,value: item.properties.adcode,level: item.properties.level,childrenNum: item.properties?.childrenNum,parentCode: item.properties.parent.adcode,};});renderMap(seriesData, geoJson);});}getGeo("city", "52");// 渲染地图function renderMap(seriesData, geoJson) {echarts.registerMap("geo", { geoJSON: geoJson });mapChart = echarts.init(document.getElementById('map'))mapChart.setOption({// 阴影层，让地图有点立体效果geo: [{map: "geo",aspectScale: 0.75,zoom: 1.12,silent: true,itemStyle: {areaColor: '#072329',shadowColor: '#062025',shadowBlur: 0,shadowOffsetX: 2,shadowOffsetY: 6,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},},],series: [{type: "map",map: "geo",selectedMode: false,itemStyle: {borderWidth: 1,borderColor: "#417079",areaColor: {type: "linear",x: 0,y: 800,x2: 200,y2: 0,colorStops: [{offset: 0.5,color: "#37616b",},{offset: 1,color: "#0c2a31",},],global: true,},},zoom: 1.1,label: {show: false,color: "#fff",},emphasis: {focus: true,label: {show: false,},itemStyle: {areaColor: "#4b8491",},},data: seriesData,}]});}
})

绘制标注信息

标注信息是通过Echarts的散点绘制的，通过自定义图片实现

// 在请求JSON函数中，处理散点数据
function getGeo(level, adcode) {const url = `../map/${level}/${adcode}.json`;$.get(url, function (geoJson) {// 散点数据const coverData = geoJson.features.map((item) => {const { properties } = item;return {name: properties.name,value: properties.centroid,peopleNum: 10000,income: 50000};});var seriesData = geoJson.features.map(function (item) {return {name: item.properties.name,value: item.properties.adcode,level: item.properties.level,childrenNum: item.properties?.childrenNum,parentCode: item.properties.parent.adcode,};});renderMap(seriesData, geoJson, coverData);});
}// 渲染地图中加入散点数据
function renderMap(seriesData, geoJson, coverData) {echarts.registerMap("geo", { geoJSON: geoJson });mapChart = echarts.init(document.getElementById('map'))mapChart.setOption({// 阴影层geo: [{map: "geo",aspectScale: 0.75,zoom: 1.12,silent: true,itemStyle: {areaColor: '#072329',shadowColor: '#062025',shadowBlur: 0,shadowOffsetX: 2,shadowOffsetY: 6,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},},],series: [{type: "map",map: "geo",selectedMode: false,itemStyle: {borderWidth: 1,borderColor: "#417079",areaColor: {type: "linear",x: 0,y: 800,x2: 200,y2: 0,colorStops: [{offset: 0.5,color: "#37616b",},{offset: 1,color: "#0c2a31",},],global: true,},},zoom: 1.1,label: {show: false,color: "#fff",},emphasis: {focus: true,label: {show: false,},itemStyle: {areaColor: "#4b8491",},},data: seriesData,},{type: "scatter",coordinateSystem: "geo",symbol: function (value, params) {return "image://imgs/mark-line.png"; // 自定义图片},symbolSize: [38, 56],symbolRotate: -4,label: {show: true,offset: [-2, 0],position: "top",backgroundColor: "#204047",padding: [4, 8],borderRadius: 4,formatter: (param) => {return ["{name|" + param.name + "}","{line|}","{text|村民人数："+ param.data.peopleNum +"人}","{text|年均收入："+ param.data.income +"元}",].join("\n");},// 富文本给label添加样式rich: {name: {color: "#18f6df",padding: [0, 0, 4, 0],},line: {width: "100%",height: 0,borderWidth: 1,borderColor: "#18f6df",},text: {color: "#fff",padding: [6, 0, 0, 0],},},},emphasis: {focus: true,blurScope: "global",},z: 3,data: coverData,},],});

地图块和标注高亮

只设置focus时发现，只有地图块会有聚焦效果，这里需要通过echarts的dispatchAction方法来实现

mapChart.on("mouseover", function (param) {mapChart.dispatchAction({type: "highlight",name: param.name,});
});
mapChart.on("mouseout", function (param) {mapChart.dispatchAction({type: "downplay",});
});

这里感觉立体效果还是差点意思，我给地图设置了一点旋转

#map {transform: rotateX(32deg) rotateY(-6deg) scale(1.125);
}

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>map</title><style>* {margin: 0;padding: 0;}body {background-color: #000;overflow: hidden;}html, body, #map {width: 100%;height: 100%;}#map {transform: rotateX(32deg) rotateY(-6deg) scale(1.125);}</style>
</head>
<body><div id="map"></div><script src="./js/jqueyr.min.js"></script><script src="./js/echarts.min.js"></script><script>$(function() {var mapChart = nullfunction getGeo(level, adcode) {const url = `../map/${level}/${adcode}.json`;$.get(url, function (geoJson) {// 散点数据const coverData = geoJson.features.map((item) => {const { properties } = item;return {name: properties.name,value: properties.centroid,// 显示数据peopleNum: 10000,income: 50000};});var seriesData = geoJson.features.map(function (item) {return {name: item.properties.name,value: item.properties.adcode,level: item.properties.level,childrenNum: item.properties?.childrenNum,parentCode: item.properties.parent.adcode,};});renderMap(seriesData, geoJson, coverData);});}getGeo("city", "52");// 渲染地图function renderMap(seriesData, geoJson, coverData) {echarts.registerMap("geo", { geoJSON: geoJson });mapChart = echarts.init(document.getElementById('map'))mapChart.setOption({// 阴影层geo: [{map: "geo",aspectScale: 0.75,zoom: 1.12,silent: true,itemStyle: {areaColor: '#072329',shadowColor: '#062025',shadowBlur: 0,shadowOffsetX: 2,shadowOffsetY: 6,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},},],series: [{type: "map",map: "geo",selectedMode: false,itemStyle: {borderWidth: 1,borderColor: "#417079",areaColor: {type: "linear",x: 0,y: 800,x2: 200,y2: 0,colorStops: [{offset: 0.5,color: "#37616b",},{offset: 1,color: "#0c2a31",},],global: true,},},zoom: 1.1,label: {show: false,color: "#fff",},emphasis: {focus: true,label: {show: false,},itemStyle: {areaColor: "#4b8491",},},data: seriesData,},{type: "scatter",coordinateSystem: "geo",symbol: function (value, params) {return "image://imgs/mark-line.png";},symbolSize: [38, 56],symbolRotate: -4,label: {show: true,offset: [-2, 0],position: "top",backgroundColor: "#204047",padding: [4, 8],borderRadius: 4,formatter: (param) => {console.log('param: ', param);return ["{name|" + param.name + "}","{line|}","{text|村民人数："+ param.data.peopleNum +"人}","{text|年均收入："+ param.data.income +"元}",].join("\n");},rich: {name: {color: "#18f6df",padding: [0, 0, 4, 0],},line: {width: "100%",height: 0,borderWidth: 1,borderColor: "#18f6df",},text: {color: "#fff",padding: [6, 0, 0, 0],},},},emphasis: {focus: true,blurScope: "global",},z: 3,data: coverData,},],});// 联动高亮mapChart.on("mouseover", function (param) {mapChart.dispatchAction({type: "highlight",name: param.name,});});mapChart.on("mouseout", function (param) {mapChart.dispatchAction({type: "downplay",});});}})</script>
</body>
</html>

Echarts渲染行政区划，实现聚焦高亮交互相关推荐

echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...
echarts渲染一个风向图
今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑 1.风向图标方向修改以及设置 var ownData = echarts.util ...
聚焦语音交互，引爆智能硬件——暨讯飞语音云沙龙杭州站成功举办
5月16日,"让世界聆听我们的声音"--2014年语音云开发者沙龙暨"聚焦语音交互引爆智能硬件"在杭州贝塔咖啡成功举办. 自2013年8月以来,由讯飞语音云举办 ...
Echarts渲染男女比例象形图
Echarts渲染男女比例象形图示例: 源码: 这里Echarts的demo应用场景为普通html,需引入echarts.js文件 js: var loadEcharts13 = function ...
可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
Mysql+Echarts+Python+Flask实现前后端交互及数据可视化
前言社区版Pycharm实现python+flask+echarts+Mysql实现简单的前后端交互. 新手入门,记录经验,欢迎交流. 一.首先检测Flask框架是否成功? 首先,在你的项目下中安装 ...
echarts 渲染航线图
1.需求:根据数据渲染航线图通过vue+echarts 实现过程中遇到bug:切换数据时,浏览器出现崩溃,原因是将echarts 实例定义在了vue的data 中需要将echarts 实例定在s ...
Echarts渲染选择SVG /canvas
最近在做大屏数据展示的时候遇到这样的问题:echarts绘制出来的图表transform缩放页面的时候,图表不显示,参考线上竞品产品发现有svg格式,于是乎测试了下确实可以,于是乎分享出来,希望遇到同 ...
html post请求渲染,FastAPI框架入门基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置...
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...

Echarts渲染行政区划，实现聚焦高亮交互

Echarts渲染行政区划，实现聚焦高亮交互相关推荐

最新文章

热门文章