Echarts自适应浏览器大小

var myChart = echarts.init(document.getElementById(‘sitesChar‘));
var option = {
    title : {
        text: ‘Nodejs站点服务器分布‘,
        subtext: ‘平台组‘,
        x:‘center‘
    },
    tooltip : {
        trigger: ‘item‘,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : ‘vertical‘,
        x : ‘left‘,
        data: _ips
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: false},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: false,
                type: [‘pie‘, ‘funnel‘],
                option: {
                    funnel: {
                        x: ‘25%‘,
                        width: ‘50%‘,
                        funnelAlign: ‘left‘
                        //max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:‘服务器IP:站点数‘,
            type:‘pie‘,
            radius : ‘55%‘,
            center: [‘50%‘, ‘60%‘],
            data: _data
        }
    ]
};

// 为echarts对象加载数据
myChart.setOption(option);
// 加上这一句即可
window.onresize = myChart.resize;

  

时间: 2024-10-10 05:00:37

Echarts自适应浏览器大小的相关文章

表格自动适应浏览器大小及DIV浮动设计(页面自适应浏览器大小)

一.表格自适应浏览器大小 之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小. 解决方法: 1.一般是给表格整体使用样式:table-layout:fixed: 2.将表格中的各个单元格的width和height属性值设为比例,而不是给定值. <table style="width:100%"> <tr> <td style="width:20%">skinny cell&l

使用JQuery使浏览器内的控件自适应浏览器大小

首先在<head>中加入对jQuery的引用 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> 在JS中添加方法window.onresize和window.onload该方法为系统函数,在有触发时自动调用 <script type="text/javascri

背景图片自适应浏览器大小

解决办法: 1.使用div,设置z-index为负数,并使此div大小为整个body的大小: 2.div里放个<img>标签,显示图片: 3.body标签的background属性去掉 具体见代码: <div style="position:absolute; width:100%; height:100%; z-index:-1;">     <img src="img/bg_home.png" height="100%&q

HTML中使背景图片自适应浏览器大小

1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3.body的background属性去掉,要不然会被遮住 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

页游中常见的游戏元素位置自适应浏览器大小变化之解决方案

在玩页游中,很常见的一个功能是,当你改变浏览器的大小时,页游中一些元素位置比如聊天框等会自动随着浏览器变化而变化,该功能如何实现了? 哈,解决方式是:监听舞台变化,获取变化后的舞台宽高(stage.stageWidth,stage,stageHeight),然后根据新的舞台宽高,再改变舞台上各个元素的位置. 上代码测试: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=&

使用svg让页面自适应浏览器大小,整体等比缩放

网页代码: <!DOCTYPE html> <html> <head> <style> body { margin:0; padding:0; width:100%; height:100%; background-color: #282828; } /*自定义悬浮菜单中滚动条*/ ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-track { background-colo

找到一款可以自适应浏览器大小的js,对于iframe特别好用

使用代码如下 <html> <head> <script> function SetCwinHeight(obj) { var cwin=obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) cwin.height = cwin.

echarts图随浏览器的大小自适应变化大小

echarts图初始化后不能自适应浏览器的缩放,线条等会伸出div框或不能填充,需要让echarts的图resize一下,在调用浏览器窗口大小变化时调用resize方法即可 "ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到自适应的效果,常见如window.onresize = myChart.resize" 使用方法: window.onresize = function(){         

背景图片自适应分辨率浏览器大小自动拉伸全屏代码

<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> <img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" /> </div&