react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区、华东大区、华南大区、华西大区、华中大区以及华北大区并用颜色标识方便识别。
最终展示效果如下:
我是直接用的react官方提供的create-react-app快速构建开发环境,之后就是cnpm install --save echarts 安装echarts依赖了。
在项目中引入echarts以及中国地图数据,并引入模拟的大区地图数据。
import echarts from 'echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';
import {geoCoordMap,provienceData} from "./geo";
componentDidMount() {
this.initalECharts();
}
initalECharts() {
const data = [
{name: '上海', area: '华东大区', type: 'areaCenterCity'},
{name: '深圳', area: '华南大区', type: 'areaCenterCity'},
{name: '成都', area: '华西大区', type: 'areaCenterCity'},
{name: '北京', area: '华北大区', type: 'areaCenterCity'},
{name: '武汉', area: '华中大区', type: 'areaCenterCity'},
{name: '沈阳', area: '东北大区', type: 'areaCenterCity'},
];
echarts.registerMap('zhongguo', geoJson);
for(let item of provienceData){
if(item.area === '东北大区'){
item.itemStyle = {
normal: {
areaColor: "#3CA2FC",
},
emphasis: {
areaColor: "#3CA2FC",
}
}
}else if(item.area === '华北大区'){
item.itemStyle = {
normal: {
areaColor: "#6CAFBE",
},
emphasis: {
areaColor: "#6CAFBE",
}
}
}else if(item.area === '华中大区'){
item.itemStyle = {
normal: {
areaColor: "#ADD03C",
},
emphasis: {
areaColor: "#ADD03C",
}
}
}else if(item.area === '华东大区'){
item.itemStyle = {
normal: {
areaColor: "#A13614",
},
emphasis: {
areaColor: "#A13614",
}
}
}else if(item.area === '华西大区'){
item.itemStyle = {
normal: {
areaColor: "#FFBA00",
},
emphasis: {
areaColor: "#FFBA00",
}
}
}else if(item.area === '华南大区'){
item.itemStyle = {
normal: {
areaColor: "#FFD300",
},
emphasis: {
areaColor: "#FFD300",
}
}
}else if(item.area === '南海诸岛'){
item.itemStyle = {
normal: {
borderColor: '#fff',//区域边框颜色
areaColor:"#fff",//区域颜色
},
emphasis: {
show: false,
// borderColor: '#fff',
// areaColor:"#fff",
}
}
}else{
item.itemStyle = {
normal: {
areaColor: "#D9D9D9",
},
emphasis: {
areaColor: "#D9D9D9",
}
}
}
}
const myChart = echarts.init(document.getElementById('mainMap'));
myChart.setOption({
tooltip: {
show: false, //不显示提示标签
formatter: '{b}', //提示标签格式
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"} //提示标签字体颜色
},
grid: {
left: '10%',
right: '10%',
top: '10%',
bottom: '10%',
containLabel: true
},
geo: {
map: 'china',
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',
coordinateSystem: 'geo',
data: this.convertData(data),
symbolSize: 20,
symbolRotate: 35,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: false
}
},
tooltip: {
show: false, //不显示提示标签
formatter: '{c}', //提示标签格式
backgroundColor: "#fff",//提示标签背景颜色
borderColor: '#ccc',
borderWidth: .5,
textStyle:{color:"#000"} //提示标签字体颜色
},
itemStyle: {
normal: {
color: '#57c610'
}
}
},
{
type: 'map',
mapType: 'china',
roam: false,
zoom: 1.2,
tooltip: {
show: false, //不显示提示标签
},
label: {
normal: {
show: false //显示省份标签
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#fff', //区域边框颜色
label:{show:false}
},
emphasis: {
show: false,
}
},
// geoIndex: 0,
// tooltip: {show: false},
data: provienceData
}
],
})
}
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;
}
代码我放在了码云里面:
react使用echarts地图实现中国地图大区展示的更多相关文章
- 16、vue引入echarts,划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- 使用echarts简单制作中国地图,echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
- 用echarts.js制作中国地图,点击对应的省市链接到指定页面
这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...
- echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- echarts 某省下钻某市地图
因为最近工作需要,接触到了highcharts 与echarts ,对比了一下,目前公司系统用的是highcharts的图表插件,就不想再去用echarts的图标插件了,奈何highcharts地图对 ...
- D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区 在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
- Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
随机推荐
- wampserver 点击跳转localhost变0.0.0.0的解决方法!
最近下载新版本wampserver发现点击项目不会自动添加localhost了,导致访问项目很麻烦. 修改如下 修改wamp根目录下的wampmanager.conf urlAddLocalhost ...
- html dl dt dd 标签语法与使用
一.dl dt dd认识 html <dl> <dt> <dd>是一组合标 […]
- VC++中出现错误“ error c2065 'printf' undeclared identifier”的处理方法
原文:http://blog.csdn.net/panpan639944806/article/details/20135311 有两种可能: 1.未加头文件 #include <stdio.h ...
- Android ListView复制、删除的实现
适配器MyAdapter: package com.zihao.adapter; import java.util.List; import com.zihao.popdemo.R; import c ...
- 跳过图片反盗链js
页面增加<iframe> <iframe id="ifa" style="display:none" /> 原来html: <im ...
- [英中双语] Pragmatic Software Development Tips 务实的软件开发提示
Pragmatic Software Development Tips务实的软件开发提示 Care About Your Craft Why spend your life developing so ...
- 使用 Load Balancer,Corosync,Pacemaker 搭建 Linux 高可用集群
由于网络架构的原因,在一般虚拟机或物理环境中常见的用 VIP 来实现双机高可用方案,无法照搬到 Azure 平台.但利用 Azure 平台提供的负载均衡或者内部负载均衡功能,可以达到类似的效果. 本文 ...
- ansible之基本原理及命令
什么是ansible ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(\(puppet.chef.func.fabric\))的优点,实现了批量系统配置.批量程序部署 ...
- 一、docker学习笔记——安装docker
系统win10 企业版 1.下载docker CE 2.安装.注意,由于docker 与Oracle VM VirtualBox 冲突,在windows平台上二者不可共存.你只能2选1!! 3.如果d ...
- selenium借助send_keys实现上传(以网易邮箱为例)
#code:utf-8from selenium import webdriverimport time#网易163邮箱dr = webdriver.Firefox()file_path = 'htt ...