react+echarts做各个省份地图

找了好长时间没找到现成的案例，最后找到了各个省份的json文件遍联想到了上篇写的中国地图那个案例https://blog.csdn.net/qq_42281649/article/details/91489475
嵌套了一下，效果实现了，再次记录一下，希望可以帮到需要的小伙伴。

下图是各个省份的json,也包括js文件。

另附百度网盘地址链接：https://pan.baidu.com/s/1qAt7UzjFBzkx5p0KMj2KLw
提取码：qfi9

记录一下代码
Hainan.js

import React, {Component} from 'react'; import './App.css'; import echarts from 'echarts'; import geoJson from './hainan.json'; import {geoCoordMap,provienceData} from "./geo";class Hainan extends Component {constructor(props) {super(props);this.state = {}}componentDidMount() {this.initalECharts();}initalECharts() {const provienceData = [{name: '海口市', area: 'pink', type: 'areaCenterCity'},{name: '三亚市', area: 'green', type: 'areaCenterCity'},{name: '文昌市', area: 'blue', type: 'areaCenterCity'},{name: '定安县', area: 'green', type: 'areaCenterCity'},{name: '琼海市', area: 'pink', type: 'areaCenterCity'},{name: '万宁市', area: 'blue', type: 'areaCenterCity'},{name: '屯昌县', area: 'yellow', type: 'areaCenterCity'},{name: '澄迈县', area: 'blue', type: 'areaCenterCity'},{name: '儋州市', area: 'yellow', type: 'areaCenterCity'},{name: '临高县', area: 'pink', type: 'areaCenterCity'},{name: '保亭黎族苗族自治县', area: 'pink', type: 'areaCenterCity'},{name: '白沙黎族自治县', area: 'pink', type: 'areaCenterCity'},{name: '琼中黎族苗族自治县', area: 'green', type: 'areaCenterCity'},{name: '陵水黎族自治县', area: 'yellow', type: 'areaCenterCity'},{name: '乐东黎族自治县', area: 'blue', type: 'areaCenterCity'},{name: '东方市', area: 'yellow', type: 'areaCenterCity'},{name: '昌江黎族自治县', area: 'green', type: 'areaCenterCity'},{name: '五指山市', area: 'yellow', type: 'areaCenterCity'},{name: '三沙市', area: '东北大区', type: 'areaCenterCity'},{name: '西沙群岛', area: '东北大区', type: 'areaCenterCity'},{name: '南沙群岛', area: '东北大区', type: 'areaCenterCity'},{name: '中沙群岛', area: '东北大区', type: 'areaCenterCity'}];/*for(let item of provienceData) {if (item.area === '1') {alert(1);}}*/echarts.registerMap('hainan', geoJson);for(let item of provienceData){if(item.area === 'blue'){item.itemStyle = {normal: {areaColor: "#0CE4E4",},emphasis: {areaColor: "#0CE4E4",}}}else if(item.area === 'pink'){item.itemStyle = {normal: {areaColor: "#F4C3CB",},emphasis: {areaColor: "#F4C3CB",}}}else if(item.area === 'green'){item.itemStyle = {normal: {areaColor: "#8EF48E",},emphasis: {areaColor: "#8EF48E",}}}else if(item.area === 'yellow'){item.itemStyle = {normal: {areaColor: "#F7F7B5",},emphasis: {areaColor: "#F7F7B5",}}}else {item.itemStyle = {normal: {areaColor: "red",},emphasis: {areaColor: "red",}}}}//初始化ECharts实例const myChart = echarts.init(document.getElementById('mainMap'));myChart.setOption({geo: {map: 'hainan',roam: false,zoom: 1.2,tooltip: {show: false,       //不显示提示标签},label: {normal: {show: false,//显示省份标签textStyle:{color:"#c71585"}//省份标签字体颜色},emphasis: {//对应的鼠标悬浮效果show: false,textStyle:{color:"#800080"}}},itemStyle: {normal: {borderWidth: .5,//区域边框宽度borderColor: '#fff',//区域边框颜色areaColor:"#ffefd5",//区域颜色label:{show:false}},emphasis: {show: false,borderWidth: .5,borderColor: '#4b0082',areaColor: "#ffdead",}},},series: [{type: 'scatter',  //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）//'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）coordinateSystem: 'geo',data: this.convertData(provienceData),symbolSize: 10,symbolRotate: 40,label: {normal: {formatter: '{b}',position: 'bottom',show: true},emphasis: {show: false}},tooltip: {show: false,       //不显示提示标签formatter: '{c}',      //提示标签格式backgroundColor: "#fff",//提示标签背景颜色borderColor: '#ccc',borderWidth: 5,textStyle:{color:"#000"} //提示标签字体颜色},itemStyle: {normal: {color: 'black'}}},{type: 'map',mapType: 'hainan',roam: false,zoom: 1.2,tooltip: {show: false,       //不显示提示标签},label: {normal: {show: false    //显示省份标签},emphasis: {show: false,}},itemStyle: {//正常样式normal: {borderWidth: .2,      //区域边框宽度borderColor: '#fff',  //区域边框颜色label:{show:false}},//鼠标事件区块样式emphasis: {show: false,}},data: provienceData}],});myChart.on('click',function (params) {alert(params.name);/*const { dispatch } = this.props;dispatch({type: 'overview/select',payload: params.name,})*/});}convertData(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].area),area: data[i].area,type: data[i].type,});}}console.log(res);return res;}render() {return (<div className="App"><div id="mainMap" style={{width:'100vm',height:'90vh'}} ></div></div>);}}export default Hainan;

App.css

.App {text-align: center; }.App-logo {animation: App-logo-spin infinite 20s linear;height: 80px; }.App-header {background-color: #222;height: 150px;padding: 20px;color: white; }.App-title {font-size: 1.5em; }.App-intro {font-size: large; }@keyframes App-logo-spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); } }

gen.js(各个地区的经纬度可百度查询)

const provienceData = [];const geoCoordMap = {'三亚': [109.511909, 18.252847],'海口': [110.35, 20.02],'文昌': [110.72, 19.61],'定安': [110.31, 19.68],'琼海': [110.46, 19.25],'万宁': [110.39, 18.8],'屯昌': [110.1, 19.36],'澄迈': [110, 19.75],'儋县': [109.57, 19.52],'临高': [109.69, 19.91],'保亭': [109.7, 18.64],'白沙': [109.44, 19.23],'琼中': [109.83, 19.05],'陵水': [110.02, 18.48],'崖县': [109.5, 18.25],'乐东': [109.17, 18.73],'东方': [108.64, 19.09],'昌江': [109.03, 19.25], };export {provienceData, geoCoordMap}

效果图：

效果图有点丑还没有调试。

react+echarts做各个省份地图相关推荐

echarts国内各省份地图js/json文件，全球地图js文件/汉化，字符云js文件
echarts国内各省份地图js/json文件,全球地图js文件/汉化,字符云js文件下载链接世界地图中国地图国内各省份地图字符云下载链接 https://github.com/FuHan ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...
Echarts 绘制单独省份地图
1. 文档介绍采用node端http-server作为服务端,引用第三方插件Echarts 2.阅读对象本篇文章要求开发者熟悉 HTML.JavaScript.CSS.Echarts.Nodejs ...
ECharts加载省份地图
因为项目只需要展示单独省份的城市,而目前Echarts官网已不再提供地图下载功能. 详细见:EChartsMap ECharts地图下载但是可以从ECharts安装包中找到矢量地图数据,文件路径 n ...
使用echarts简单制作省份地图
引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址引入对应省份的js文件可以在http://echarts.baidu.co ...
利用 Echarts 简单制作省份或区域地图步骤
用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的. 下面本人就利用 Echarts 简单绘制省份地图的步骤与经验与各位分享一下. 1.准备工作 1.1 下载js静态文 ...
ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块,就像是每个国家想把国旗插到月球啊,北极,南极之类的,然后点击右侧的 lenged 能够打开关闭相应的部分.具体情况如下: 要想实现 ...
vue3.0使用echarts完成中国地图以及各省份地图
在做数据页面的时候,很多时候需要地图来标注数据,但是怎样使用地图呢? 1,先安装echarts包 yarn add echarts 2,在main.js中引入 import echarts from ...
echarts做中国地图分布
1.echart@5以上版本好像去处理map地图,想要用echarts制作地图得拿到china.json(中国各省份经纬度),我会放到文章最下面 2.china.json引入 import data ...

react+echarts做各个省份地图

react+echarts做各个省份地图相关推荐

最新文章

热门文章