SQL Server2008的安装,SQLServer2008的安装......
2023-02-22 271 安装
mui结合echarts出现echarts图像无法显示的问题
来源：互联网
2023-02-20 17:57:22 355
MUI是一个用于前端的框架,由DCLOUD开发,MUI提供了大量的组件供开发人员使用,极大的提高了开发的效率和速度,本次解决在开发环境中遇到MUI框架在使用子页面打开时出现echarts图形无法渲染的情况.
工具/原料
- MUI框架
- HBuilderX
方法/步骤
使用MUI前端模版创建一个包含子页面的底部Tab样式页面，如下代码为模版自动生成，只需添加自定义的几个页面'home.html', 'blog.html', 'my.html'.
//mui初始化
mui.init();
var subpages = ['home.html', 'blog.html', 'my.html'];
var subpage_style = {
top: '0',
bottom: '51px'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i subpages.length; i ) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
// title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
在blog.html页面创建一个echarts图形，但在此模式下点击底部tab是无法正常渲染出效果来的
echarts的代码如下：
var chart = echarts.init(document.getElementById('bar'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
chart.setOption(option, true);
解决这个问题，本次解决的方法是在当前的页面添加一个监控事件，当触发此事件时才渲染，就不会出现无法显示的问题了，具体代码如下：
mui.init();
mui.plusReady(function(){
var foo = function(){
var chart = echarts.init(document.getElementById('bar'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
chart.setOption(option, true);
}
var flag = true;
var self = plus.webview.currentWebview();
self.addEventListener('show',function(){
if(flag){
foo();
flag = false;
}
});
});
需要先创建一个方法，并在监听事件中执行这个方法才生效
再次退出APP，重新打开，并点击底部tab，可以发现可正常显示图形
进一步优化
此方法会在每次点击底部tab后去刷新图表，如果数据为ajax请求，就会每次点击都会去请求一次，这样很没必要，可添加一个标志位来判断是否为第一次点击，否则就不会触发再次渲染
注意事项
- 如果你有更好的方法，烦请告知，互相学习
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：Win10系统中的截图软件如何编辑图片 下一篇：mysql5.6.43安装教程
相关文章
