react echarts中国地图的实现

安装echarts

npm install echarts --save

import { useEffect } from "react"
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import china from "../utils/china.json"
import "./map.css";const  Map=()=>{var myChart ;useEffect(()=>{loadingChina()},[])const loadingChina = () => {mapOption("china", china)  //初始化-创建中国地图}const convertData = () => {let res = [{name: "南海诸岛",value: 0,itemStyle: {normal: {opacity: 0,label: {show: false}}}}]return res}const mapOption=(mapName,data)=>{if (myChart !== null && myChart !== "" && myChart !== undefined) {myChart.dispose();//销毁（如果存在需要销毁，点击时会创建新的图表对象）}myChart = echarts.init(document.querySelector('.map'));//初始化echarts.registerMap(mapName, data)var option = {geo: {map: mapName,geoIndex: 0,label: {emphasis: {show: true,color: '#fff' //地区显示文字样式}},roam: true,zoom: 1.2,   //设置地图放大regions: convertData(),//去掉南海诸岛itemStyle: {normal: {areaColor: 'rgb(30,55,106)', //地区填充颜色borderColor: 'rgba(128,208,255,.8)',//边界线颜色shadowColor: 'rgb(20,50,97)',//阴影颜色shadowBlur: 20,//模糊大小borderWidth: 1.8,},emphasis: {  //选中样式areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#0AFBFF'}, {offset: 1, color: '#0157C9'}],global: false},}}}};myChart.setOption(option); //绘图//点击画布内还是画布外myChart.getZr().on('click', params => {if (params.target) {myChart.on('click', echartsMapClick);//增加点击事件}                   })}const echartsMapClick=()=>{//点击地图模块逻辑事件}return (<div className="map"></div>)
}
export default Map

//地区json文件下载地址

http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

在此基础上要实现点击地区- 某地区放大单独显示功能

1.引入某地区的json文件
2.在点击事件中，再次绘图 mapOption(“sichuan”, json文件)
PS：一般地图下面都有几段线，在绘制时都要求去掉，引入没有下面几段线的json文件即可

react echarts中国地图的实现相关推荐

echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来先注册地图 import * as echarts from 'echarts'; import { d ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...

react echarts中国地图的实现

react echarts中国地图的实现相关推荐

最新文章

热门文章