全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
首页 > 技术干货 > Web前端 > > ECharts3怎么加载china.js地图?(echarts加载本地json)
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

ECharts3怎么加载china.js地图?(echarts加载本地json)

发布时间:4 周 前 栏目:Web前端 浏览:

1、ECharts3怎么加载china.js地图?

echarts3加载map的方式和2不一样了,你必须得先注册地图才行,

“`js$.getJSON(‘./china.json’,function(data){echarts.registerMap(‘china’

,data);varchart=echarts.init(document.getElementById(‘map’));chart.setOp

tion({series:[{type:‘map’,map:‘china’}]});});“`

类似这样,你需要下载中国的地理矢量数据geojson

echarts3与echarts2区别:

1、js文件:

首先是js文件,echarts3做了很大的优化,在echarts2中,对各种控件的类库管理的较为详

细,有专门的目录结构来存放相关的js文件及相关资源,但是在引入文件的时候往往会很不

方便,可能会一不小心就漏掉一个文件,而echarts3可以根据需要在下载项下直接根据所需

的功能构架类库,使用时只要导入一个echarts.min.js文件就可以;

2、文件导入:

在echarts2中,require是作为模块化加载的入口,在使用过程中关于路径配置经常会出现

问题,特别是制作地图的时候,而在echarts3中只需要在开头加一句[html] view plain copy

接下去只要调用接口就可以了;

3、离线地图:

echarts2中离线地图的精确度存在很大的问题,特别是下钻到区县一级,边界线存在

模糊、交叉、空白等问题,并且经常出现飞地,与实际地图出入较大,个人认为基本没

什么用,在echarts3中对此做了很大的改进,基本解决了以上问题,市与市之间、区县

与区县之间基本上不存在衔接问题;另外,在echarts3中可以根据需要自主构建地图,

这个服务给实际使用提供了很大的便利;

4、工具栏:

在echarts3的toolbox里面把辅助线功能取消掉了,图标变小了,总体上感觉echarts3

里面的toolbox更丑了;

5、地图漫游工具:

在echarts3里面把地图漫游工具取消掉了,说实话,echarts2里面的地图漫游工具看着

还是挺不错的,虽然并没有什么用;

6、坐标系:

echarts3中,数据结构进行了统一化抽象,最常用的数据结构有:线性表、树、图。例

如,线性表以及树、图的节点列表的结构可以归一化为这样的二维数组;echarts3中另

一个重要的数据结构抽象是独立出了“坐标系”概念;事实上在 ECharts2 中已经有

grid、polar配置项存在,但是并不是按一个“坐标系”的理解去实现的;echarts3中,

支持了直角坐标系(catesian,兼容 echarts2中的grid)、极坐标系(polar)、地理

坐标系(geo);

7、Option变动:

1)组件位置想x、y等变成了left、top,可以使用像素和百分比,适应性更强。

2)为了让结构更合理,echarts3中label被移出来和itemStyle平级。

根据官方说法,在echarts3中以前的用法也是兼容的,只是不推荐。

echarts3与echarts2区别.CSDN[引用时间2018-1-22]

ECharts3怎么加载china.js地图?

2、2021-06-06在vue中使用 echarts3d地图

vue中使用 echarts地图

main.js中

package.json 使用版本

在vue文件中使用

3d地图示例

中国地图json数据

var myChart = this. echarts.registerMap("china", china);//china为上图中的json数据

//此处配置可参考官网例子即可

此处说明如何出现geo3d(立体地图)

数据来源

按照需求,选择对应的数据,保存为json文件引入项目中即可

ECharts3怎么加载china.js地图?

3、如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)_jquery


ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息。ECharts官网提供了中国地图、世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图。



效果演示 源码下载


本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据。通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方面的相关知识。


HTML


首先在页面中需要加载地图的位置放上div#myChart。



然后是加载Echarts和中国地图js文件。由于本文实例中应用了异步ajax加载数据,所以需要加载jQuery库文件。




Javascript


接下来js部分,先设置好Echarts选项内容,请看以下代码及注释。


然后我们使用jQuery的Ajax()来异步请求数据。


很显然,我们看到通过jQuery的$.ajax()向mapdata.php发送了一个post请求,要求返回json格式的数据,当请求成功并得到回应时,重新渲染地图数据。


PHP


mapdata.php的任务是读取mysql数据表中的数据,然后返回给前端。首先是要连接数据库,这部分代码在connect.php中,请下载源码查看。然后就是sql查询,读取表echarts_map中的数据,最后以json格式返回。


输出json格式数据
MySQL


最后提供mysql数据表结构信息,数据信息可以下载源码后,将sql导入你的mysql中即可,注意演示时修改connect.php的数据库配置信息。


CREATE TABLE IF NOT EXISTS `echarts_map` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`province` varchar(30) NOT NULL,
`gdp` decimal(10,2) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号