Mui popover 弹框显示Echarts柱状图
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="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1a>
li>
<li class="mui-table-view-cell"><a href="#">Item2a>
li>
<li class="mui-table-view-cell"><a href="#">Item3a>
li>
<li class="mui-table-view-cell"><a href="#">Item4a>
li>
<li class="mui-table-view-cell"><a href="#">Item5a>
li>
<li class="mui-table-view-cell"><a href="#">Item6a>
li>
<li class="mui-table-view-cell"><a href="#">Item7a>
li>
ul>
div>
div>
div>
<script src="../js/mui.min.js">script>
<script>
mui.init();
mui.plusReady(function () {
});
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
mui('body').on('hidden', '.mui-popover', function(e) {
//console.log('hidden', e.detail.id);//detail为当前popover元素
});
script>
body>
其中的a标签作为锚点,通过href的属性值#toppopover来链接到id为toppopover的容器,需要给弹框容器一个高度,将需要展示的数据(比如普通的文本,列表,echarts图表等等)放入到容器中.
最初,遇到的问题是不知道怎么将echarts图表数据放在哪里,后来是echarts图表不正常显示等等.
1.根据要点,首先引入mui的css和jss
/*自己的目录结构*/
<link rel="stylesheet" href="../../css/mui.min.css" />
<script type="text/javascript" src="../../js/jquery/jquery-2.0.3.min.js">script>
<script type="text/javascript" src="../../js/mui.js">script>
<script src="../../js/echarts.min.js">script>
2.加一个锚点a标签
<header class="mui-bar mui-bar-nav" style="background-color: #238CC1;">
<a href="#topPopover" id="cloumn" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right">a>
header>
3.给锚点一个容器
<div id="topPopover" class="mui-popover">
<div class="mui-scroll" id="columnChart" >
div>
div>
4.给容器设置样式
<style>
/*popover容器*/
.mui-popover {
height: 600px;
width: 600px;
/* background-color: transparent; */
/* opacity: 0.5; */
}
/*遮罩*/
.mui-backdrop{
/* background-color: transparent; */
/* background-color: lightgray; */
}
/*echarts:图表容器*/
.mui-scroll{
/* opacity: 0.8; */
background-color: white;
height: 600px;
width: 600px;
position: absolute;
}
/*锚点:a标签*/
#cloumn{
border: none;
position: fixed;
right: 16px;
}
style>
5.ajax请求数据,然后初始化容器,将echarts放入容器中.需要注意的是,需要给放置echarts的容器一个height和width,才能正常显示.
到此结束!