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;
Echarts自适应浏览器大小的更多相关文章
- css自适应浏览器大小
css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- vue Echarts自适应浏览器窗口大小
<template> <div class="chinaecharts"> <div id="mapChart" ref=&quo ...
- HTML中使背景图片自适应浏览器大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- Echarts图表随浏览器大小,模块大小,位置实时更新
1.图表位置随浏览器大小改变 2.图表位置随模块的改变而改变 只需要在事件函数中添加:
- ExtJS6 自适应浏览器窗口大小
ExtJS6官方文档推荐使用Ext.on.做一个小例子,创建一个Panel显示在页面上,使它的大小随浏览器变化,自适应浏览器窗口大小. html:增加一个css样式给Panel加上红色border. ...
- Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...
- Unity Web自适应浏览器
unity web的自适应浏览器比我想象中要更简单,但是这里也只有更改最简单的东西实现了自适应.发布web时,在playersetting里面设置分辨率为你在Game窗口自定义的分辨率大小,以保证内容 ...
随机推荐
- jQuery第三章
一.jQuery中的DOM操作 一般来说,DOM操作分为3个方面,即DOM Core核心.HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById( ...
- bzoj1338: Pku1981 Circle and Points单位圆覆盖
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1338 1338: Pku1981 Circle and Points单位圆覆盖 Time ...
- 1、第一个Struts2程序
为了让我们以后开发方便,我们需要配置struts.xml的dtd的头,这样在编写struts.xml文件中可以有提示! 操作如下: (1)打开myeclipse→window→Preferences→ ...
- WindowsAzure上把WebApp和WebService同时部署在一个WebRole中
注:本文为个人学习转载,原文地址:http://blog.csdn.net/zztfj/article/details/6740327 最近开发一个和WindowsAzure相关的应用,该应用还调用了 ...
- delphi edit 中undo 和clearundo 复制粘贴等总结
edit 和memo都有undo功能, Undo:恢复到改动前. ClearUndo:撤销掉Undo缓冲区的内容,则将无法恢复到改动前的 从该文本框的撤销缓冲区中清除关于最近操作的信息,根据应用 程序 ...
- Myeclipse 激活代码 8.6以前的版本
public class Akey { private static final String LL = "Decompiling this copyrighted software is ...
- 常量指针(const X*)和指针常量(X* const)
const X* 类型的指针(指向常量的指针),此指针的地址是一个变量,是可以修改的:但其所指向的内容是常量,是不可以修改的. 例如: 1: char name[5] = "lisi&quo ...
- iphone下元素放在了一个position: fixed的div中无法点击
网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...
- css3字体
1.定义个性化字体 @font-face{ font-family:字体名字; src:字体地址,可以多写几个用逗号隔开兼容浏览器 } div{ font-family:字体名字/*使用字体*/ } ...
- 移动前端不得不了解的HTML5 head 头标签(中上篇)
Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...