react使用Echarts绘制高亮可点击选中的省市地图
最近做项目遇到一个需求，需要显示广东省各个地级市的地图，并且鼠标移入高亮显示，鼠标点击可以选中某个地级市。在网上查阅了大量资料之后，最后选择了使用echarts实现该需求。在此记录一下，希望可以帮到有需求的小伙伴。本人初次使用，有不足之处希望大家可以指出，先看看效果图：
该需求主要有以下几个关键点：
首先我们需要初始化一个地图坐标系，可以在网上下载一个地图的json文件。
import GDJson from '../../../../statics/cdn/guangdong.json';
echarts.registerMap('GD', GDJson);
然后就是通过配置option绘制出具体的地图，此处我是通过绘制一个散点图，实现的各个地级市名字的显示，需要知道各个市的经纬度，这个可以在网上查到。然后通过dataRange设置了不同的value值所显示的颜色。具体配置如下所示：
var provienceData = [
{ name: '广州', type: 'areaCenterCity', value: 0, departId: '001021' },
{ name: '深圳', type: 'areaCenterCity', value: 0, departId: '001020' },
{ name: '佛山', type: 'areaCenterCity', value: 0, departId: '001004' },
{ name: '东莞', type: 'areaCenterCity', value: 0, departId: '001008' },
{ name: '中山', type: 'areaCenterCity', value: 0, departId: '001019' },
{ name: '珠海', type: 'areaCenterCity', value: 0, departId: '001011' },
{ name: '江门', type: 'areaCenterCity', value: 0, departId: '001015' },
{ name: '肇庆', type: 'areaCenterCity', value: 0, departId: '001005' },
{ name: '惠州', type: 'areaCenterCity', value: 0, departId: '001010' },
{ name: '汕头', type: 'areaCenterCity', value: 0, departId: '001007' },
{ name: '潮州', type: 'areaCenterCity', value: 0, departId: '001009' },
{ name: '揭阳', type: 'areaCenterCity', value: 0, departId: '001006' },
{ name: '汕尾', type: 'areaCenterCity', value: 0, departId: '001001' },
{ name: '湛江', type: 'areaCenterCity', value: 0, departId: '001018' },
{ name: '茂名', type: 'areaCenterCity', value: 0, departId: '001003' },
{ name: '阳江', type: 'areaCenterCity', value: 0, departId: '001016' },
{ name: '韶关', type: 'areaCenterCity', value: 0, departId: '001013' },
{ name: '清远', type: 'areaCenterCity', value: 0, departId: '001017' },
{ name: '云浮', type: 'areaCenterCity', value: 0, departId: '001002' },
{ name: '梅州', type: 'areaCenterCity', value: 0, departId: '001014' },
{ name: '河源', type: 'areaCenterCity', value: 0, departId: '001012' },
];
let option = {
dataRange: {
show: false,
x: 'left',
y: 'bottom',
splitList: [
{ start: 0, end: 0, color: '#13667e' },//当值为5时，区域背景
{ start: 5, end: 5, color: '#187fed' },//当值为5时，区域背景
],
},
geo: {
map: 'GD',
roam: false,
zoom: 0.94,
tooltip: {
show: false, //不显示提示标签
},
center: [113.122717, 22.900762],
label: {
normal: {
show: false,//显示省份标签
textStyle: { color: "#333333" }//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: false,
textStyle: { color: "#333333" }
}
},
itemStyle: {
normal: {
borderWidth: 1,//区域边框宽度
borderColor: '#ffffff',//区域边框颜色
areaColor: "#fff",//区域颜色
label: { show: false }
},
emphasis: {
areaColor: "#187fed",
}
},
},
series: [
{
type: 'scatter', //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
//'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
coordinateSystem: 'geo',
data: this.convertData(provienceData),
symbolSize: 10,
symbolRotate: 40,
geoIndex: 0,
label: {
normal: {
formatter: '{b}',
position: 'bottom',
show: true,
color: '#fff',
},
emphasis: {
show: false
}
},
tooltip: {
show: false, //不显示提示标签
formatter: '{c}', //提示标签格式
backgroundColor: "#fff",//提示标签背景颜色
borderColor: '#ccc',
borderWidth: 5,
textStyle: { color: "#ccc" } //提示标签字体颜色
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
type: 'map',
mapType: 'GD',
geoIndex: 0,
roam: false,
zoom: 0.94,
center: [113.122717, 22.900762],
tooltip: {
show: false, //不显示提示标签
},
label: {
normal: {
show: false //显示省份标签
},
emphasis: {
show: false,
}
},
itemStyle: {
//正常样式
normal: {
borderWidth: 1, //区域边框宽度
borderColor: '#ffffff', //区域边框颜色
areaColor: "#187fed",
},
//鼠标事件区块样式
emphasis: {
areaColor: "#187fed",
}
},
data: provienceData
}
],
}
myChart.setOption(option);
convertData(data) {
const geoCoordMap = {
'广州': [113.480637, 23.325178],
'深圳': [114.085947, 22.597],
'佛山': [113.022717, 23.028762],
'东莞': [113.746262, 23.006237],
'中山': [113.382391, 22.521113],
'珠海': [113.353986, 22.124979],
'江门': [112.594942, 22.290431],
'肇庆': [112.072529, 23.651546],
'惠州': [114.412599, 23.079404],
'汕头': [116.708463, 23.37102],
'潮州': [116.832301, 23.761701],
'揭阳': [116.055733, 23.343778],
'汕尾': [115.364238, 22.974485],
'湛江': [110.064977, 21.274898],
'茂名': [110.919229, 21.959751],
'阳江': [111.805107, 22.009222],
'韶关': [113.591544, 24.801322],
'清远': [113.051227, 24.285022],
'云浮': [112.044439, 22.929801],
'梅州': [116.117582, 24.299112],
'河源': [114.997802, 23.946266],
}
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].value),
area: data[i].area,
type: data[i].type,
});
}
}
return res;
}
最后则是为地图添加点击事件，点击某个区域的时候，更改某个区域的value值，进而改变其颜色
myChart.on('click', function (params) {
for (let i = 0; i < provienceData.length; i++) {
provienceData[i].value = 0
if (params.name === provienceData[i].name && _this.state.departName !== params.data.name) {
provienceData[i].value = 5
}
}
myChart.setOption(option);
});
最后来一波总体代码
import React from 'react'
import echarts from 'echarts';
import GDJson from '../../../../statics/cdn/guangdong.json';
componentDidMount() {
this.initalECharts()
}
// 初始化地图
initalECharts() {
if(!document.getElementById('map')){
return
}
let _this = this
var provienceData = [
{ name: '广州', type: 'areaCenterCity', value: 0, departId: '001021' },
{ name: '深圳', type: 'areaCenterCity', value: 0, departId: '001020' },
{ name: '佛山', type: 'areaCenterCity', value: 0, departId: '001004' },
{ name: '东莞', type: 'areaCenterCity', value: 0, departId: '001008' },
{ name: '中山', type: 'areaCenterCity', value: 0, departId: '001019' },
{ name: '珠海', type: 'areaCenterCity', value: 0, departId: '001011' },
{ name: '江门', type: 'areaCenterCity', value: 0, departId: '001015' },
{ name: '肇庆', type: 'areaCenterCity', value: 0, departId: '001005' },
{ name: '惠州', type: 'areaCenterCity', value: 0, departId: '001010' },
{ name: '汕头', type: 'areaCenterCity', value: 0, departId: '001007' },
{ name: '潮州', type: 'areaCenterCity', value: 0, departId: '001009' },
{ name: '揭阳', type: 'areaCenterCity', value: 0, departId: '001006' },
{ name: '汕尾', type: 'areaCenterCity', value: 0, departId: '001001' },
{ name: '湛江', type: 'areaCenterCity', value: 0, departId: '001018' },
{ name: '茂名', type: 'areaCenterCity', value: 0, departId: '001003' },
{ name: '阳江', type: 'areaCenterCity', value: 0, departId: '001016' },
{ name: '韶关', type: 'areaCenterCity', value: 0, departId: '001013' },
{ name: '清远', type: 'areaCenterCity', value: 0, departId: '001017' },
{ name: '云浮', type: 'areaCenterCity', value: 0, departId: '001002' },
{ name: '梅州', type: 'areaCenterCity', value: 0, departId: '001014' },
{ name: '河源', type: 'areaCenterCity', value: 0, departId: '001012' },
];
echarts.registerMap('GD', GDJson);
//初始化ECharts实例
const myChart = echarts.init(document.getElementById('map'));
let option = {
dataRange: {
show: false,
x: 'left',
y: 'bottom',
splitList: [
{ start: 0, end: 0, color: '#13667e' },//当值为5时，区域背景
{ start: 5, end: 5, color: '#187fed' },//当值为5时，区域背景
],
},
geo: {
map: 'GD',
roam: false,
zoom: 0.94,
tooltip: {
show: false, //不显示提示标签
},
center: [113.122717, 22.900762],
label: {
normal: {
show: false,//显示省份标签
textStyle: { color: "#333333" }//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: false,
textStyle: { color: "#333333" }
}
},
itemStyle: {
normal: {
borderWidth: 1,//区域边框宽度
borderColor: '#ffffff',//区域边框颜色
areaColor: "#fff",//区域颜色
label: { show: false }
},
emphasis: {
areaColor: "#187fed",
}
},
},
series: [
{
type: 'scatter', //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
//'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
coordinateSystem: 'geo',
data: this.convertData(provienceData),
symbolSize: 10,
symbolRotate: 40,
geoIndex: 0,
label: {
normal: {
formatter: '{b}',
position: 'bottom',
show: true,
color: '#fff',
},
emphasis: {
show: false
}
},
tooltip: {
show: false, //不显示提示标签
formatter: '{c}', //提示标签格式
backgroundColor: "#fff",//提示标签背景颜色
borderColor: '#ccc',
borderWidth: 5,
textStyle: { color: "#ccc" } //提示标签字体颜色
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
type: 'map',
mapType: 'GD',
geoIndex: 0,
roam: false,
zoom: 0.94,
center: [113.122717, 22.900762],
tooltip: {
show: false, //不显示提示标签
},
label: {
normal: {
show: false //显示省份标签
},
emphasis: {
show: false,
}
},
itemStyle: {
//正常样式
normal: {
borderWidth: 1, //区域边框宽度
borderColor: '#ffffff', //区域边框颜色
areaColor: "#187fed",
},
//鼠标事件区块样式
emphasis: {
areaColor: "#187fed",
}
},
data: provienceData
}
],
}
myChart.setOption(option); myChart.on('click', function (params) {
for (let i = 0; i < provienceData.length; i++) {
provienceData[i].value = 0
if (params.name === provienceData[i].name && _this.state.departName !== params.data.name) {
provienceData[i].value = 5
}
}
if (_this.state.departName !== params.data.name) {
_this.setState({ departName: params.data.name, departId: params.data.departId }, () => {
_this.getData()
})
} else {
_this.setState({ departName: '', departId: '' }, () => {
_this.getData()
})
}
myChart.setOption(option);
});
window.addEventListener('resize', () => {
if (myChart && myChart.resize) {
myChart.resize();
}
}); }
// 添加地图每个市的坐标
convertData(data) {
const geoCoordMap = {
'广州': [113.480637, 23.325178],
'深圳': [114.085947, 22.597],
'佛山': [113.022717, 23.028762],
'东莞': [113.746262, 23.006237],
'中山': [113.382391, 22.521113],
'珠海': [113.353986, 22.124979],
'江门': [112.594942, 22.290431],
'肇庆': [112.072529, 23.651546],
'惠州': [114.412599, 23.079404],
'汕头': [116.708463, 23.37102],
'潮州': [116.832301, 23.761701],
'揭阳': [116.055733, 23.343778],
'汕尾': [115.364238, 22.974485],
'湛江': [110.064977, 21.274898],
'茂名': [110.919229, 21.959751],
'阳江': [111.805107, 22.009222],
'韶关': [113.591544, 24.801322],
'清远': [113.051227, 24.285022],
'云浮': [112.044439, 22.929801],
'梅州': [116.117582, 24.299112],
'河源': [114.997802, 23.946266],
}
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].value),
area: data[i].area,
type: data[i].type,
});
}
}
return res;
}
render(){
return(<div className={styles.map} id="map"></div>)
}
react使用Echarts绘制高亮可点击选中的省市地图的更多相关文章
- react使用echarts
1.安装echarts: npm install echarts --save 2.制作线性图组件,只引入echart必要的js内容 /** * Created by yongyuehuang on ...
- React＋Echarts简单的封装套路
今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install ech ...
- react的echarts BizCharts
react BizCharts react的饼图,折线图 点击进入官网 -> https://bizcharts.net/products/bizCharts/demo 如果你在这遇到了问题,欢 ...
- react之echarts数据更新
react之echarts数据更新 在使用setState更新数据时,如果要将图标更新,需要做一些简单的封装,代码如下: import React, { Component } from 'react ...
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- webpack+react实现echarts可视化配置
先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...
- 使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...
- Echarts如何添加鼠标点击事件？防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- echarts —— 绘制横向柱状图（圆角、无坐标轴）
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
随机推荐
- sonar 安装，centos7配置优化
/etc/sysctl.conf /etc/systemd/system.conf /etc/security/limits.conf /proc/sys/fs/file-max /etc/secur ...
- 【雕爷学编程】Arduino动手做（57）---四档矩形波模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- 【雕爷学编程】Arduino动手做（51）---触摸按键模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...
- Unity2.5D Sprite层级显示遮挡问题处理
代码源自游戏<A Place for the Unwilling> 开发<A Place for the Unwilling>游戏第一部要解决的问题就是让精灵可以围绕其它精灵前 ...
- 8086 8255A proteus仿真实验
目录 实验内容 电路图 电路分析 代码 实验内容 数码管循环显示0123456789abcdef- 电路图 电路分析 端口地址和控制字地址主要看电路图,片选信号由译码器的\(\overline{IO1 ...
- Java并发编程详解读书笔记（一）
一.线程介绍 讲线程之前得先了解进程(Peocess),现在的操作系统基本都支持多任务的进行,举个场景:有许多的程序员们喜欢边coding边听点轻音乐.这时计算机就是做并行任务,也就是有多个进程在同时 ...
- Aangular 父子间组件传递
1.父子间组件传递------重点&难点 Vue.js和Angular中的父子间消息传递原理一样,都可以用口诀: “Props Down,Events Up” 方向1:父 =>子 父组件 ...
- Spring 框架的 AOP 简介
Spring 框架的 AOP Spring 框架的一个关键组件是面向方面的编程(AOP)(也称为面向切面编程)框架. 面向方面的编程需要把程序逻辑分解成不同的部分称为所谓的关注点. 跨一个应用程序的多 ...
- Gym101630L Laminar Family
题目链接:https://cn.vjudge.net/problem/Gym-101630L 题目大意: 对于一个集合的集合,若其中任意两个集合 \(A\) 和 \(B\) 都满足下述三个条件之一:\ ...
- 移动端在ios上以及微信浏览器上的兼容性
1.document.以及window.body在移动h5不能触发点击事件 解决方法:给body加上cursor: pointer;就可以有点击事件了. ios上默认的body是没有点击事件的: 接着 ...