【数据可视化】用echarts画地图（添加toolbox工具栏）

目录

前言

一，echarts介绍

二，echart的使用

2.1获取Apache ECharts

三，echart中toolbox

3.1  toolbox介绍

3.2 toolbox的基本属性

四，用echart画地图

4.1导入china.js文件

4.2绘制地图

4.3  增加toolbox属性

4.4完整代码

4.5效果图

---

前言

本文使用echarts和工具栏组件toolbox绘画地图，使用echarts和toolbox 进行数据可视化时可提供直观、交互丰富，可高度个性化定制的数据可视化图表。

一，echarts介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

二，echart的使用

2.1获取Apache ECharts

在http://​ https://www.jsdelivr.com/package/npm/echarts ​ echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

2.2引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

接下来就可以绘画图表啦。

三，echart中toolbox

3.1  toolbox介绍

工具栏是可选的一个组件，可以显示在图标上，里面的每一个工具都具有一个小功能，可以帮助用户和图表更好的交互。ECharts中内置了5个工具：数据区域缩放、动态类型切换、数据视图、重置和导出图片。在option.toolbox属性中进行配置。

3.2 toolbox的基本属性

1,  toolbox.feature.saveAsImage // 导出图片

2.  toolbox.feature .dataView // 数据视图

3.    toolbox.feature .restore // 重置

4.   toolbox.feature .dataZoom // 区域缩放

5.   toolbox.feature. magicType // 动态图表类型的切换

四，用echart画地图

4.1导入china.js文件

我们需要到github上下载china.js导入echart文件中

地址： GitHub - liangrumeng2015/China.js: echarts里面的地图文件China.js

4.2绘制地图

    
    
    
    
    



    
中国地图
    

    

4.3  增加toolbox属性

toolbox: {
                show:true,
                feature: {
                     saveAsImage: {show:true}, // 导出图片//是否显示该工具
                      dataView: {show:true,}, // 数据视图
                      restore: {}, // 重置
                       dataZoom: {}, // 区域缩放
                     } 
                },

4.4完整代码

    
    
    
    
    



    
中国地图
    

    

4.5效果图