首页 / ECHARTS / echarts人口密度图全解
echarts人口密度图全解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了echarts人口密度图全解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2698字,纯文字阅读大概需要4分钟。
内容图文
echarts人口密度图全解(echarts地图各配置项,tooltip标注显示多行信息,geojson数据包,地图增加自定义区域)
前言
第一次做人口密度图,遇到了很多坑,也百度了很多资料。记录一下。防止下次再掉坑里。效果展示如图:
1.echarts地图各配置项
echarts(https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label)官网都有各个图形的配置项。但是相对一个图形几百个配置项的去找,无异于大海捞针。我还是比较喜欢有针对性的改。根据需求来
html没啥好说的。引入jq和echarts的文件就行。这里图片的div一直要设置宽高。没有宽高图形是不会显示的,它不会自己撑起来。
<script src="./assets/js/echarts.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<div class="data2">
<!-- 地图显示 -->
<div id="map"></div>
</div>
echarts图形核心数据就是options,配置项都在这。更多配置项可以去官网找,我这只描述我用到的几项。tooltip是标注显示,即鼠标放上去显示的弹窗信息,visualMap是地图旁边的色彩条,series里关键的属性center地区中心点,map地图geojso.json数据。data映射数据,也是从后端请求回来的数据渲染到地图上的数据。
<script type="text/javascript">
var datas = [
{ name: '临海市', value: 119,grade:3.2 },
{ name: '仙居县', value: 9 , grade:3.2 },
{ name: '天台县', value: 9 , grade:3.2},
{ name: '三门县', value: 9 , grade:3.2},
{ name: '黄岩区', value: 9 , grade:3.2},
{ name: '椒江区', value: 9 , grade:3.2},
{ name: '路桥区', value: 9 , grade:3.2},
{ name: '温岭市', value: 9 , grade:3.2},
{ name: '玉环市', value: 9 , grade:3.2},
];
var options = {
tooltip: {
trigger: 'item',
formatter:function(a,b){
return (`区县:${a['name']}</br>实绩:${a['value']}</br>得分:${a['data'].grade}</br>`)
}
},
visualMap: {
min: 0,
max: 250,
right: '6%',
bottom:'10%',
text: ['高', '低'],
textStyle:{color:'#01B2D5'},
calculable: true,
inRange: {
color: ['#28B0FE', '#1A65C9', '#112FA3']
}
},
series: [
{
label:{
show: true,
color:'#FFFFFF',
},
type: 'map',
center: [121.42,28.66],
map: 'china',
data: datas,
zoom: 8,
roam: true,
}
]
};
var chart = echarts.init(document.getElementById('map'));
$.getJSON(
'https://cdn.huanggefan.cn/geojson/city/331000-%E5%8F%B0%E5%B7%9E%E5%B8%82.json',
function (data) {
console.log(data);
echarts.registerMap('china', data);
chart.setOption(options);
}
);
</script>
2.tooltip标注显示多行信息
3.geojson数据包
包含中国,以及中国的所有省市,区县的geojson数据,下载地址:https://download.csdn.net/download/qq_34761385/15869875
如果不想下载,想用线上的,这里推荐一个地址:https://cdn.huanggefan.cn/
4.地图增加自定义区域
这个我没试过,看到(这位博主)说因为地图是来自genjson.json数据显示的效果,所以要增加区域就得修改genjson.json的数据。
自测吧,这里给大家推荐两个修改geojson文件的网址:
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5(国内。推荐)
内容总结
以上是互联网集市为您收集整理的echarts人口密度图全解全部内容,希望文章能够帮你解决echarts人口密度图全解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。