Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦

最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同.

尝试之后,最后的渲染效果如下:(从图中可以看出,渲染的地图至少包含了三个数据集:行政地图块数据/黄色圈数据块/红色凸出预警块)

下面这种就是常见的单数据块行政区域地图渲染(明显可以看出,数据渲染的丰富性是不同的)

像这种两种地图在做的时候都是需要先加载到该地区的geo.json地图数据文件的,但是,两者又有所不同,前面更丰富的地图,他不仅需要行政区域数据,还需要个区域中心点坐标数据,绘点需要.接下来,以前图为例,分享下完成这种图的艰辛历程:

1 找轮子||资源寻找

开始做之前,第一下就想到了,网上有没有轮子,可以用,于是找了一堆,直到看到Echarts神器站点https://www.makeapie.com/ . 里面有丰富的绘图资源,大家可以去学习,开始看到了下面这个资源,感觉这个非常满足我的需求啊:(https://www.makeapie.com/editor.html?c=xBJDR584vG)

Echarts地图参考:

安徽省流向地图

中国人民大学2017年各省市计划录

上海数据分类统计情况

北京热点图

自定义地区级地图的实现

各区域数据下载站点:

DATAV.GeoAtlas

echarts 中uploadedDataURL 中的json数据下载以及个省份地图json数据地址

echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载-行政区域地图】

其实这些地方数据渲染方法可能不同,所以数据集在用的时候需要灵活变动的,有些是用:

$.getJSON(uploadedDataURL-json数据文件, function(geoJson) {}

有些直接用:echarts.registerMap('XW',MapJson数据);

地图显示数据分级：

参考地址：https://www.cnblogs.com/shangrao/p/13198373.html

一些其他比较新颖的图:

花瓣

var scaleData = [{'name': '工程建设','value': 10},{'name': '产权交易','value': 10},{'name': '土地交易','value': 30},{'name': '其他交易','value': 10},{'name': '土地交易','value': 10},{'name': '其他交易','value': 10},
];
// 随机颜色
var rich = {white: {color: '#ddd',align: 'center',padding: [3, 0]}
};
var placeHolderStyle = {normal: {label: {show: false},labelLine: {show: false},color: 'rgba(0, 0, 0, 0)',borderColor: 'rgba(0, 0, 0, 0)',borderWidth: 0}
};
function bg2(){return '#'+Math.floor(Math.random()*0xffffff).toString(16);}function rancolors(len){var color=[];for (var i = 0; i <= len; i++) {var sjys=bg2();color.push(sjys);for (var i = 0; i < color.length; i++) {if(color[i]=sjys){color[i]=bg2();}}}return color;}
var data = [];
var color=rancolors(7)
for (var i = 0; i < scaleData.length; i++) {data.push({value: scaleData[i].value,name: scaleData[i].name,itemStyle: {normal: {borderWidth: 50,shadowBlur: 100,borderColor:color[i],shadowColor: color[i]}}}, {value: 50,name: '',itemStyle: placeHolderStyle});
}
var seriesObj = [{name: '',type: 'pie',clockWise: false,radius: [100, 200],hoverAnimation: false,itemStyle: {normal: {label: {show: true,position: 'outside',color: '#ddd',formatter: function(params) {var percent = 0;var total = 0;for (var i = 0; i < scaleData.length; i++) {total += scaleData[i].value;}percent = ((params.value / total) * 100).toFixed(0);if(params.name !== '') {return params.name + '\n{white|' + '占比' + percent + '%}';}else {return '';}},rich: rich},labelLine: {length:30,length2:100,show: true,color:'#00ffff'}}},data: data
}];
option = {backgroundColor: '#04243E',tooltip: {show: false},legend: {show: false},toolbox: {show: false},series: seriesObj
}

Echarts

Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦相关推荐

echarts市级区域地图数据展示
一.原理引用对应市区json数据(比如我就是引用的河南省驻马店市的数据),通过百度地图坐标拾取器获取地区的经纬度,将数据填在对应位置(我下面有注释),再配置下样式颜色之类的渲染上就可以了二.看图片 ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
echart 地图某个地区_一站式解决echarts实现区域地图
近期项目中有个大屏展示的需求,需要显示行政区的地图.苦苦寻找的过程中发现此方面资料很少且大部分在CSDN上付费下载,着实麻烦,特此总结,供大家参考. 直接上图关键知识点 geo数据 geo是echa ...
echarts引入geo地图数据，前端学习记录01
最近遇到项目需要使用使用geoJson数据在echarts上进行地图的绘制,仅使用此文记录学习的过程. 首先需要在项目中引入echart相关依赖,在package.json中添加如下依赖: " ...
echarts全国各省地图数据资源
相信很多人都用echarts绘制过地图,但是苦于寻找省市的数据包,echarts本身提供的数据包又涉及版权问题不再提供使用,下面提供一份干货: 某大厂提供的地图数据包链接,很全,省.市.区都有 htt ...
echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦

Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦相关推荐

最新文章

热门文章