1.导入 world.china.js  这个js是将world.js 文件 以及china.js文件进行合并 （网上一些中国地图勾勒的身份曲线感觉很飘  所以自己加工了一下china.js中的数据， 然后合并到了word.js中）

(可以在这里进行下载  https://github.com/a1115040996/MyHTML/blob/master/world-china.js)

2.现在echarts.js源码

3.生成地图

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<div id="box" style="width: 1000px;height: 1000px;"></div>

		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/world-china.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			var myCharts = echarts.init(document.getElementById('box'));

			myCharts.setOption({

				visualMap: {

			        min: 0,

			        max: 1000000,

			        text:['High','Low'],

			        realtime: false,

			        calculable: true,

			        color: ['orangered','yellow','lightskyblue']

			    },

				 series: [{

			        name: 'chinaMap',

			        type: 'map',

			        map: 'world',

			        roam: true,

			        itemStyle:{

		                emphasis:{label:{show:true}}

		            },

		            center: [115.97, 29.71],

		            zoom: 12,

			        label: {

			            normal: {

			                show: true,

			                position: 'center',

			                formatter: '{b}'

			            }

			        },

			        data: [

			        	{name: '山东省', value: '1000'}

			        ],

			        zlevel: 3

			    }]

			});

		</script>

	</body>

</html>

　　

预览图

echarts 如何在世界地图中绘制中国地图的更多相关文章

  1. 【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓

    要在世界地图展现出来的情况下绘制中国省份的轮廓,根据现有的echarts-api是不可行的. 但好在echarts也提供了自定义地图的方式,使用echarts.registerMap();来实现 第一 ...

  2. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  3. 用matlab绘制中国地图

    reference:https://jingyan.baidu.com/article/870c6fc36fdacfb03ee4be58.html shp: http://muchong.com/ht ...

  4. Android 绘制中国地图

    最近的版本有这样一个需求: 有 3 个要素: 中国地图 高亮省区 中心显示数字 面对这样一个需求,该如何实现呢? 高德地图 因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...

  5. 用echarts绘制中国地图

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  6. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  7. R绘制中国地图，并展示流行病学数据

    流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...

  8. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

  9. 基于D3JS绘制中国地图

    仿照D3JS官网上的美国地图制作了一个中国版的地图. D3JS官网上的版本: http://bl.ocks.org/NPashaP/a74faf20b492ad377312 中国版的地图效果: 如要制 ...

随机推荐

  1. bilibili投屏到电脑

    bilibili投屏到TV B栈上有丰富的视频资源,电视盒子小米,自带匹配的投屏功能. 但是如何将哔哩哔哩投屏到电脑上? bilibili投屏到PC上 万能的知乎给出了答案. https://www. ...

  2. iOS - 判断程序每天只执行一次

    当进行操作的时候记录操作时间存在偏好设置当中,当再次点击的时候获取现在的时间然后和之前记录的时间进行比较.如果是一天那么就提示“今天已经操作过了”,如果不是一天,那么可以正常操作,然后记录操作时间.如 ...

  3. bladex-boot推送harbor出错

    出错信息: Building image harbor.zhangshuiqing.com:8081/blade/Bladex-boot:2.2.1.release十二月 13, 2019 11:22 ...

  4. Android MVP模式简单介绍：以一个登陆流程为例

    老的项目用的MVC的模式,最近完成了全部重构成MVP模式的工作,虽然比较麻烦,好处是代码逻辑更加清楚.简洁,流程更加清晰,对于后续版本迭代维护都挺方便.对于一些想要学习MVP模式的同学来讲,百度搜出来 ...

  5. 关于JavaScript面向对象那些事

    当你在使用手机的时候,你会发现,你并不懂得其中的原理就会操作了,其实这就是面向对象的思想.面向对象还有很多地方都会运用到.JavaScript也不例外,现在跟随我的脚步,来学习一下吧. 面向过程和面向 ...

  6. JS中，JSON 和 对象互转，数组和字符串的转换？

    JSON 与 J对象转化 要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法: 如下: var json = JSON.stringify({a: 'Hello', b ...

  7. MongoDB 概述

    一.概述: 1.NoSQL数据库(非关系型数据库) 2.文档存储 3.格式类似JSON,BSON 4.最终一致性(非ACID) , CAP定理(C 一致性,A 高可用,P 分区性) 5.高可扩展性(分 ...

  8. Docker 封装java镜像

    一.概述 目前java采用的框架是Spring,服务器直接通过 java -jar xxx.jar 就可以启动服务了. 二.jdk镜像 在docker中跑java应用,需要有jdk环境支持才行. 获取 ...

  9. 引用和自包含令牌(Reference Tokens and Introspection)

    访问令牌可以有两种形式:自包含的和引用的. 自包含令牌(Self-contained tokens): 使用受保护的.有时间限制的数据结构,该结构包含元数据,并声明通过网络传递用户或客户机的身份.一种 ...

  10. 阿里巴巴 Java 开发手册 （十）MySQL 数据库

    (一) 建表规约 1. [强制]表达是与否概念的字段,必须使用 is_xxx 的方式命名,数据类型是 unsigned tinyint ( 1 表示是,0 表示否). 说明:任何字段如果为非负数,必须 ...