當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

002_图表容器及大小

發(fā)布時(shí)間：2025/5/22 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 002_图表容器及大小小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 在Html中定義有寬度和高度的父容器(推薦)

1.1. 通常來(lái)說(shuō), 需要在Html中先定義一個(gè)<div>節(jié)點(diǎn), 并且通過(guò)CSS使得該節(jié)點(diǎn)具有寬度和高度。初始化的時(shí)候, 傳入該節(jié)點(diǎn), 圖表的大小默認(rèn)即為該節(jié)點(diǎn)的大小, 除非聲明了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. 需要注意的是, 使用這種方法在調(diào)用echarts.init時(shí)需保證容器已經(jīng)有寬度和高度了。

2. 指定圖表的大小

2.1. 如果圖表容器不存在寬度和高度, 或者你希望圖表寬度和高度不等于容器大小, 也可以在初始化的時(shí)候指定大小。

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">// 基于準(zhǔn)備好的dom, 初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'), null, { width: 600, height: 400 });// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {// 為圖表配置標(biāo)題title: {text: '指定圖表的大小'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項(xiàng)xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項(xiàng)yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script></body> </html>

2.3.?效果圖

3. 響應(yīng)容器大小的變化

3.1. 在有些場(chǎng)景下, 我們希望當(dāng)容器大小改變時(shí), 圖表的大小也相應(yīng)地改變。

3.2. 比如, 圖表容器是一個(gè)高度為400px、寬度為頁(yè)面100%的節(jié)點(diǎn), 你希望在瀏覽器寬度改變的時(shí)候, 始終保持圖表寬度是頁(yè)面的100%。

3.3. 這種情況下, 可以監(jiān)聽(tīng)頁(yè)面的window.onresize事件獲取瀏覽器大小改變的事件, 然后調(diào)用echartsInstance.resize改變圖表的大小。

3.4. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>響應(yīng)容器大小的變化</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">// 基于準(zhǔn)備好的dom, 初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {// 為圖表配置標(biāo)題title: {text: '響應(yīng)容器大小的變化'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項(xiàng)xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項(xiàng)yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);window.onresize = function() {myChart.resize();};</script></body> </html>

3.5. 效果圖

3.6. 除了直接調(diào)用resize()不含參數(shù)的形式之外, 還可以指定寬度和高度, 實(shí)現(xiàn)圖表大小不等于容器大小的效果。

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

總結(jié)

以上是生活随笔為你收集整理的002_图表容器及大小的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。