echarts引入地图不成功（使用echarts遇到的坑）

这个是我的项目遇到的问题，不具有普遍性。此文章只是记录寻找bug的过程。

需求

老板：这个项目要新增一个大数据的大屏展示页面。

准备

按照echarts官网教程进行安装与引入。

npm install echarts --save

//引入包
import echarts from 'echarts';
//外部引入中国地图（echarts5没有内置地图）
import "./map/js/china.js";//渲染
var myChart = echarts.init(document.getElementById("map"));
myChart.setOption(chartData);

BUG处理

运行后发现容器#map里一片空白，地图并没有显示出来。控制台没有任何报错！
我以为是引入问题，然后我就用另一种方式引入地图：

//引入地图JSON文件
import chinaJson from './map/json/china.json'
//注册地图
echarts.registerMap('china',chinaJson)

发现还是一片空白，没有报错。通过echarts.getMap()打印已注册的地图返回null。原来地图压根没注册上。然后去找为什么注册不了地图，找了许久无果。
之后还试过安装了一些内置地图的其他版本，结果还是一样。后来打印echarts的时候发现版本跟我安装的不一致：

后来经过一番查找终于发现原来项目中早就引入了echarts：

还是阉割版的echarts。。。
换了全量版的echarts后就正常显示了。

最后

主要是用不了的功能没有报错也没有提示，耗费了许多时间，希望下次遇到类似问题能快速解决。T^T

echarts引入地图不成功（使用echarts遇到的坑）相关推荐

echarts geo地图示例_基于Echarts的中国地图数据展示
一.概述实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示. ...
vue 引入json地图_VUE中通过Echarts引入地图
渲染的方法如下记得引入echarts import echarts from 'echarts' ----------------------------------- init(dalian){ ...
Echarts引入省级地图（简便快捷，以浙江省为例）
Echarts引入省级地图(简便快捷,以浙江省为例) 最近需求,利用echarts地图显示浙江省行政区.一开始找了很多资料,但是一直没法实现,也不知道为什么.网上的办法试了个遍,老是不成功.总感觉打开 ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
vue使用echarts引入离线地图（geo.json）并切换省市（以四川为例）可下钻
首先安装echarts npm install echarts --save 1 然后再main.js中引入echarts import echarts from 'echarts' Vue.prot ...
vue使用echarts引入离线地图（geo.json）并切换省市（以四川为例）
首先安装echarts npm install echarts --save 然后再main.js中引入echarts import echarts from 'echarts' Vue.protot ...
echarts引入中国地图并且下探到省
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.首先就是项目中引入地图包. 二.代码如下 1.项目中首先要引入json中国地图 2.免费地图数据总结前言例如 ...
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...

echarts引入地图不成功（使用echarts遇到的坑）

需求

准备

BUG处理

最后

echarts引入地图不成功（使用echarts遇到的坑）相关推荐

最新文章

热门文章