沫沫金Echarts移動端demo

發(fā)布時間：2020-06-14 14:28:49 來源：網(wǎng)絡(luò) 閱讀：1939 作者：沫沫金欄目：web開發(fā)

鄙視百度！?。?/p>

官網(wǎng)給的Demo支持自動大小，確不給完整的源碼XXX

自己動手，豐衣足食

http://echarts.baidu.com/demo.html#bar-tick-align

用最基本的柱狀圖官網(wǎng)代碼

簡單兩步，實現(xiàn)移動端自適應(yīng)大小

//1、下載Echarts
<script src="dep/Echarts/echarts-all-3.js"></script>

//2、chart容器寬度自適應(yīng)
<!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
<div id="chart-demo" ></div>

//3、js增加自適應(yīng)功能
window.onresize = function () {
    myChart.resize(); //使第一個圖表適應(yīng)
}

重復(fù)一遍：

div容器增加自適應(yīng)width：100%

js增加自適應(yīng)功能：window.onresize=....

以上，兩步就完成對Echarts官網(wǎng)移動端的支持。

完整源碼：

<!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標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>綜合管理-圖標(biāo)樣例</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準(zhǔn)備一個具備大小（寬高）的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>
    // 基于準(zhǔn)備好的dom，初始化echarts實例
       var myChart = echarts.init(document.getElementById('chart-demo'),"roma");

       var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                        type : 'shadow'        // 默認(rèn)為直線，可選為：'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]
                    }
                ]
            };
        //*必須，綁定圖表自適應(yīng)功能
       window.onresize = function () {
           myChart.resize(); //使第一個圖表適應(yīng)
        }
        // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
        myChart.setOption(option,true);
    </script>
</body>
</html>

向AI問一下細(xì)節(jié)

沫沫金Echarts移動端demo

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽