當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

002_图表容器及大小

發布時間：2025/5/22 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><script type="text/javascript" src="echarts.js"></script></head><body><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><script type="text/javascript" src="echarts.js"></script><style type="text/css">html, body, #main {width: 100%;}#main {height: 400px;}</style></head><body><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_图表容器及大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。