在Echarts和百度地图结合地图上放置其他Echarts图形展示

最新推荐文章于 2024-05-27 15:35:05 发布

James23vs24

最新推荐文章于 2024-05-27 15:35:05 发布

阅读量2.5k

点赞数

分类专栏： Echarts的使用学习文章标签： Echarts 百度地图多个展示

本文链接：https://blog.csdn.net/james23vs24/article/details/80127603

版权

本文介绍了如何将Echarts的散点图与百度地图结合，同时在地图的左下角利用Echarts展示柱状图进行数据分析。通过设置div的样式为position:absolute，确保图表位置可控。通过JavaScript分别初始化两个图表，成功实现在地图上的复合展示。

摘要由CSDN通过智能技术生成

在实现可视化显示数据分布的时候，使用了Echarts和百度地图结合的方式，在百度地图上利用了Echarts的散点图显示在百度地图上，然后想将一些其他数据的分析放在地图的左下角进行显示。

在这里，我设定了几个div，其中，另外的数据分析图表比如说一个柱状图的分析表，我放在了左下角，在div上的style中设定了position:absolute的属性，这个可以将分析图的位置绝对化。

<div id="chart_alarm" style="position: absolute;bottom: 5px;left: 5px;text-align: center;height: 30%;width: 50%;"></div>

然后在js中分别初始化两个div，分别画图即可显示：

// 初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart_alarm'));
				
var option1 = {
	title : {
		text : '最近7天烟感报警统计分析',
		left : 'center',
		textStyle : {
			color : '#ffffff'
		}
	},
	//x轴分类设置
	xAxis: {
        	type: 'category',