安装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.6105&lng=104.999&zoom=4 http://datav.aliyun.com/tools/atlas/#&lat=30.0188&lng=106.881&zoom=3.5 在此基础上要实现点击地区- 某地区放大单独显示功能
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/178553.html原文链接：https://javaforall.net
