bootstrap中tab echart 图表显示不出的解决方法

首先需要使用javascript 来启动tab标签页

<ul id="myTab" class="nav nav-tabs">
	<li class="active">
		<a href="#ta_1">
			 图表
		</a>
	</li>
	<li><a href="#ios">iOS</a></li>
	<li><a href="#android">android</a></li>

</ul>

 <div class="tab-pane" id="ta_1">
	<div id="scatter1" style="height:200px;"></div>
 </div><!-- /.tab-pane -->
$('#zidingyiqunChart li a').click(function (e) {
			 e.preventDefault();
			 $(this).tab('show');
			 var myChart = echarts.init(document.getElementById('scatter1'),theme);
		     myChart.setOption(option);
})

需要切换tab时 重新init 和setOption下,否则图形显示不出。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏清晨我上码

第二十节 netty源码分析之 reactor中的EventLoop01

(如果使用到的是 NIO, 那么通常是 NioEventLoopGroup), 那么这个 NioEventLoopGroup 在 Netty 中到底扮演着什么角...

11420
来自专栏蓝天

编译boost,去掉不使用的组件

说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而...

18030
来自专栏一丘一壑

用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条...

23240
来自专栏颇忒脱的技术博客

ClassLoader(一)- 介绍

讲到bootstrap class loader就不得不说三种常见的ClassLoader实现。

8930
来自专栏开发实战

swagger-bootstrap-ui的使用说明

有些朋友在使用这个jar包的时候会出现接口出不来的情况,或者只出现ui默认的几个接口,项目的api接口没有出来,

38130
来自专栏运维经验分享

linux tomcat 无法关闭 :8005端口未启动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25283709/article/details/550...

27220
来自专栏运维经验分享

tomcat shutdown.sh结束不了,Could not contact localhost:8005

使用./shutdown.sh关闭Tomcat,有时会关闭成功,有时会出现关闭错误;

23340
来自专栏A周立SpringCloud

聊聊 SpringCloud 中的父子容器

在引入 SpringCloud 的项目中会多次创建 Spring 容器,本篇从源码角度深入分析具体哪些点会创建 Spring 容器,以及这些容器之间的区别与联系...

34420
来自专栏前端实习日记

JS:用rem来做响应式开发

电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是...

25110
来自专栏编程微刊

Bootstrap Table表格分页的使用及分页数据(Excel)导出

1:引入Bootstrap Table表格插件相关链接:这里直接拿来用就可以了,如果要下载到本地,可以自行去官网下载。

87830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励