溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
鄙視百度！！！
官網給的Demo支持自動大小，確不給完整的源碼XXX
自己動手，豐衣足食
http://echarts.baidu.com/demo.html#bar-tick-align
用最基本的柱狀圖官網代碼
簡單兩步，實現移動端自適應大小
//1、下載Echarts
<script src="dep/Echarts/echarts-all-3.js"></script>
//2、chart容器寬度自適應
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="chart-demo" ></div>
//3、js增加自適應功能
window.onresize = function () {
myChart.resize(); //使第一個圖表適應
}重復一遍：
div容器增加自適應width：100%
js增加自適應功能：window.onresize=....
以上，兩步就完成對Echarts官網移動端的支持。
完整源碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>綜合管理-圖標樣例</title> <!-- Bootstrap --> <link href="dep/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <link href="css/common.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> </style> </head> <body class="container-fluid"> <div class="row"> <div class="col-md-12 col-xs-12"> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="chart-demo" ></div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="dep/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="dep/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <!-- 增強：BootStrap carousel（輪播）組件支持觸屏 --> <script src="dep/jquery.hammer.js-master/hammer.min.js"></script> <script src="dep/jquery.hammer.js-master/jquery.hammer.js"></script> <!-- Echarts start --> <script src="dep/Echarts/echarts-all-3.js"></script> <script src="dep/Echarts/roma.js"></script><!-- Echarts 主題 --> <script> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('chart-demo'),"roma"); var option = { tooltip : { trigger: 'axis', axisPointer : { // 坐標軸指示器，坐標軸觸發有效 type : 'shadow' // 默認為直線，可選為：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['1月', '2月', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'門急診人次', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220] } ] }; //*必須，綁定圖表自適應功能 window.onresize = function () { myChart.resize(); //使第一個圖表適應 } // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option,true); </script> </body> </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
