热门标签
热门文章
- 1Python工程师简历100条技能例句，写简历再也不用愁！！_简历python技能怎么写
- 2游卡：OceanBase在游戏核心业务的规模化降本实践
- 3Redis作为数据库和缓存的区别_.redis的作缓存和redis 作数据库有什么样的不同
- 4Zabbix监控系统与部署Zabbix6.0监控（系列操作完整版）
- 5C++11：线程 thread_c++11 thread
- 6spyder IDE的图形显示设置_spyder 关闭图像
- 7python+pyautogui—PC端自动化(一)截屏及数据获取_pyautogui.getwindowwithtitle(app_name)
- 8Roxlabs在Hubstudio浏览器设置代理教程_如何使用roxlabs
- 9国内有哪些大学开了深度学习课程？
- 10基于java的搜索引擎系统设计与实现_用javafx实现搜索引擎
当前位置: article > 正文
React集成中国地图_react china
作者：笔触狂放9 | 2024-02-18 15:38:21
赞
踩
react china
咳咳，要知道你需要什么，并且文件需要放在哪里。
第一步，准备要引入的包 echarts 执行命令就完活
npm install echarts --save
第二步，准备需要的小文件，geo.js，内容如下：还是直接复制就完事。
第三步：编码环节，请注意。不嫌弃就复制吧！！
- /*eslint eqeqeq: ["off", "smart"]*/
- import React, {Component} from 'react';
- import { Row,
- Col,
- // Tabs,
- // BackTop,
- // Input, Radio,
- // Progress,
- Card, Empty
- } from 'antd';
-
- import echarts from 'echarts';
- import 'echarts/map/js/china';
- import geoJson from 'echarts/map/json/china.json';
- import {geoCoordMap,provienceData} from "./geo";
- // const {confirm} = Modal;
- // const {Option} = Select;
- // const {TreeNode} = Tree;
- // const { TabPane } = Tabs;
- // const { Search } = Input;
- class Doublemonitoring extends Component {
- state = {
- value: 1,
- tabVal:"2020",
- };
- componentDidMount() {
- this.initalECharts()
- }
-
-
- //地图
- initalECharts() {
- // var max = 480,
- // min = 9; // todo
- // var maxSize4Pin = 100,
- // minSize4Pin = 20;
- const data = [
- { name: '黑龙江', area: '东北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '吉林', area: '东北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '辽宁', area: '东北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '内蒙古', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '北京', area: '华北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '天津', area: '华北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '河北', area: '华北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '山东', area: '华北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '山西', area: '华北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '江苏', area: '华东大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '上海', area: '华东大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '浙江', area: '华东大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '福建', area: '华南大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '海南', area: '华南大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '台湾', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '香港', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '澳门', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '河南', area: '华北大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '安徽', area: '华中大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '江西', area: '华中大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '陕西', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '湖北', area: '华中大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '湖南', area: '华中大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '广西', area: '华南大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '宁夏', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '重庆', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '贵州', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '四川', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '云南', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '甘肃', area: '华西大区', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '青海', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '西藏', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) },
- { name: '新疆', area: '其他', type: 'areaCenterCity', InValue: Math.round(Math.random()*1000) }
- ];
- echarts.registerMap('china', geoJson);
- for (const item of provienceData) {
- if (item.area === '东北大区') {
- // console.log("东北大区")
- item.itemStyle = {
- normal: {
- areaColor: '#000',
- },
- 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}', // 提示标签格式
- //鼠标放地图的某一块，显示的提示框
- formatter(params, ticket, callback) {
- // console.log(params)
- var tipHtml = '';
- tipHtml = '<div class="maptit">' +
- '<h5 class="h5">'+params.name+' '+'(13)</h5>'+
- '<p class="h6">'+"高水平学校"+'</p>'+
- '<ul><li><span>A</span>1</li><li class="name-2"><span>A</span>3</li><li class="name-3"><span>A</span>1</li></ul>'+
- '<p class="h6">'+"高水平专业群"+'</p>'+
- '<ul><li><span>A</span>2</li><li class="name-2"><span>A</span>1</li><li class="name-3"><span>A</span>3</li></ul>'+
- '</div>';
- return tipHtml;
- },
- backgroundColor:'none', // 提示标签背景颜色
- textStyle: { color: '#fff' } ,// 提示标签字体颜色
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '0',
- bottom: '10%',
- containLabel: true
- },
- geo: {
- show: true,
- map: 'china',
- label: {
- normal: {
- show: false
- },
- emphasis: {
- show: false,
- },
-
- },
- roam: false,//鼠标缩放
- itemStyle: {
- normal: {
- areaColor: '#8EC9FF',
- borderColor: '#1180c7',
- },
- emphasis: {
- areaColor: '#2B91B7',
- }
- }
- },
- series: [
- /* {
- name: '散点',
- type: 'scatter',
- coordinateSystem: 'geo',
- data: this.convertData(data),
- symbolSize: 20,
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#05C3F9'
- }
- }
- },*/
- {
- type: 'map',
- map: 'china',
- geoIndex: 0,
- aspectScale: 0.9, //长宽比
- showLegendSymbol: false, // 存在legend时显示
- label: {
- normal: {
- show: true
- },
- emphasis: {
- show: false,
- textStyle: {
- color: '#fff'
- }
- }
- },
- roam: true,
- itemStyle: {
- normal: {
- areaColor: '#031525',
- borderColor: '#3B5077',
- },
- emphasis: {
- areaColor: '#2B91B7'
- }
- },
- animation: false,
- data: data
- },
- {
- name: '点',
- type: 'scatter',
- coordinateSystem: 'geo',
- zlevel: 6,
- },
- {
- name: 'Top 5',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- data: this.convertData(data.sort(function(a, b) {
- return b.InValue - a.InValue;
- }).slice(0, 10)),
- symbolSize: 20,
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: '{b}',
- position: 'left',
- show: false
- }
- },
- itemStyle: {
- normal: {
- color: 'yellow',
- shadowBlur: 10,
- shadowColor: 'yellow'
- }
- },
- zlevel: 1
- },
-
- ]
- })
-
- // 鼠标放上颜色变红
- // myChart.on('mouseover', params => {
- // params.color = '#d50000'
- // params.event.target.style.fill = '#d50000'
- // });
-
- myChart.on('click', params => {
- if (params.name === '海南') {
- this.props.history.push('/Dashboard/map2')
- }
- });
- }
- convertData(data) {
- const res = [];
- for (let i = 0; i < data.length; i++) {
- const 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,
- InValue: data[i].InValue
- });
- }
- }
- return res;
- }
-
- render() {//Practicallist,tabVal,
- return (
- <div className="mainMap">
- <div id="mainMap" style={{ width: '100vm', height: '900px' }}></div>
- </div>
- );
- }
- }
-
- export default Doublemonitoring;
第四步：效果图奉上
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/108879
推荐阅读
相关标签
