echarts实现中国地图数据展示

在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts;

一般运用到条形、折线、扇形图,今天说一说在中国地图上展示各地数据;

首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n

也可以在github上克隆下来:https://github.com/Luna829/incubator-echarts/blob/master/map/js/china.js

引入echarts后引入china.js文件

<head>
        <meta charset="utf-8" />
        <title>echarts中国地图数据</title>
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <script type="text/javascript" src="js/china.js" ></script>
    </head>

PS:有一个小bug,想使用china.js必须使用echarts.min.js;  引入echarts.common.min.js是无效的;测试多次才发现这个问题,也是非常烧脑了;

写入随机数来测试数据:

function randomData() {
     return Math.round(Math.random()*500);
} 

数据:

var mydata = [
                {name: ‘北京‘,value: ‘100‘ },{name: ‘天津‘,value: randomData() },
                {name: ‘上海‘,value: randomData() },{name: ‘重庆‘,value: randomData() },
                {name: ‘河北‘,value: randomData() },{name: ‘河南‘,value: randomData() },
                {name: ‘云南‘,value: randomData() },{name: ‘辽宁‘,value: randomData() },
                {name: ‘黑龙江‘,value: randomData() },{name: ‘湖南‘,value: randomData() },
                {name: ‘安徽‘,value: randomData() },{name: ‘山东‘,value: randomData() },
                {name: ‘新疆‘,value: randomData() },{name: ‘江苏‘,value: randomData() },
                {name: ‘浙江‘,value: randomData() },{name: ‘江西‘,value: randomData() },
                {name: ‘湖北‘,value: randomData() },{name: ‘广西‘,value: randomData() },
                {name: ‘甘肃‘,value: randomData() },{name: ‘山西‘,value: randomData() },
                {name: ‘内蒙古‘,value: randomData() },{name: ‘陕西‘,value: randomData() },
                {name: ‘吉林‘,value: randomData() },{name: ‘福建‘,value: randomData() },
                {name: ‘贵州‘,value: randomData() },{name: ‘广东‘,value: randomData() },
                {name: ‘青海‘,value: randomData() },{name: ‘西藏‘,value: randomData() },
                {name: ‘四川‘,value: randomData() },{name: ‘宁夏‘,value: randomData() },
                {name: ‘海南‘,value: randomData() },{name: ‘台湾‘,value: randomData() },
                {name: ‘香港‘,value: randomData() },{name: ‘澳门‘,value: randomData() }
            ]; 

自己的数据写入value里

实例化option,配置属性,data置入数据

var optionMap = {
                backgroundColor: ‘#FFFFFF‘,
                title: {
                    text: ‘全国地图大数据‘,
                    subtext: ‘‘,
                    x:‘center‘
                },
                tooltip : {
                    trigger: ‘item‘
                },  

                //左侧小导航图标
                visualMap: {
                    show : true,
                    x: ‘left‘,
                    y: ‘center‘,
                    splitList: [
                        {start: 500, end:600},{start: 400, end: 500},
                        {start: 300, end: 400},{start: 200, end: 300},
                        {start: 100, end: 200},{start: 0, end: 100},
                    ],
                    color: [‘#5475f5‘, ‘#9feaa5‘, ‘#85daef‘,‘#74e2ca‘, ‘#e6ac53‘, ‘#9fb5ea‘]
                },  

                //配置属性
                series: [{
                    name: ‘数据‘,
                    type: ‘map‘,
                    mapType: ‘china‘,
                    roam: true,
                    label: {
                        normal: {
                            show: true  //省份名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:mydata  //数据
                }]
            };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById(‘main‘));

        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);

效果如图:

原文地址:https://www.cnblogs.com/luna666/p/9007263.html

时间: 2024-10-10 15:20:38

echarts实现中国地图数据展示的相关文章

基于VUE+TS中引用ECharts的中国地图和世界地图密度表

首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo 以下仅是个人在开发中逐步摸索出来的.demo目前没出问题.如果有错误地方请留言指出  (若转载请标注出处) 直接上效果图,对应代码在效果图下面 安装: 1. npm install echarts --save2. npm install --save @typ

echarts画中国地图并上色

任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool.cn/echarts_tutorial/ 如果是写论文作图需要添加应用哦 最终效果如下: 参考了这个网址:https://www.cnblogs.com/luna666/p/9007263.html 另外还有个百度官方的例子:http://www.echartsjs.com/gallery/edi

基于echarts的中国地图

HTML: <div id="china_map" style='margin-top: -120px;width:100%x;height:600px;'></div> 以下是echarts地图相关代码 dataList () { // 初始化echarts实例 this.chinachart = echarts.init(document.getElementById('china_map')) // 进行相关配置 var chartOption = { t

1、ECharts(中国地图篇)的使用

一.网址:            http://echarts.baidu.com/download.html点击:            完整下载文件:        echarts.min.js 网址:            http://echarts.baidu.com/download-map.html点击:            中国地图 - JS下载文件:        china.js 二.代码示例 <!DOCTYPE html> <html> <head&g

echarts画中国地图,省市区地图分享

中国地图 四川地图 重庆地图 源码分享: https://github.com/livelyPeng/ec-map 原文地址:https://www.cnblogs.com/plBlog/p/11725632.html

25、继续echarts实现中国地图

1. 以上是实现的效果 下边是实现的代码,上一篇地图没有颜色,是因为没有引入zrender包,因为echarts画地图是基于zrender实现的 <!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="jquery-1.7.2.min.js"></script>

R实现pm2.5地图数据展示

使用rvest包抓取pm2.5静态页面数据,使用leafletCN包实现pm2.5数据的地图展示,代码如下所示: library(rvest) library(leafletCN) Sys.setlocale("LC_CTYPE","eng") doc = read_html("http://www.pm25s.com/cn/rank/") cities = doc %>% html_nodes(".cityrank a"

PHP+jQuery实现中国地图热点数据统计展示效果

一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map用来生成地图. <div id="map"></div> <div id="tip"></div> 接着我们引入jQuery库.raphael.js及chinamapPath.js(中国地图数据) <script t

一个让echarts中国地图包含省市轮廓的技巧

背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂本文. 可能官方也提供过整体的地图库,但可能个人能力有限,并没有找到相关信息或者其他解决方案,如果知道的园友请告诉我. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa