Web 插件之 ECharts 实现中国地图数据的简单展示实现

最新推荐文章于 2024-08-05 05:00:00 发布

仙魁XAN

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量8.3k

点赞数 13

分类专栏： Web 文章标签： web echarts china map 地图

本文链接：https://blog.csdn.net/u014361280/article/details/121457228

版权

Web 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

Web 插件之 ECharts 实现中国地图数据的简单展示实现

一、简单介绍

Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Web 开发中 ECharts 进行数据动态排序柱状图可视化图表使用方法，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

ECharts 官网：Apache ECharts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

二、实现原理

1、下载需要的 ECharts.js 和 china.js

Echarts github 地址：https://github.com/apache/echarts

ECharts.js 各个版本下载地址：echarts/dist at master · apache/echarts · GitHub

china.js 下载地址：https://github.com/apache/echarts/tree/master/test/data/map/js

2、根据步骤引入 js，设置 Dom、option 、echarts.init 和 myChart.setOption

具体可参考：Web 插件之 ECharts 可视化图表库简单介绍和使用_仙魁XAN-CSDN博客

三、注意事项

1、一些参数的简单说明

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

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

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

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

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

2、数据格式

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

3、自定义事件

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

四、预览效果

五、实现步骤

1、Eclipse 新建一个 web 工程，工程引入 echarts.js 和 china.js

2、添加一个 html ，添加对应数据和事件，实现地图绘制

3、运行服务器，输入对应网址，地图效果如下

六、关键代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts Test China Data</title>
	<!-- 引入刚刚下载的 ECharts 文件 -->
	<script type="text/javascript" src="./js/echarts.js"></script>
	<!-- 引入刚刚下载的 china 文件 -->
	<script type="text/javascript" src="./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;
          }
        
    </style>
</head>
<body>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<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()}
        ]
        
        // 随机函数
        function randomValue() {
            return Math.round(Math.random()*1000);
        }
        
        
        var 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: ['#e0ff00', '#006e00']//取值范围的颜色
                },
                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
                }
            ]
        };
        
     	// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
     	// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 点击事件
        myChart.on('click', function (params) {
        	alert(params.name+':'+params.seriesName+':'+params.value);
        });
 
    </script>
</body>
</html>

仙魁XAN

关注

13
点赞
踩
49

收藏

觉得还不错? 一键收藏
打赏
4
评论
Web 插件之 ECharts 实现中国地图数据的简单展示实现

Web 插件之 ECharts 实现中国地图数据的简单展示实现目录Web 插件之 ECharts 实现中国地图数据的简单展示实现一、简单介绍二、实现原理三、注意事项四、预览效果五、实现步骤六、关键代码一、简单介绍Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Web 开发中 ECharts 进行数据动态排序柱状图可视化图表使用方法，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。ECharts 官网：..
复制链接

扫一扫