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>

// <script> 就是可以编写js代码的地方

<script type="text/javascript">
　　// 实例化一个对象                              通过id定位容器
  var myChart = echarts.init(document.getElementById('main'));
  // 当网页大小改变就会触发该函数
  window.onresize = function() {
   // 当该函数发生时就会执行下面的改变图表的大小
    myChart.resize();
  };
</script>

 

4、设定表大小

就是resize()里面参数：

myChart.resize({
  width: 800,
  height: 400
});

 

5、容器结点销毁和重建

myCharts.dispose() 销毁 echarts.init() 可以重新初始化