ECharts怎样显示中国地图

1、首先需要准备一个HTML和一个地图的json文件。

HTML文件自己新建一个即可。

地图的json文件可以去阿里云下载。

下载地址：阿里云 DataV - 数据可视化平台

进入这个网页之后，选择自己需要的地图。然后在右边下载json文件。

2、HTML中需要引入jQuery和ECharts

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

3、想要地图显示，就需要盛放地图的盒子，进行初始化。

<div id="main" style="width: 1000px; height: 1000px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));
</script>

4、最后就需要读取json文件，将地图显示出来

$get()可以解析json文件

5、查看全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>中国地图</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script></head><body><div id="main" style="width: 1000px; height: 1000px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));//各省份的地图json文件var provinces = [];//初始化全国地图loadMap("./china.json", "china");function loadMap(mapCode, name) {$.get(mapCode, function (data) {//使用 HTTP GET 请求从服务器加载数据echarts.registerMap(name, data); //注册可用地图var option = {series: [{name: "MAP",type: "map",mapType: name,selectedMode: false, //是否允许选中多个区域data: provinces,},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});}</script></body>
</html>

最终效果

ECharts怎样显示中国地图相关推荐

vue中使用eCharts插件显示中国地图
一.前言由于项目需求,需要一个中国地图,上面根据从服务器获取到的数据,显示各省份的数据.在eEcharts官网,发现没有地图相关的案列(搜索了一下,都下架了),只有社区有. 二.查找资料 eChar ...
echarts显示中国地图
下面介绍一个方法如何用echarts画一个中国地图,如图项目引入echarts以后,在页面创建canvas标签 <div ref="chartone" ></d ...
china.js显示中国地图
** china.js显示中国地图 //运用vue写的 ```var app = new Vue({el: '#app',data: {points:[],//各个省份下的客户数量maxDate:'' ...
【echarts实现】中国地图世界地图
打开一个用 vue 创建的新项目安装 npm install --save echarts@4.x echars实现中国和世界地图需要引入地图资源需引入地图的话下载的echarts版本就要低于5. ...
使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
关于echarts自定义合并中国地图分区展示的问题
其实为了自己能够记住所遇到的问题,然后也是为了以后方便查找,开始决定尝试第一次写自己的博客.当然很多东西也是自己查找借鉴他人才最终解决的问题,所以在此也非常感谢他人的分享.本人前端小白一个,半路转行从 ...
【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能
0 小程序开发背景 1 下载官方Github项目 2 按照Echarts官网的map示例使用 3 点击事件的函数效果图 0 小程序开发背景前段时间在上学校的软件开发与实践B课程因为赶上了工大百年 ...
使用 Echarts 插件完成中国地图
目录前言: 什么是 Echarts 插件中国地图成品展示步骤: 完成中国地图代码总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个中国地图需要使用 canvas 画布进行编写,不 ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...

ECharts怎样显示中国地图

1、首先需要准备一个HTML和一个地图的json文件。

2、HTML中需要引入jQuery和ECharts

3、想要地图显示，就需要盛放地图的盒子，进行初始化。

4、最后就需要读取json文件，将地图显示出来

5、查看全部代码

最终效果

ECharts怎样显示中国地图相关推荐

最新文章

热门文章