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


  2.     </script>
  3. </body>
  1.  

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. 安全测试 web应用安全测试之XXS跨站脚本攻击检测

    web应用安全测试之XXS跨站脚本攻击检测 by:授客 QQ:1033553122 说明 意在对XSS跨站脚本攻击做的简单介绍,让大家对xss攻击有个初步认识,并能够在实际工作当中运用本文所述知识做些 ...

  2. Android开发常用的一些功能列表（转）

    文章来源:http://www.cnblogs.com/netsql/archive/2013/03/02/2939828.html 1.软件自动更新下载,并提示 2.软件登录注册,以及状态保存 3. ...

  3. Asp.net Mvc身份验证

    1.安装组件 Microsoft.AspNet.Identity.Core,身份认证核心组件 安装Microsoft.AspNet.Identity.EntityFramework,EF实现身份认证 ...

  4. Hive-1.2.1_04_DML操作

    Hive官方文档:Home-UserDocumentation Hive DML官方文档:LanguageManual DML 参考文章:Hive 用户指南 1. Loading files into ...

  5. SAP ABAP 如何查找SMOD增强

    1.查找程序名 T-CODE:SE93 2.查找开发类 T-code:se38 3.查找SMOD增强 T-CODE:SE16N.表:TADIR 4.查看增强具有哪些功能 T-CODE:SE16N.表: ...

  6. PJ可能会考的模拟与枚举-自学教程

    PJ可能会考的模拟与枚举-自学教程 文/Pleiades_Antares 之前学校里看一个小可爱复习的时候偷偷听来着XD 简单记了一下重点吧,希望能对看官您有所帮助XD 以下⬇️是几个复习时讲过的题, ...

  7. Xmind破解

    原始教程 http://df1551e3.wiz03.com/share/s/3v5l7z2wdQVs2llAUc0C_-n_2cPZVe0kEA2n2iw1Ay1ApF_o

  8. __iter___和__next__方法

    __iter__方法变成一个迭代器类对象, 迭代器类要实现__next__方法

  9. 23个Python爬虫开源项目代码

    今天为大家整理了23个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快 1.WechatSogou [1]– 微信公众号 ...

  10. 转://oracle字符集

    一.oracle字符集基础知识oracle数据库有国家字符集(national character set)与数据库字符集(database character set)之分.两者都是在创建数据库时需 ...