React 使用recharts实现散点地图的示例代码


Posted in Javascript onDecember 07, 2018

一、前端框架react+ant design UI

二、首先安装recharts

npm install recharts

或者

yarn add recharts

三、引入插件及chinaJSON.js(里面有经纬度信息)

由于项目需要我是全部存数据库的,因为也需要自己添加,下面附一份儿全国省市县经纬度数据

import React,{Component} from 'react';
import {message} from 'antd';
import echarts from "echarts";
import {mapJson,geoCoordMap} from './chinaJSON.js';

三、具体实现代码如下

import React,{Component} from 'react';
import {message} from 'antd';
import echarts from "echarts";
import {mapJson,geoCoordMap} from './chinaJSON.js';

const convertData = (data) => {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        value: geoCoord.concat(data[i].value),
        name: data[i].name,
      });
    }
  }
  return res;
};


class LayoutImg extends Component {
  constructor() {
   super();
   this.state = {
    loading: true,
    loaded:false,
    vmData:[
        {name: '云浮', value: 24,num:10},
        {name: '烟台', value: 28,num:5},
        {name: '昆山', value: 33,num:8},
        {name: '泰州', value: 36,num:10},
        {name: '广州', value: 38,num:8},
        {name: '深圳', value: 41,num:10},
        {name: '三亚', value: 54,num:12},
        {name: '成都', value: 58,num:20},
        {name: '重庆', value: 66,num:5},
        {name: '大庆', value: 279,num:10}
        ]
   }
  }
  componentDidMount() {
   this.initMapDidMount();
  }

  initMapDidMount(){
   echarts.registerMap('china', mapJson); // 注册地图
   var mapChart = echarts.init(document.getElementById('map'));
   var option = {
     backgroundColor: '#404a59',
     title: {
      text: '分布',
      // subtext: '点击进入',
      // sublink: 'http://www.baidu.com/',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
     },
     tooltip : {
      trigger: 'item',
      formatter: function (params) {      //格式化鼠标指到点上的弹窗返回的数据格式
        return params.name + ' : ' + params.value[2];
      }
     },
     geo: {         //地里坐标系组件(相当于每个省块)
      map: 'china',
      roam:true,      //是否开启缩放 
      label: {
        emphasis: {        //鼠标划到后弹出的文字 显示省份
         color: '#FF0000',    //高亮背景色
         show: true,       //是否高亮显示
         fontSize:12       //字体大小
        }
      },
      itemStyle: {         //坐标块本身
        normal: {         //坐标块默认样式控制
         areaColor: '#323c48',  //坐标块儿颜色
         borderColor: '#111'
        },
        emphasis: {
         areaColor: '#79FF79'  //放坐标块儿上,块儿颜色
        }
      }
     },
     series: [
      {
        name: '信息',   // series名称
        type: 'effectScatter',    // series图表类型
        effectType: 'ripple',     // 圆点闪烁样式,目前只支持ripple波纹式
        coordinateSystem: 'geo',   // series坐标系类型
        data:convertData(this.state.vmData),// series数据内容
        showEffectOn: 'emphasis',    //配置何时显示特效 render 一直显示,emphasis放上去显示
        symbolSize: function (val) {
          return val[2] / 10;
        },
        rippleEffect: {        // ripple的样式控制
         brushType: 'stroke',
         color: '#28FF28',
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true   //显示位置信息,
          }
        },

        itemStyle: {         //散点本身显示控制
         normal: {
           color: '#28FF28',
           shadowBlur: 10,
           shadowColor: '#28FF28'
         }
        },
        zlevel: 1
      }
     ],
     symbolSize: 12,
   }
   if (option && typeof option === "object") {
     mapChart.setOption(option);
   }
  }
  render() {
   return (
     <div className="cloudhost-box">
        <div id="map" style={{width: '1100px',height: '550px',mergeLeft:"0px"}} />
     </div>
   );
  }
}
 
export default LayoutImg;

效果图如下:

React 使用recharts实现散点地图的示例代码

附:有什么其它的相关配置可以看官网再做具体修改recharts地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
拖动时防止选中
Feb 03 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
如何手动实现es5中的bind方法详解
Dec 07 #Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 #Javascript
vue+SSM实现验证码功能
Dec 07 #Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 #Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 #Javascript
angular学习之动态创建表单的方法
Dec 07 #Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 #Javascript
You might like
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
微信支付扫码支付php版
2016/07/22 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
你应该知道的python列表去重方法
2017/01/17 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
使用tensorflow实现线性回归
2018/09/08 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
详解python播放音频的三种方法
2019/09/23 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
幼儿园大班教学反思
2014/02/10 职场文书
挂职自我鉴定
2014/02/26 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技