<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); //若有多个echarts实例(响应式布局)
$(window).resize(function(){
           myChart.resize();
           myChart1.resize();
 
       })


</script>
</body>
 

echarts 响应式布局的更多相关文章

  1. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  2. asp.net MVC通用权限管理系统-响应式布局-源码

    一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...

  3. 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  4. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  5. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  6. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  7. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  8. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  9. 【Win10开发】响应式布局——AdaptiveTrigger

    接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...

随机推荐

  1. Android--判断是否连接成功了指定wifi

    最近在做wifi的相关的东西,打印WifiInfo的时候 无意间发现一个参数,改参数可以查看是否连接成功了指定wifi,但是这是隐藏的,遂将其反射之.代码如下: //通过反射的方式去判断wifi是否已 ...

  2. 记录C/C++中遇到的一些小问题

    1. printf 比如 char a = \x90; printf("%02x", a); 想输出为90,没想到却是ffffff90,这个问题害我一个程序老是出错 最终发现只要改 ...

  3. windows端ndk 编译.c/cpp文件生成so库示例

  4. Fragment分解使用

    Fragment碎片:作为Activity的一部分,不能单独使用: 1. Fragment特点: (1)一个Fragment可以在多个Activity中重用: (2)一个Activity内部可以嵌入多 ...

  5. Python实例---模拟微信网页登录(day5)

    第六步: 实现发送/接受消息---day5代码 settings.py """ Django settings for weixin project. Generated ...

  6. wordpress使用rsync加openvpn进行同步和备份

    目录 wordpress使用rsync加openvpn进行同步和备份 环境 普通同步策略的弊端 改良的同步方案 从头细说起 备份数据 打包wordpress项目和备份 服务端安装rsync 服务端配置 ...

  7. 个人技术博客Alpha----Android Studio学习

    项目联系: 本次项目我主要负责Android studio的后端,以及游戏文案游戏策划,结果后来事情太散了,Android studio学的不咋地,文案写完还有帮着写一写数据库的插入语句,然后就是跟队 ...

  8. EasyUI设置选中复选框

    //设置选中 $('#isBind').prop('checked', true); //获取是否选中 var isChecked = $('#isBind').prop('checked'); if ...

  9. 什么是Java序列化?如何实现序列化?

    一.什么是序列化: 序列化理解成“打碎”是可以的,不过在书本上的名词就是将对象转换成二进制. 二.在java中如何实现序列化: 首先我们要把准备要序列化类,实现 Serializabel接口 例如:我 ...

  10. 无根树的计数——prufer序列

    参考博客https://www.cnblogs.com/dirge/p/5503289.html (1)prufer数列是一种无根树的编码表示,类似于hash. 一棵n个节点带编号的无根树,对应唯一串 ...