沫沫金Echarts移動端demo

最後更新：2017-03-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：echarts 移動端自適應沫沫金

鄙視百度！！！

官網給的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" style="width: 100%;height:400px;"></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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="//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" style="width: 100%;height:400px;"></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>

沫沫金Echarts移動端demo

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More