Echarts 绘制单独省份地图

1、文档介绍

采用node端http-server作为服务端，引用第三方插件Echarts

2、阅读对象

本篇文章要求开发者熟悉 HTML、JavaScript、CSS、Echarts、Nodejs等开发技术

3、开发环境

node v6.11.0 (win下载、Mac下载)
WebStorm 2017.3 (WebStorm )

4、开发实战

1、安装http-server，http-server是一个基于Node.js的简单零配置命令行HTTP服务器，可以访问本地文件夹里面的内容

npm config get registry                                      //查看自己使用的源
npm config set registry https://registry.npm.taobao.org     //切换为国内淘宝镜像源# 假设不想做切换，可忽略以上操作npm install -g http-server

启动http-server命令就是在cmd下直接输入http-server，之后就可以浏览器访问http://localhost:8080.
默认web目录是当前目录，想改变web目录的话，在命令后面加上本地路径，例如：

# 参数-a是监听地址，而参数-p是修改监听端口。
http-server <path> -a 0.0.0.0 -p 8080

2、引入依赖包Echarts.min.js

Echarts.js(Echarts.js下载)，根据个人所需自行下载。本文引入Echarts版本号为3.x

3、安装WebStorm编辑器

打开项目所在文件夹，点击最底部Terminal，去到项目名所在的目录，以我当前这个项目为例，
项目名为resourceCatalog,项目所在文件夹为workspace,即在Terminal中输入

 E:\wrokspace\resourceCatalog>cd ..E:\wrokspace>http-server

如果还有疑问，可看下图指导

4、浏览器输入localhost:8080 ，查看结果

这里就是你的项目文件了，里面会有一个文件夹单独存放HTML 页面，这时候你的项目也就已经是以服务的状态启动了。

5、代码块

这里为了方便，没有将js和html分离，echarts.js自行引入，代码如下：

demo.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../public/plugins/H+/js/jquery.min.js"></script><script src="./echarts/echarts.min.js"></script>
</head>
<body style="background:#232767">
<div id="main" style="width: 505px;height: 530px;"></div>
<script>$(function () {var myChart = echarts.init(document.getElementById('main'));myChart.showLoading();$.get('530000.json', function (geoJson) {myChart.hideLoading();echarts.registerMap('云南', geoJson);myChart.setOption(option = {visualMap: {min: 0,max: 500,show: false,splitNumber: 5,inRange: {color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()},textStyle: {color: '#fff'}},geo: {map: '云南',label: {normal: {show: true,color: '#fff'},emphasis: {show: true,color: '#fff'}},roam: false,itemStyle: {normal: {areaColor: '#40458e',borderColor: '#6367ad',borderWidth: 1.5},emphasis: {areaColor: '#40458e'}},"left": 0,"right": 0,"top": 0,"bottom": 0},series: [{name: '活跃人数分布',type: 'heatmap',coordinateSystem: 'geo',blurSize: 30,data: []}]});});})
</script>
</body>
</html>

附：项目目录

5、总结

这里只是针对云南省单独提取，其他省份各自选择不同的省份json低阈值，既可以绘制出来，原理都是一样，最后运行效果图如下：

Echarts 绘制单独省份地图相关推荐

在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）
今天来复盘一下,如何使用Echarts绘制单个省份的地图,昨天在网上搜了很多教程,代码大差不差,但是运行的时候总出不来,经过自己的琢磨,里面也有很多需要注意的点,今天就以自身的问题来针对几个问题说一下 ...
echarts国内各省份地图js/json文件，全球地图js文件/汉化，字符云js文件
echarts国内各省份地图js/json文件,全球地图js文件/汉化,字符云js文件下载链接世界地图中国地图国内各省份地图字符云下载链接 https://github.com/FuHan ...
echarts绘制上海市乡镇级地图
echarts绘制上海市乡镇级地图 echarts 最新版本不支持GeometryCollection,虽然有人在4年前就提了issue <!DOCTYPE html> <html ...
ECharts加载省份地图
因为项目只需要展示单独省份的城市,而目前Echarts官网已不再提供地图下载功能. 详细见:EChartsMap ECharts地图下载但是可以从ECharts安装包中找到矢量地图数据,文件路径 n ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
echarts 绘制县级市地图数据可视化
背景: 上头给了我一个使用兰溪市地图进行相关的数据可视化任务,我自然想到了以前用过的echarts,但使用过发现他自带的能实现的只到地级市(例如金华市),而县级市的区划暂时没法实现. 本文以兰溪市(县 ...
DataV基础版如何制作单独省份地图？
第一步以"全国业务态势"模版创建可视化因为DataV基础版不能够自由的添加地图的下各个子组件,制作省份地图需要包含"区域热力"这个子组件.没关系,即便您目前 ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...

Echarts 绘制单独省份地图

Echarts 绘制单独省份地图相关推荐

最新文章

热门文章