vue基于Echarts、百度地图MapVGL实现可视化大屏数据展示_vue echarts 大屏地图

</div>

## 二、Echarts图表自适应


1. 图表div的宽度、高度不要写死，可以使用百分比
2. echart图表本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas


加载图表的组件*graph.vue*

加载中...

this.drawGraph(this.id,this.data);
},
beforeDestroy(){
if(this.graph) this.graph.clear();
},
watch:{
data:{
handler(newValue,oldValue){
this.drawGraph(this.id,newValue);
},
deep:true
}
}
}

graph.vue的使用  
 *demo.vue*

图表标题

}

## 三、Echarts自定义主题


大屏数据展示往往需要根据设计图自定义主题。Echarts自定义主题也十分简单，操作如下：  
 1.使用Echarts官网[主题编辑器]( )（https://echarts.apache.org/zh/theme-builder.html）自定义主题，下载主题json。  
 2.注册主题([查看官网说明]( ))

// 假设主题名称是 “vintage”
fetch(‘theme/vintage.json’)
.then(r => r.json())
.then(theme => {
echarts.registerTheme(‘vintage’, theme);
var chart = echarts.init(dom, ‘vintage’);
})

## 四、vue-baidu-map与vue-mapvgl




| vue-baidu-map | vue-mapvgl |
| --- | --- |
| 基于 百度地图 JS API 开发 | 百度地图mapvgl开发 |
| 可实现常见的地图信息可视化 | 基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。 |
| <https://dafrok.github.io/vue-baidu-map> | Vue2.x (<https://docs.guyixi.cn/vue-mapvgl>) Vue3 (<https://vue-mapvgl.guyixi.cn/>) |



### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

-mapvgl>) Vue3 (<https://vue-mapvgl.guyixi.cn/>) |



### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/89d8f87ca70783a1fc8ca9bccf6781ad.webp?x-oss-process=image/format,png)