沫沫金Echarts移动端demo
鄙视百度！！！
官网给的Demo支持自动大小，确不给完整的源码XXX
自己动手，丰衣足食
http://echarts.baidu.com/demo.html#bar-tick-align
用最基本的柱状图官网代码
简单两步，实现移动端自适应大小
|
1
2
3
4
5
6
7
8
9
10
11
|
//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官网移动端的支持。
完整源码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!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相关推荐
- 沫沫金【实践可用】--web工程ORM数据库链接(JDBC)链接集群库||普通库，两种标准...
普通链接配置,应用到集群会启动失败,请修改 集群数据库链接 jdbc.url=jdbc:oracle:thin:@//127.0.0.1:1521/momojin 普通数据库链接 jdbc.url=j ...
- 沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
- 沫沫金：联想E431 1K6安装Windows系统100%成功技巧
你是否纠结新买回来的笔记本是Linuxs而无法操作,兴起的要换到windows去遇到系统安装提示:" >Units specified don't exist SHSUCDX can' ...
- 阿里移动|《蚂蚁金服移动端高可用技术实践》
摘要:对于移动技术而言,2017年是继往开来之年.一方面是移动技术领域进入深水区,另一方面移动技术边界和内涵被不断重塑.阿里巴巴希望进一步推动移动应用研发事实标准落地,从而赋能整个行业开发者.在201 ...
- 网页瘦身方法-金瑞帆高端建站
网页瘦身方法-金瑞帆高端建站 网站质量的大小跟人的体重一样,质量越大人就越胖,人越胖就越不招人喜欢,同理网站也越瘦越精致,那么网页如何将质量瘦下来呢,迅美提供四个小技巧: 1.抛弃table,布局采用 ...
- 2016.08互金平台移动端影响力50强
2015年,也被称为互联网金融移动化的元年,强化移动端的竞争力已成为互联网金融平台的重要战略之一. 以最活跃的P2P网贷领域为例,根据网贷之家.盈灿咨询的投资者调研及主要平台的数据显示,在2015年末 ...
- 竞价排名和php是什么,竞价排名优缺点详解-金瑞帆高端建站
竞价排名优缺点详解-金瑞帆高端建站 搜索引擎排名分为自然排名和竞价排名,自然排名就是我们通常知道的SEO快照位置排名,而竞价排名是指通过付费给搜索引擎服务商获得在广告位上面的排名,搜索引擎服务商主要基 ...
- 海康网络摄像头android,海康网络摄像头的Android端Demo
[实例简介]海康网络摄像头的Android端Demo; 可实现通过wifi实时读取并显示摄像头捕捉的画面; [实例截图] [核心代码] /** * DemoActivity Class * @auth ...
- 青海话搅沫沫的意思和含义，搅沫沫是什么意思
搅沫沫 青海话中搅沫沫的意思和含义,搅沫沫是什么意思 最近朋友们经常问青海话中的搅沫沫在普通话中是什么意思? 那我就给大家大概解释下在青海话中"搅沫沫"是什么意思,希望能对你的疑惑 ...
最新文章
- iOS 11开发教程（二十）iOS11应用视图美化按钮之设置按钮的状态
- 知乎用户和龙鹏-言有三：计算机视觉应该怎样入门？
- printf以及可变参数函数讲解（转载）
- 全站 HTTPS 就一定安全了吗？
- MacOS 系统使用命令安装软件包
- [css] 有用过Flex吗？简要说下你对它的了解
- 怎样设置电脑壁纸_怎样设置电脑的资料定时备份到移动硬盘里
- 3-2：类与对象上篇——类的对象模型和计算类的大小以及this指针问题
- CentOS 7 SSH相关使用问题及其解决办法
- 百度Apollo自动驾驶车辆将在苏州太湖面向民众开放
- 黄轩成为QQ阅读新代言人 变身“队长”号召网友 “组队读书”
- Android页面传值b,android数据传递（一）之activityA传递到activityB
- android个人理财通项目实训计划书
- WEB常用HTML颜色代码表
- ionic refresher(下拉刷新)
- Vulkan 教程（1）开篇
- Aseprite动画技巧
- 使用python turtle绘制简笔画大白
- sdcard里边的东西能删除吗_手机内存中有一个sdcard文件夹删除不了
- 线性嵌套实例（三个小实例）