| __NUXT_JSONP__("/zh/concepts/chart-size", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:[{article:{slug:"chart-size",toc:[{id:s,depth:E,text:s},{id:F,depth:q,text:G},{id:t,depth:q,text:t},{id:u,depth:E,text:u},{id:v,depth:q,text:v},{id:w,depth:q,text:w},{id:x,depth:q,text:x}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:H},children:[{type:b,tag:d,props:{href:"#%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:H}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"在"},{type:b,tag:d,props:{href:"zh\u002Fget-started"},children:[{type:a,value:"快速上手"}]},{type:a,value:"中，我们介绍了初始化 ECharts 的接口 "},{type:b,tag:d,props:{href:B,rel:[m,n,o],target:p},children:[{type:b,tag:f,props:{},children:[{type:a,value:C}]}]},{type:a,value:"。"},{type:b,tag:d,props:{href:B,rel:[m,n,o],target:p},children:[{type:a,value:"API 文档"}]},{type:a,value:"中详细介绍了参数的具体含义，建议理解后再阅读本文。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。"}]},{type:a,value:c},{type:b,tag:I,props:{id:s},children:[{type:b,tag:d,props:{href:"#%E5%88%9D%E5%A7%8B%E5%8C%96",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:s}]},{type:a,value:c},{type:b,tag:r,props:{id:F},children:[{type:b,tag:d,props:{href:"#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:G}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"通常来说，需要在 HTML 中先定义一个 "},{type:b,tag:f,props:{},children:[{type:a,value:"\u003Cdiv\u003E"}]},{type:a,value:" 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 "},{type:b,tag:f,props:{},children:[{type:a,value:"opts.width"}]},{type:a,value:" 或 "},{type:b,tag:f,props:{},children:[{type:a,value:"opts.height"}]},{type:a,value:" 将其覆盖。"}]},{type:a,value:c},{type:b,tag:y,props:{className:[z]},children:[{type:b,tag:A,props:{lang:D,"line-highlights":l,"file-name":l},children:[{type:a,value:"\u003Cdiv id=\"main\" style=\"width: 600px;height:400px;\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript type=\"text\u002Fjavascript\"\u003E\n var myChart = echarts.init(document.getElementById('main'));\n\u003C\u002Fscript\u003E\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"需要注意的是，使用这种方法在调用 "},{type:b,tag:f,props:{},children:[{type:a,value:C}]},{type:a,value:" 时需保证容器已经有宽度和高度了。"}]},{type:a,value:c},{type:b,tag:r,props:{id:t},children:[{type:b,tag:d,props:{href:"#%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:t}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。"}]},{type:a,value:c},{type:b,tag:y,props:{className:[z]},children:[{type:b,tag:A,props:{lang:D,"line-highlights":l,"file-name":l},children:[{type:a,value:"\u003Cdiv id=\"main\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript type=\"text\u002Fjavascript\"\u003E\n var myChart = echarts.init(document.getElementById('main'), null, {\n width: 600,\n height: 400\n });\n\u003C\u002Fscript\u003E\n"}]}]},{type:a,value:c},{type:b,tag:I,props:{id:u},children:[{type:b,tag:d,props:{href:"#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:u}]},{type:a,value:c},{type:b,tag:r,props:{id:v},children:[{type:b,tag:d,props:{href:"#%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:v}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"比如，图表容器是一个高度为 300px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"这种情况下，可以监听页面的 "},{type:b,tag:f,props:{},children:[{type:a,value:"window.onresize"}]},{type:a,value:" 事件获取浏览器大小改变的事件，然后调用 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fapi.html#echartsInstance.resize",rel:[m,n,o],target:p},children:[{type:b,tag:f,props:{},children:[{type:a,value:"echartsInstance.resize"}]}]},{type:a,value:" 改变图表的大小。"}]},{type:a,value:c},{type:b,tag:y,props:{className:[z]},children:[{type:b,tag:A,props:{lang:D,"line-highlights":l,"file-name":l},children:[{type:a,value:"\u003Cstyle\u003E\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n\u003C\u002Fstyle\u003E\n\u003Cdiv id=\"main\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript type=\"text\u002Fjavascript\"\u003E\n var myChart = echarts.init(document.getElementById('main'));\n window.onresize = function() {\n myChart.resize();\n };\n\u003C\u002Fscript\u003E\n"}]}]},{type:a,value:c},{type:b,tag:r,props:{id:w},children:[{type:b,tag:d,props:{href:"#%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:w}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"除了直接调用 "},{type:b,tag:f,props:{},children:[{type:a,value:"resize()"}]},{type:a,value:" 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。"}]},{type:a,value:c},{type:b,tag:y,props:{className:[z]},children:[{type:b,tag:A,props:{lang:"js","line-highlights":l,"file-name":l},children:[{type:a,value:"myChart.resize({\n width: 800,\n height: 400\n});\n"}]}]},{type:a,value:c},{type:b,tag:J,props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:K,props:{},children:[{type:a,value:L}]},{type:a,value:" 阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。"}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:r,props:{id:x},children:[{type:b,tag:d,props:{href:"#%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:x}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"正确的做法是，在图表容器被销毁之后，调用 "},{type:b,tag:d,props:{href:M,rel:[m,n,o],target:p},children:[{type:b,tag:f,props:{},children:[{type:a,value:N}]}]},{type:a,value:" 销毁实例，在图表容器重新被添加后再次调用 "},{type:b,tag:d,props:{href:B,rel:[m,n,o],target:p},children:[{type:a,value:C}]},{type:a,value:" 初始化。"}]},{type:a,value:c},{type:b,tag:J,props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:K,props:{},children:[{type:a,value:L}]},{type:a,value:" 在容器节点被销毁时，总是应调用 "},{type:b,tag:d,props:{href:M,rel:[m,n,o],target:p},children:[{type:b,tag:f,props:{},children:[{type:a,value:N}]}]},{type:a,value:" 以销毁实例释放资源，避免内存泄漏。"}]},{type:a,value:c}]}]},dir:"\u002Fzh\u002Fconcepts",path:"\u002Fzh\u002Fconcepts\u002Fchart-size",extension:".md",createdAt:O,updatedAt:O},postPath:"zh\u002Fconcepts\u002Fchart-size"}],fetch:{},mutations:[]}}("text","element","\n","a","p","code","true",-1,"span","icon","icon-link","","nofollow","noopener","noreferrer","_blank",3,"h3","初始化","指定图表的大小","响应容器大小的变化","监听图表容器的大小并改变图表大小","为图表设置特定的大小","容器节点被销毁以及被重建时","div","nuxt-content-highlight","md-code-block","https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#echarts.init","echarts.init","html",2,"在-html-中定义有宽度和高度的父容器（推荐）","在 HTML 中定义有宽度和高度的父容器（推荐）","图表容器及大小","h2","blockquote","strong","小贴士：","https:\u002F\u002Fecharts.apache.org\u002Fapi.html#echartsInstance.dispose","echartsInstance.dispose","2021-08-02T05:33:02.867Z"))); |