echart 世界地图发光_使用echart.js来绘制世界地图

可视化框架echart

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

编辑器

word其实就是编辑器，ppt也是，不同的编辑器可以产生不同类型的文件。在这里，我们需要的是产生网页文件的编辑器，即我们需要产生.html后缀的文件，所以推荐一个轻量级编辑器Sublime，http://www.sublimetext.com/。根据你的电脑系统来选择相应的安装包安装，具体使用方法可以参考官网的教程。

框架的使用方法

首先要明确的是，我们需要的插图是由网页的形式在浏览器中呈现的，所以需要在编辑器中编写代码，保存成html文件，接着在浏览器中打开。幸运的是，框架已经为我们写好了大多数生成图表的代码，我们只需要修改其中的设置并读入我们的数据，就可以轻松制作出新颖又好看的图表。下面就用世界地图和饼状图来说明该框架的使用方法

上图是最终的效果图，制作该图片分为两个步骤：

使用echart.js生成世界地图和饼状图

世界地图：

Awesome-pyecharts

// 所有的脚本代码都写在script标签里

var chart_container = echarts.init(

document.getElementById('container'), 'white', {renderer: 'canvas'});

// var option代表定义一个名为option的变量，后面花括号里的代表我们需要作图的参数设置

var option_container = {

// 默认的颜色数组 (如果不明确设置每个数据项的颜色，则会采用默认的数组

// 此处的颜色为十六进制表示，也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色，挑选喜欢的颜色可以自行搜索颜色

"color": ["#ac6767","#1d953f","#6950a1","#918597"