| (window.webpackJsonp=window.webpackJsonp||[]).push([[52],{346:function(e,t,n){"use strict";n.r(t),t.default='# Chart Container and Size\n\nIn [Get Started](${lang}/get-started), we introduced the API to initialize the ECharts [`echarts.init`](${mainSitePath}/api.html#echarts.init). [API Document](${mainSitePath}/api.html#echarts.init) has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.\n\nRefer to several common usage scenarios, here is the example to initialize a chart and change the size.\n\n## Initialization\n\n### Define a Parent Container in HTML\n\nIn general, you need to define a `<div>` node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring `opts.width` or `opts.height`, the size of the chart will default to the size of the node.\n\n```html\n<div id="main" style="width: 600px;height:400px;"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n<\/script>\n```\n\nTo be noticed, before calling `echarts.init`, you need to make sure the container already has width and height.\n\n### Specify the chart size\n\nIf the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.\n\n```html\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'), null, {\n width: 600,\n height: 400\n });\n<\/script>\n```\n\n## Reactive of the Container Size\n\n### Listen to the Container Size to Change the Chart Size\n\nIn some cases, we want to accordingly change the chart size while the size of containers changed.\n\nFor instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.\n\nYou can listen to `window.onresize` of the site to catch the event that the browser is resized. Then use [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) to resize the chart.\n\n```html\n<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n window.onresize = function() {\n myChart.resize();\n };\n<\/script>\n```\n\n### State a Specific Chart Size\n\nExcept for calling `resize()` without parameters, you can state the height and width to implement the chart size different from the size of the container.\n\n```js\nmyChart.resize({\n width: 800,\n height: 400\n});\n```\n\n> Tips: Pay attention to how the API defined while reading the documentation. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.\n\n### Dispose and Rebuild of the Container Node\n\nWe assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.\n\nEssentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.\n\nThe correct way is, call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to dispose the instance after the container was disposed, and call [echarts.init](${mainSitePath}/api.html#echarts.init) to initialize after the container was added again.\n\n> Tips: Call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.\n'}}]); |