echarts图表初始化

官网：Handbook - Apache ECharts

1、一般都会在css中定义一个，具有一点高宽，并在合适位置的结点。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。

// 这里通过id=test来定义，通过这样的方法，必须保证有宽高

<div id="test" style="width: 600px;height:400px;">div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('test'));
script>

2、通过自己实例化时候，加上参数

<div id="test">div>
<script type="text/javascript">
  var testChart = echarts.init(document.getElementById('test'), null, {
    width: 600,
    height: 400
  });
script>

3、让容器的大小与表的大小做一个相应的变化

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

window.onresize 监听网页浏览器大小是否改变，

resize() 改变图表大小

// style 就是css，#代表id 例如 #main就等于   id=main
<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
style>
<div id="main">div>

//