文档章节

echarts实现中国地图

Funcy1122
 Funcy1122
发布于 01/17 16:33
字数 757
阅读 19
收藏 0

最近项目中有个需求:在地图上展示各省市的数据分布,像这样:

项目中接入的图表展示工具是echart,查了echart官网,发现并没有中国地图相关的实现,唯一接近的,只有香港18区人口密度。没办法,只能求助万能的google了。搜索了一圈,最终发现了w3cschool的中国地图实现,实现代码如下:

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title : {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['iphone']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text:['高','低'],           // 文本,默认为数值文本
        calculable : true
    },
    toolbox: {
        show: true,
        orient : 'vertical',
        left: 'right',
        top: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name: 'iphone',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '重庆',value: Math.round(Math.random()*1000)},
                {name: '河北',value: Math.round(Math.random()*1000)},
                {name: '河南',value: Math.round(Math.random()*1000)},
                {name: '云南',value: Math.round(Math.random()*1000)},
                {name: '辽宁',value: Math.round(Math.random()*1000)},
                {name: '黑龙江',value: Math.round(Math.random()*1000)},
                {name: '湖南',value: Math.round(Math.random()*1000)},
                {name: '安徽',value: Math.round(Math.random()*1000)},
                {name: '山东',value: Math.round(Math.random()*1000)},
                {name: '新疆',value: Math.round(Math.random()*1000)},
                {name: '江苏',value: Math.round(Math.random()*1000)},
                {name: '浙江',value: Math.round(Math.random()*1000)},
                {name: '江西',value: Math.round(Math.random()*1000)},
                {name: '湖北',value: Math.round(Math.random()*1000)},
                {name: '广西',value: Math.round(Math.random()*1000)},
                {name: '甘肃',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
                {name: '内蒙古',value: Math.round(Math.random()*1000)},
                {name: '陕西',value: Math.round(Math.random()*1000)},
                {name: '吉林',value: Math.round(Math.random()*1000)},
                {name: '福建',value: Math.round(Math.random()*1000)},
                {name: '贵州',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '青海',value: Math.round(Math.random()*1000)},
                {name: '西藏',value: Math.round(Math.random()*1000)},
                {name: '四川',value: Math.round(Math.random()*1000)},
                {name: '宁夏',value: Math.round(Math.random()*1000)},
                {name: '海南',value: Math.round(Math.random()*1000)},
                {name: '台湾',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        }
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

关于中国地图的js文件,echart官方github也有提供,可以在这里下载

另外,如果想更加精细化定制地图的展示,可参考官方文档


附上本人项目中最终处理效果:

© 著作权归作者所有

共有 人打赏支持
Funcy1122
粉丝 7
博文 124
码字总数 170775
作品 0
广州
后端工程师
私信 提问
Error: [REQUIRE_FATAL]Relative ID is not allowed in global require: ../echarts/src/config

@Kener-林峰 你好,想跟你请教个问题:

豬兒
2014/04/29
2.1K
1
Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉
2018/05/04
0
0
"echarts/util/mapData/params" is not exists!

@Kener-林峰 你好,想跟你请教个问题: Error: [MODULE_MISS]"echarts/util/mapData/params" is not exists! 请问为什么拓展地图的时候报这个错误!在这前面已经进行了 var fileLocation = '......

黄平
2014/03/31
5.8K
1
ECharts-X 0.1 发布,下一代的 ECharts

ECharts-X是 ECharts 团队推出的全新 3D 可视化库,它是基于 ECharts 的扩展,底层深度整合了 WebGL 库QTEK和 Canvas2D 库ZRender。 目前发布的 ECharts-X 0.1 包含 map3d,并且在 map3d 中提...

pissang
2015/02/05
6.1K
54
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13

没有更多内容

加载失败,请刷新页面

加载更多

Android 保活

1.Android不间断上报位置信息-应用进程防杀指南 2.Android锁屏无法继续定位问题 3.微信 Android 客户端后台保活经验分享

IT追寻者
11分钟前
0
0
基于Kubernetes的Spark集群部署实践

Spark是新一代分布式内存计算框架,Apache开源的顶级项目。相比于Hadoop Map-Reduce计算框架,Spark将中间计算结果保留在内存中,速度提升10~100倍;同时它还提供更丰富的算子,采用弹性分布...

hblt-j
12分钟前
2
0
NTP服务搭建

NTP服务搭建 如果是单独安装这个服务,请直接开始即可。如果是为了解决hadoop集群的时针偏差问题,配置ntp服务时,务必先关闭chd的相关服务。 一、准备环境 1、操作系统 CentOS7操作系统,准...

星汉
13分钟前
2
0
SPring AOP(面向切面编程)

AOP(面向切面编程) AOP是OOP(面向对象编程)的延续,但是它和面向对象的纵向编程不同,它是一个横向的切面式的编程。可以理解为oop就是一根柱子,如果需要就继续往上加长,而aop则是在需要...

MrBoyce
13分钟前
2
0
高性能Mysql:复制

1 复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础。将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重新...

watermelon11
16分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部