87,907
社区成员
发帖
与我相关
我的任务
分享echarts中同一页面 多图表resize 只有最后一个改变其余不变的问题
看了网上很多关于多图表的例子，但是都是不同的图实例化的名称是不一致的 所以直接使用的是
window.addEventListener("resize",function(){
myChart.resize();
myChart1.resize();
............................
});
但是我的图表是后台传数据来，添加图表数量，因此不知道有多少个实例，而且实例的类型也不知道 所以所有的实例都是一个名称，使用上面的这个话是不起做用的
window.addEventListener("resize",function(){
myChart.resize();
});
所以，有没有不用更改实例名称能够用的啊 ，我很多办法都用过了，包裹在for循环中，我console.log()出来可以出来8个实例，但是以使用上面的代码，最终是第8个才会resize其他的不会，求大神解惑。
window.addEventListener("resize",function(){
myChart.resize();
myChart1.resize();
............................
});
但是我的图表是后台传数据来，添加图表数量，因此不知道有多少个实例，而且实例的类型也不知道 所以所有的实例都是一个名称，使用上面的这个话是不起做用的
window.addEventListener("resize",function(){
myChart.resize();
});
所以，有没有不用更改实例名称能够用的啊 ，我很多办法都用过了，包裹在for循环中，我console.log()出来可以出来8个实例，但是以使用上面的代码，最终是第8个才会resize其他的不会，求大神解惑。
...全文
请发表友善的回复…
发表回复
学无止境之问道 2018-08-01
- 打赏
- 举报
单一的图形可以不用遍历
学无止境之问道 2018-08-01
- 打赏
- 举报
你后台传的数据为每个数据都添加一个type数据标识，通过switch判断标识来区分数据图形
yonghumingzlk 2018-03-16
- 打赏
- 举报
之前的提问不知道为什么被删掉了，还是想请楼主告知一下
yonghumingzlk 2018-03-16
- 打赏
- 举报
另外，好像不用遍历数组，直接用
window.addEventListener("resize",function(){
myChart.resize();
});
yonghumingzlk 2018-03-16
- 打赏
- 举报
请问您是怎么根据后台传的数据动态添加图表个数的呢
前端小菜 2017-09-19
- 打赏
- 举报
我也是这么干的 完美
学无止境之问道 2017-07-14
- 打赏
- 举报
谢谢 你的思路台好了 不过最后resize要改为
window.addEventListener("resize",function(){
for(var i = 0; i < charts.length; i++){
charts[i].resize();
}
});
这样就over了 谢谢
囧 2017-07-14
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<div id="main2" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var charts = [];
myChart= echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
charts.push(myChart);
myChart = echarts.init(document.getElementById('main2'));
myChart.setOption(option);
charts.push(myChart);
window.onresize = function(){
for(var i = 0; i < charts.length; i++){
charts[i].resize();
}
};
</script>
</body>
</html>
香蕉猪 2017-07-14
- 打赏
- 举报
果然charts是数组结构。。。那就需要数组中的元素一个个取到，，，，然后resize()
cheery_an 2017-07-13
- 打赏
- 举报
记录下实例化后的id，一个一个resize。
学无止境之问道 2017-07-13
- 打赏
- 举报
大哥 窗口代销变化不用resize？
cooljser 2017-07-13
- 打赏
- 举报
为什么要使用resize事件呢？
