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  -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

附：项目目录

5、总结

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