使用recharts实现散布图的示例代码

一、前端框架的反应式设计界面

第二，首先安装充电器

Npm安装充电器或

纱线添加充值三。介绍插件和chinaJSON.js(里面有经纬度信息)

因为项目需要我保存数据库中的所有数据，因为我也需要自己添加，下面附上中国各省市县的经纬度数据副本

chinaJSON.js_jb51.rar

从“反应”导入反应{组件}；从“antd”导入{ message }；从“echart”导入echart；从“”导入{mapJson，geoCoordMap }。/chinajson . js '；三、具体实现代码如下

从"反应"导入反应{组件};从“蚂蚁”导入{消息}；从“echart”导入echart从""导入地理坐标地图./chinajson。js '；const convert data=(data)={ var RES=[]；for(var I=0；一。数据。长度；I){ var geo oord=geo oordmap[数据[I]].姓名];if(GeoCoord){ RES . push({ value : GeoCoord。concat(数据[I]).值),名为：的数据[i].名称，});} }返回RES }；类LayoutImg扩展了组件{ 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()；} initmapdiddmount(){ echart。registermap(' China '，mapJson)；//注册地图var mapChart=echart。init(文档。getelementbyid(' map ')；var option={背景色： ' # 404 a59 '，title: { text: '分布，//subxt : '点击进入、//sublink : ' http://www .百度。com/'、left: 'center '、text style : { color : ' # fff ' }、tooltip : { trigger: 'item '、formatter :函数(params){//格式化鼠标指到点上的弹窗返回的数据格式返回参数。名称' : '参数。值[2]；} }，geo: { //地里坐标系组件（相当于每个省块)map: 'china '，roam:true，//是否开启缩放标签: { emphasis: { //鼠标划到后弹出的文字显示省份color: '#FF0000 '，//高亮背景色show: true，//是否高亮显示fontSize:12 //字体大小} }，itemStyle: { //坐标块本身normal: { //坐标块默认样式控制areaColor: ' # 323c48 '，//坐标块儿颜色borderColor: '#111' }，强调： { arecolor : ' # 79ff 79 '//放坐标块儿上，块儿颜色} } },系列： [ { name: '信息，//系列名称键入type: ' effectScatter '，//系列图表类型效应类型： '波纹',//圆点闪烁样式，目前只支持涟漪波纹式坐标系统： 'geo '，//系列坐标系类型数据：转换数据(这。国家。vmdata)，//系列数据内容显示效果： '强调',//配置何时显示特效提出一直显示，强调放上去显示符号大小：函数(val){ return val[2]/10；}，rippleEffect: { //纹波的样式控制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的选项类型==' object '){ mapchart。setoption(选项)；} } render(){ return(div类名=' cloud host-box ' div id=' map ' style={ { width : ' 1100 px '，height: '550px '，merge left : ' 0px ' } }//div)；}}导出默认LayoutImg效果图如下：

附：官网还能看到哪些相关配置，然后可以具体修改充值地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。