该博客介绍了如何利用Echarts库在React应用中展示宁波地区的地图，并详细展示了如何设置地图的各个区域高亮效果。通过Echarts的`registerMap`方法加载宁波地区的地理坐标数据，然后配置`geo`组件和`series`，实现区块的高亮显示，同时提供了点击事件处理，以动态改变区块颜色。
import React, { Component } from "react";
import Echarts from "echarts";
import "./middle-top.less";
import ningbo from "../../util/ningbo.json";
export default class middleTop extends Component {
componentDidMount() {
let ningboGeo = Echarts.init(document.getElementById("ningboGeo"));
Echarts.registerMap("ningbo", ningbo);
let geoCoordMap = {
海曙: [121.369698, 29.804452],
江北: [121.439282, 29.968361],
北仑: [121.931303, 29.854452],
杭湾: [121.253162, 30.352107],
鄞州: [121.658436, 29.731662],
象山: [121.877091, 29.470206],
宁海: [121.432606, 29.299836],
余姚: [121.206294, 30.045404],
慈溪: [121.448052, 30.177142],
奉化: [121.41089, 29.562348],
镇海: [121.739282, 29.968361],
};
let geoCoordMap1 = {
海曙: [121.239698, 29.804452],
江北: [121.529282, 29.928361],
北仑: [121.801303, 29.854452],
杭湾: [121.103162, 30.352107],
鄞州: [121.558436, 29.731662],
象山: [121.777091, 29.470206],
宁海: [121.332606, 29.299836],
余姚: [121.056294, 30.045404],
慈溪: [121.308052, 30.177142],
奉化: [121.28089, 29.562348],
镇海: [121.639282, 29.968361],
};
let regions = [
{
name: "海曙", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "江北", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "北仑", //区块名称
itemStyle: {
normal:
最低0.47元/天 解锁文章
扫一扫
6571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
