87,922
社区成员
发帖
与我相关
我的任务
分享echarts 图标效果 能做成响应式吗 要怎么写
我看到echarts官网的样例是可以响应式变化，但是我引入了echarts相关js还是实现不了，也用了bootstrap框架，请问还需要什么？
...全文
请发表友善的回复…
发表回复
weixin_39863901 2017-09-13
- 打赏
- 举报
没有用啊。用window.onresize = myChart.resize;解决不来响应式，求大神指点
qq_35945164 2016-10-27
- 打赏
- 举报
$(".chart_analysiss:gt(0)").hide();
$(".tabCard").delegate('li','click',function(e){
//alert("098");
if($(this).hasClass("tabCard_lii")){
return;
}
$(this).addClass('tabCard_lii').siblings('li').removeClass("tabCard_lii");
var index=$(this).data('target');
$('.chart_analysiss:eq('+index+')').show(function(){
charts[index].setOption(opts[index]);
charts[index].resize();
}).siblings().hide();
});
$(".chart_analysiss").each(function(){
charts.push(echarts.init($(this).get(0),'macarons'));
});
charts[0].setOption(opts[0]);
$(window).resize(function(){
$(charts).each(function(index, chart){
chart.resize();
});
});
kakaxiD 2016-05-25
- 打赏
- 举报
具体怎么写呢？
KeChuanZuo 2014-12-26
- 打赏
- 举报
感谢你的思路，已解决，不过我直接用setOpion方法好像不行，所以我把整个方法重新执行一遍就行了！[/quote]
不行行啊，ie6、7、8不支持整个方法重新执行，会报错
地狱羔羊 2014-12-23
- 打赏
- 举报
等你的tab页切换完之后, 在去执行echart的setOption方法
a756375788 2014-12-23
- 打赏
- 举报
有没有人遇到过这个问题的呢 或者 有解决方案的
a756375788 2014-12-23
- 打赏
- 举报
感谢你的思路，已解决，不过我直接用setOpion方法好像不行，所以我把整个方法重新执行一遍就行了！
a756375788 2014-12-22
- 打赏
- 举报
window.onresize = myChart.resize;
我用了这个方法 改变浏览器窗口是可以响应式了
但是 我加了tabs标签页 就出现问题 图表的曲线图不见了 我粘贴下图 你看看这个咋解决：
第一张是页面加载时的效果；
第二张是我选择其他tabs标签页，再选择first标签页的时候，图就变成这样了；
求解决方案
Braska 2014-12-22
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
<script type="text/javascript" src="echarts-all.js"></script>
<style>
html, body{height: 100%}
</style>
</head>
<body>
<div id="page_local" style="height:80%; border:1px #000 solid;">
</div>
<script type="text/javascript" charset="utf-8">
var myChart;
$(function(){
myChart = echarts.init(document.getElementById("page_local"));
myChart.setOption( {
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
x : 'right',
data : ['AAAA','bbbb','CCCC']
},
calculable : true,
series : [ {
type : 'pie',
radius : '70%',
center : [ '33%', '50%' ],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
},
},
},
data:[
{value:335, name:'AAAA'},
{value:310, name:'bbbb'},
{value:234, name:'CCCC'}
]
} ]
});
$(window).resize(function(){
myChart.resize();
});
});
</script>
</body>
</html>a756375788 2014-12-22
- 打赏
- 举报
这个方法我用了 图标有出来，效果都有，就是没响应式啊 当我缩小浏览器窗口的时候，图标不会跟着响应变小，还是原来那么大
我是想做成响应式，这个要怎么写呢？
Braska 2014-12-22
- 打赏
- 举报
引入JS就行了 div要指定宽高 不然不会显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
<script type="text/javascript" src="echarts-all.js"></script>
<style>
</style>
</head>
<body>
<div id="page_local" style="height:900px; border:1px #000 solid;">
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var myChart = echarts.init(document.getElementById("page_local"));
myChart.setOption( {
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
x : 'right',
data : ['AAAA','bbbb','CCCC']
},
calculable : true,
series : [ {
type : 'pie',
radius : '70%',
center : [ '33%', '50%' ],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
},
},
},
data:[
{value:335, name:'AAAA'},
{value:310, name:'bbbb'},
{value:234, name:'CCCC'}
]
} ]
});
})
</script>
</body>
</html>
