沫沫金Echarts移动端demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了沫沫金Echarts移动端demo相关的知识，希望对你有一定的参考价值。
鄙视百度！！！
官网给的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的主要内容，如果未能解决你的问题，请参考以下文章
沫沫金原创提供：完整的根据身份证获取省份性别年龄生日及页面验证