echart地图不显示问题

问题：使用echarts中的地图不显示，一方面因为echarts4.9版本下有地图，5.0版本以上失去这个功能，想要别的版本把@后的版本号改掉就行，运行：

// 安装4.9版本的echarts
npm install echarts@4.9.0 --save
// 卸载echarts运行：
npm uninstall echarts

<template>// 2.准备一个具备大小的DOM容器<div id="project_map" style="width:70%;height:100%;"></div>
</template><script>// 1.导入echart
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)import { projectInformationCount } from '@/api/project_information/project_overview'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui';export default {data () {return {area0_count: [],}},mounted () {this.getCount()this.project_map_chart();},methods: {// 获取数据getCount () {projectInformationCount({token: getToken(),}).then(res => {this.area0_count = res.area0_countthis.project_map_chart();}).catch(error => {Message.error(error)})},// 制作地图mapChart (id) {//3. 初始化echarts实例对象var myChart = echarts.init(document.getElementById(id))//4. 指定配置项和数据var option = {geo: {map: 'china',//这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致label: { show: true }, //显示省份roam: true, //缩放},series: [], //地图上二开点线特效数组，按需添加}//5. 将配置项和数据设置给实例对象（mychart）myChart.setOption(option)// 6. 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener('resize', function () {// 让我们的图表调用 resize这个方法myChart.resize()})},// 地图project_map_chart (e) {this.mapChart('project_map');},}
}
</script>

最后效果：

在这里分享一个echarts的库，地址是https://www.isqqw.com/#/homepage

echart地图不显示问题相关推荐

echart地图+散点图表，点击散点触发BootstrapDialog弹框
echart地图和散点图结合,点击散点触发BootstrapDialog弹框. 需要引入文件jquery.bootstrap.bootstrap-dialog.min.js.echarts.min.j ...
vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options 总结获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
echart地图以及地图链路样式
echart地图以及地图链路样式 html js引入的先后顺序很重要 <!DOCTYPE html> <html lang="en"> <head&g ...
关于如何自定义echart地图
关于如何自定义echart地图开门见山的说自定义显示echart地图最重要的就是这个引入的文件文件里面大概是这样的最主要是这个registerMap(mapName,geoJson,spe ...
中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...
java百度地图地名定位地址_百度地图定位显示省市区街道名称，非常实用
[实例简介] 百度地图定位显示省市区街道名称,非常实用 [实例截图] [核心代码] locSDK_3.1_Demo └── locSDK_3.1_Demo ├── AndroidManifest.xm ...
单片机数据在网页上显示_不务正业的Excel也玩地图，在地图上显示数据，好玩又简单...
Excel的尴尬 Excel越来越不象Excel,我们对Excel的第一映象就是制表.数据分析.常规操作自不必说,高级一点的无非就是透视图表.VBA等.不管再怎么高级,Excel似乎都是围绕数字在操作 ...
中高德地图只显示某一城市_干货 | 如何快速制作数据地图？让你的可视化逼格再高一级！...
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图. 数据地图可以最直观的表达出数据之间的 ...
HTML自动获取地址,网页中自动获取经纬度值并在地图中显示当前位置实例代码...
下面的HTML代码就是实例完整代码,如果你需要本项目完整实例代码,下载链接在文章最底部网页中自动获取经纬度值并在地图中显示当前位置,可在地图中进行拖动选择当前位置并输出经纬度,这是项目实例代码,可参 ...
中高德地图只显示某一城市_Excel实用知识：从零开始，一步步制作属于你自己的三维演示地图...
说明本文是视频内容的图文整理版. 原版视频可以在文末观看三维地图操作详解这是一份原始表格,点击表内任意一个单元格,使用Ctrl和T,将这张表转换为动态表,点击插入,三维地图. 重命名图层为销售 ...

echart地图不显示问题

问题：使用echarts中的地图不显示，一方面因为echarts4.9版本下有地图，5.0版本以上失去这个功能，想要别的版本把@后的版本号改掉就行，运行：

echart地图不显示问题相关推荐

最新文章

热门文章