002_图表容器及大小
生活随笔
收集整理的這篇文章主要介紹了
002_图表容器及大小
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 在Html中定義有寬度和高度的父容器(推薦)
1.1. 通常來說, 需要在Html中先定義一個<div>節點, 并且通過CSS使得該節點具有寬度和高度。初始化的時候, 傳入該節點, 圖表的大小默認即為該節點的大小, 除非聲明了opts.width或opts.height將其覆蓋。
<div id="main" style="width: 600px; height:400px;"></div> <script type="text/javascript">var myChart = echarts.init(document.getElementById('main')); </script>1.2. 需要注意的是, 使用這種方法在調用echarts.init時需保證容器已經有寬度和高度了。
2. 指定圖表的大小
2.1. 如果圖表容器不存在寬度和高度, 或者你希望圖表寬度和高度不等于容器大小, 也可以在初始化的時候指定大小。
2.2. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>指定圖表的大小</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'), null, { width: 600, height: 400 });// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '指定圖表的大小'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>2.3.?效果圖
3. 響應容器大小的變化
3.1. 在有些場景下, 我們希望當容器大小改變時, 圖表的大小也相應地改變。
3.2. 比如, 圖表容器是一個高度為400px、寬度為頁面100%的節點, 你希望在瀏覽器寬度改變的時候, 始終保持圖表寬度是頁面的100%。
3.3. 這種情況下, 可以監聽頁面的window.onresize事件獲取瀏覽器大小改變的事件, 然后調用echartsInstance.resize改變圖表的大小。
3.4. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>響應容器大小的變化</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script><style type="text/css">html, body, #main {width: 100%;}#main {height: 400px;}</style></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '響應容器大小的變化'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);window.onresize = function() {myChart.resize();};</script></body> </html>3.5. 效果圖
3.6. 除了直接調用resize()不含參數的形式之外, 還可以指定寬度和高度, 實現圖表大小不等于容器大小的效果。
myChart.resize({width: 800,height: 400 });總結
以上是生活随笔為你收集整理的002_图表容器及大小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 001_ECharts入门
- 下一篇： 003_颜色主题