码迷,mamicode.com
首页 > 移动开发 > 详细

沫沫金Echarts移动端demo

时间:2017-03-22 23:59:12      阅读:2808      评论:0      收藏:0      [点我收藏+]

标签: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

标签:echarts 移动端 自适应 沫沫金

原文地址:http://zl0828.blog.51cto.com/2242565/1909260

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!