基于Echarts的中国地图数据展示

概述

基于echarts的大数据中国地图展示，结合API定制，开发样式，监听鼠标事件，实现带参数路由跳转等自定义事件。

详细

一、概述

实际项目中大概率会遇到很多需要进行数据展示的地方，如折现图，柱状图等，今天给大家介绍一个更加炫酷的中国地图大数据展示，结合echarts免费开源第三方插件，可以实现自己的定制样式，定制提示。

二、演示效果

三、目录结构

项目构成：

引用：

<script src="dist/echarts.js"></script>
<script src="map/js/china.js"></script>

四、详细步骤

1、首先给定一下全局样式、给个地图容器

 <style>*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:800px;height:600px;margin: 150px auto;border:1px solid #ddd;}/*建议长宽比0.75，符合审美*/</style><div id="main"></div>

2、获取容器DOM，给定地图配置

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

3、详细配置，定制样式，给自定义事件

option = {tooltip: {formatter:function(params,ticket, callback){return params.seriesName+'<br />'+params.name+'：'+params.value}},visualMap: {min: 0,max: 1500,left: 'left',top: 'bottom',text: ['高','低'],inRange: {color: ['#e0ffff', '#006edd']},show:true},geo: {map: 'china',roam: false,zoom:1.23,label: {normal: {show: true,fontSize:'10',color: 'rgba(0,0,0,0.7)'}},itemStyle: {normal:{borderColor: 'rgba(0, 0, 0, 0.2)'},emphasis:{areaColor: '#F3B329',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series : [{name: '信息量',type: 'map',geoIndex: 0,data:dataList}]};

tooltip：定制信息提示框的内容，其中params参数表示数据

数据格式：

   var dataList=[{name:"南海诸岛",value:0},{name: '北京', value: randomValue()},{name: '天津', value: randomValue()},{name: '上海', value: randomValue()}]

这里为了演示效果，我随机给定的value值，randomValue为我自己定义的一个获取随机数函数

visualMap：图注样式定制，其中包括color范围，文字提示

geo:定义地图为china，其中可能大概率要用的一个配置zoom: 视角缩放比例，roam：是否开启缩放和平移

itemStyle：地图外观定制，其中normal表示正常显示的样式，emphasis表示鼠标悬浮下样式

series：整体配置其中type很关键表示该例是地图，data:图表所用数据，实际项目中大家可以通过http获取数据，再赋值给data

自定义事件：

myChart.on('click', function (params) {alert(params.name+':'+params.seriesName+':'+params.value);});

大家可以给刚刚获取的myChart实例添加事件监听，其中重要的一个参数params可以得到你想要的一切O(∩_∩)O哈哈~

这里给大家打印一下：

最后再给大家一个友好建议：

一、插件自带的地图省份名字是默认出现在省会城市的位置，导致很多省份的名字有点挤甚至偏移，大家可以打开map/js/china.js

二、检索自己想要更改的省份名字，如湖南

"properties":{"cp":[112.982279,28.19409],"name":"湖南","childNum":3}}

其中cp即表示文字的位置，两个坐标表示经纬度，大家根据需要调整。哈哈大致就到这里了，有兴趣的小伙伴可以试试！

整体代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>map</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><script src="dist/echarts.js"></script><script src="map/js/china.js"></script><style>*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:600px;height:450px;margin: 150px auto;border:1px solid #ddd;}/*默认长宽比0.75*/</style>
</head>
<body><div id="main"></div><script type="text/javascript">var dataList=[{name:"南海诸岛",value:0},{name: '北京', value: randomValue()},{name: '天津', value: randomValue()},{name: '上海', value: randomValue()},{name: '重庆', value: randomValue()},{name: '河北', value: randomValue()},{name: '河南', value: randomValue()},{name: '云南', value: randomValue()},{name: '辽宁', value: randomValue()},{name: '黑龙江', value: randomValue()},{name: '湖南', value: randomValue()},{name: '安徽', value: randomValue()},{name: '山东', value: randomValue()},{name: '新疆', value: randomValue()},{name: '江苏', value: randomValue()},{name: '浙江', value: randomValue()},{name: '江西', value: randomValue()},{name: '湖北', value: randomValue()},{name: '广西', value: randomValue()},{name: '甘肃', value: randomValue()},{name: '山西', value: randomValue()},{name: '内蒙古', value: randomValue()},{name: '陕西', value: randomValue()},{name: '吉林', value: randomValue()},{name: '福建', value: randomValue()},{name: '贵州', value: randomValue()},{name: '广东', value: randomValue()},{name: '青海', value: randomValue()},{name: '西藏', value: randomValue()},{name: '四川', value: randomValue()},{name: '宁夏', value: randomValue()},{name: '海南', value: randomValue()},{name: '台湾', value: randomValue()},{name: '香港', value: randomValue()},{name: '澳门', value: randomValue()}]var myChart = echarts.init(document.getElementById('main'));function randomValue() {return Math.round(Math.random()*1000);}option = {tooltip: {formatter:function(params,ticket, callback){return params.seriesName+'<br />'+params.name+'：'+params.value}//数据格式化},visualMap: {min: 0,max: 1500,left: 'left',top: 'bottom',text: ['高','低'],//取值范围的文字inRange: {color: ['#e0ffff', '#006edd']//取值范围的颜色},show:true//图注},geo: {map: 'china',roam: false,//不开启缩放和平移zoom:1.23,//视角缩放比例label: {normal: {show: true,fontSize:'10',color: 'rgba(0,0,0,0.7)'}},itemStyle: {normal:{borderColor: 'rgba(0, 0, 0, 0.2)'},emphasis:{areaColor: '#F3B329',//鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series : [{name: '信息量',type: 'map',geoIndex: 0,data:dataList}]};myChart.setOption(option);myChart.on('click', function (params) {alert(params.name);});/*  setTimeout(function () {myChart.setOption({series : [{name: '信息量',type: 'map',geoIndex: 0,data:dataList}]});},1000)*/</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/48602.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！