Mui popover 弹框显示Echarts柱状图

最新推荐文章于 2023-09-15 09:05:23 发布

开发中的小学生

最新推荐文章于 2023-09-15 09:05:23 发布

阅读量755

点赞数

分类专栏：前端文章标签： Mui popover Echarts 柱状图

本文链接：https://blog.csdn.net/zx145105/article/details/89922698

版权

本文探讨了在Mui框架下如何在Popover弹框中实现Echarts柱状图的动态显示。在实际开发中，从HelloMui项目的静态数据示例出发，解决动态数据与Echarts结合的问题。文章详细介绍了从引入Mui CSS和JS，创建锚点，设置弹框容器样式，到AJAX请求数据并初始化Echarts图表的步骤，特别强调了为Echarts容器设定高度和宽度以确保图表正常显示的重要性。

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

Mui作为应用于App开发的前端框架,确实强大.今天,就来分享在Mui popover弹框这一强大功能中遇到的问题,以及解决办法.
首先,HBuilder X中提供有来自官网的HelloMui项目,里面有各种功能的实例,只不过都是一些静态数据,和Echarts官网实例一样.在实际开发中,我们遇到的问题,基本上不会是静态数据(ps:静态数据copy总不会错吧),对于处理动态数据,跟静态数据还是有很大差距的.
言归正传,HelloMui提供了对弹框的静态数据展示,展示的数据是列表,百度了几乎所有的博客基本上都是列表(脑壳儿疼),根本没有关联Echarts的popover.
下面是HelloMui提供的右上角弹框实现

<link rel="stylesheet" href="../css/mui.min.css">
<style>
	#topPopover {
    
		position: fixed;
		top: 16px;
		right: 6px;
	}
	.mui-popover {
    
		height: 300px;
	}
</style>
<body>
	<header class="mui-bar mui-bar-nav">
		<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
	</header>
	<!--右上角弹出菜单-->
	<div id="topPopover" class="mui-popover">
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class=