地图介绍

做可视化项目时需要3d的区域地图，在网上搜到ECharts社区的一个其他网站，上面有人家写好的图表demo，我是基于上面的一个3D地图修改配置项实现我需要的地图。下面是写好的示例：

区域地图，鼠标移上去自定义颜色，点击取消高亮黄色
地图范围是在阿里云数据可视化平台获取的
点击选择区域下载json格式的区域经纬度在图表里引入可以

echarts图表引入

通过npm引入

npm install echarts --save

页面引入图表

import * as echarts from ‘echarts’;
这一步相当于引入全部图表了，如果只用到一个图表可以按照官方的教程按需引入
EChart图表官网入口

react页面中引入使用

图表的3D效果，其实是两个地图的错位背景色差，形成的视觉上的3D；

import * as echarts from 'echarts';//引入全部图表
import React, { useEffect, useState, useLayoutEffect } from 'react'
import styles from './Home.module.css';
let myChart, optionexport default function Home() {// echarts地图useEffect(() => {myChart = echarts.init(document.getElementById('main'));myChart.on("click", clickFunc);myChart.showLoading();myChart.hideLoading();echarts.registerMap('HK', xinxiang);//这边引入区域数据文件myChart.setOption((option = {// backgroundColor: '#042636',tooltip: {},geo: {//底部背景地图的配置tooltip: {show: true},map: 'HK',aspectScale: 0.75, //长宽比zoom: 1.1,roam: false,itemStyle: {areaColor: '#15e3c9',shadowColor: 'rgba(0,243,255,0.6)',shadowOffsetX: 9,shadowOffsetY: 9,emphasis: {areaColor: '#2AB8FF',borderWidth: 0,// color: 'green',label: {show: false}}},},series: [{//上面覆盖的地图配置type: 'map',roam: false,label: {show: true,// color: "#FFFFFF",fontSize: 12,},itemStyle: {borderColor: '#05CDD8',borderWidth: 1,areaColor: '#15e3c9',emphasis: {show: false,// borderColor: '#fff',borderWidth: 0.5,areaColor: {x: 1000,y: 1000,x2: 1000,y2: 0,colorStops: [{offset: 0,color: 'rgb(46,229,206)', // 0% 处的颜色},{offset: 1,color: 'rgb(46,229,206)', // 50% 处的颜色},],global: true, // 缺省为 false},opacity: 1,},},zoom: 1.1,map: 'HK' //使用},{type: 'custom',coordinateSystem: 'geo',geoIndex: 0,zlevel: 1,data: [//这三个是标注点的经纬度[113.951509, 35.295743, 100],[114.077852, 35.060022, 30],[113.616426, 35.211636, 80],],itemStyle: {color: '#a6ff00'},renderItem(params, api) {const coord = api.coord([api.value(0, params.dataIndex),api.value(1, params.dataIndex)]);const circles = [];for (let i = 0; i < 5; i++) {circles.push({type: 'circle',shape: {cx: 0,cy: 0,r: 30},style: {stroke: 'red',fill: 'none',lineWidth: 2,stroke: '#1A73E8'},// Ripple animationkeyframeAnimation: {duration: 4000,loop: true,delay: (-i / 4) * 4000,keyframes: [{percent: 0,scaleX: 0,scaleY: 0,style: {opacity: 1}},{percent: 1,scaleX: 1,scaleY: 0.4,style: {opacity: 0}}]}});}return {type: 'group',x: coord[0],y: coord[1],children: [...circles,{type: 'path',shape: {d: 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z',x: -10,y: -35,width: 20,height: 40},style: {fill: '#00A8E8'},// Jump animation.keyframeAnimation: {duration: 1000,loop: true,delay: Math.random() * 1000,keyframes: [{y: -10,percent: 0.5,easing: 'cubicOut'},{y: 0,percent: 1,easing: 'bounceOut'}]}}]};}}],}));option && myChart.setOption(option);return () => {myChart.dispose();}}, [])
//echarts地图设置点击事件  点击时高亮关闭换成自定义颜色let nwo = ''function clickFunc(params) {console.log(params);myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex})if (params.dataIndex != nwo) {//没选中的取消高亮myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: nwo,});}nwo = params.dataIndex;// 获取鼠标点击的经纬度var pixelPoint = [params.event.offsetX, params.event.offsetY];var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);console.log(dataPoint);let longitude = parseInt(dataPoint[0]);//这是通过获取到的经纬度进行跳转页面，如果你也需要跳转，需要引入一下react 路由的useNavigate命名为nav来跳转；longitude == 113 && nav('/about');};return（<div style={{ height: "950px", width: "900px" }} id="main"></div>）
}

如果想要切换颜色可以去官方查看配置项进行更改，不过就是需要一点一点修改，官方每个图表的配置项还是挺更多的。

react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色相关推荐

【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦
最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同. ...
Echartds-gl (3D) 城市地图，点击事件，实现下钻等操作
在可视化项目中,实现鼠标点击那一块就拿到那一块的数据 let areaData=''; // 定义一个变量用于存储鼠标经过的区域data emphasis: {disabled: true, // ...
echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
你的数据可视化项目需要3D地图吗？这款数字孪生产品内含多种风格三维地图一键下载即可使用
如果你需要一张3D地图作为数据可视化的组成部分,那么这款叫作山海鲸可视化的软件绝对非常适合你. 接下来就让我们一起看看这款软件有何特色. 炫酷模板一键下载使用不仅是3D地图,山海鲸可视化的资源中心内 ...
＜可视化：Echarts 3D地图（map3D）组件案例 - 中山市举例＞
文章目录

react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色

react 可视化项目 ECharts 3D区域地图图表

地图介绍

echarts图表引入

react页面中引入使用

react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色相关推荐

最新文章

热门文章