Echarts做图随浏览器缩放

hassyma 发布于 2014/09/22 21:26
阅读 6K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

Bootstrap下 一个panel里放一个Echarts图,所有的比例都按照百分比调节,如何处理使得浏览器尺寸变化时,图始终在panel里,换句话说就是图也随之变化,使用的浏览器是火狐,Echarts是最新版

其中采用标签式引入echarts-plain.js,bootstrap使用的是contains-fluid布局

尝试使用window.resize(),但是这仅能控制一个页面里的一张图,如果控制多个panel(每个包含一张或者多张)使其缩放呢?

加载中
0
Kener-林峰
Kener-林峰
window.resize响应函数里对当前页面所有的图表实例做resize啊
h
hassyma
能否给个具体的例子,在引用评论中,我粘贴了代码,会覆盖的,望回答
0
h
hassyma

引用来自“Kener-林峰”的评论

window.resize响应函数里对当前页面所有的图表实例做resize啊
当同一个页面多次调用饼图时,后一个饼图的resize会覆盖上一个饼图的resize

 function loadGraphicPie(data, divId,index) {
            var echartsObject = echarts.init(document.getElementById(divId));
            var option = {
      
                tooltip : {
                    trigger : 'item',
                    formatter : "{b} : {c} ({d}%)"
                },
                calculable : false,
                /*color: ['#FF8800','#FF8888','#6495ed','#ff7f50','#87cefa','#da70d6'],*/
                color: ['#FF8800','#00DDDD','#D28EFF','#87cefa','#da70d6'],
                
            };
            option.series = [];
            var length = option.series.length;
            option.series[length] = {
                radius : ['40%', '70%'],
                center : [ '50%', '50%' ],
                type : "pie",
                startAngle : index,
                data : [],
                itemStyle : {
                    // 默认样式(饼图外的样式)
                    normal : {
                        label : {
                            show : true,
                            position : 'outer',
                            formatter : "{b}:  \n {c} ({d}%)"
                        },
                        labelLine : {
                            show : true
                        }
                    }
                }
            };
            
            $.each(data, function(i, item) {
                var valueNum = 0;// 数量
                var nameStr = "";// 名称
                $.each(item, function(key, value) {
                    valueNum = item.ML;
                    nameStr = item.SL;
                    
                });
                option.series.data.push({
                    value : valueNum,
                    name : nameStr
                });
            });
        
            // 在指定dom上生成echarts对象
            echartsObject.setOption(option);

            setTimeout(function (){
                 window.onresize = function () {
                     echartsObject.resize();
                     
                 }
             },200)
                              
            
        }
h
hassyma
额,新手,不知道怎么做,问别人都不知道,只能请教你们了,麻烦举个例子,谢谢啦
Kener-林峰
Kener-林峰
该怎么哭好 T_T...
0
撕花焚玉
撕花焚玉
重新调一下 图形对象的 .resize() 方法 就好了。。亲测可用。
返回顶部
顶部