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() 可以重新初始化