<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="js/echarts.common.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

       var worldMapContainer = document.getElementById('main');

//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

var resizeWorldMapContainer = function () {

    worldMapContainer.style.width = window.innerWidth+'px';

    worldMapContainer.style.height = window.innerHeight+'px';

};

//设置容器高宽

resizeWorldMapContainer();

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(worldMapContainer);

        // 指定图表的配置项和数据

        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);

        //用于使chart自适应高度和宽度

        window.onresize = function () {

            //重置容器高宽

            resizeWorldMapContainer();

            myChart.resize();

        };

    </script>

</body>

</html>

呵呵 终于解决了这个问题,官方都没有写明白。。

Echarts图标自适应问题(已解决)的更多相关文章

  1. Win7中右下角“小喇叭”声音图标消失的解决方法？（已解决）

    Win7中右下角"小喇叭"声音图标消失的解决方法?(已解决) 1.打开任务管理器. 2.右键explorer.exe选择右键结束. 3.在按ctrl+shift+Esc,或者用al ...

  2. Windows10系统：任务栏中电池图标消失问题的解决方法

    一.问题: 电池图标对我们来说,基本是没有什么操作对它进行的,但这并不代表它不重要. 持续充电的时候自然觉得没什么,但一旦电脑脱离充电状态,我们还是会经常性地把鼠标放在电池图标上.只有清楚地了解电脑的 ...

  3. Microsoft.Office.Interop.Excel, Version=12.0.0.0版本高于引用的程序集（已解决）

    Microsoft.Office.Interop.Excel, Version=12.0.0.0版本高于引用的程序集(已解决) 论坛里的帮助:http://bbs.csdn.net/topics/39 ...

  4. 使用Notepad++编码编译时报错(已解决?)

    使用Notepad++编码编译时报错(已解决?) 使用Notepad++编码,编译的时候经常会报错,说什么GBK编码啥啥啥~~~但同样的编码用ECLIPSE就没有问题.再有,用记事本把他保存成ANSI ...

  5. 已解决】Sublime中运行带input或raw_input的Python代码出错：EOFError: EOF when reading a line(转)

    [问题] 在折腾: [已解决]Sublime Text 2中运行Python程序出错:The system cannot find the file specified 的过程中,虽然解决了找不到py ...

  6. 【已解决】Android ADT中增大AVD内存后无法启动：emulator failed to allocate memory 8

    [问题] 折腾: [已解决]Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 8 过程中,增大对应AVD的内存为2G后,结果无法启 ...

  7. 【已解决】BeautifulSoup已经获得了Unicode的Soup但是print出来却是乱码

    [问题] 某人遇到的问题: 关于BeautifulSoup抓取表格及SAE数据库导入的问题(跪求大神帮忙) 简单说就是: 用如下代码: ? 1 2 3 4 5 6 7 import re,urllib ...

  8. Access中出现改变字段“自己主动编号”类型，不能再改回来！（已解决）

    Access中出现改变字段"自己主动编号"类型,不能再改回来! (已解决) 一次把access中的自增字段改成了数值,再改回自增时,提示:在表中输入了数据之后,则不能将不论什么字段 ...

  9. sqlserver，执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决)

    sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决) 出现此错误主要是因为.sql的脚本文件过大(一般都超过100M)造成内存无法 ...

随机推荐

  1. LOJ#3048. 「十二省联考 2019」异或粽子 Trie

    原文链接www.cnblogs.com/zhouzhendong/p/LOJ3048.html 题解 $O(n\log^2 {a_i})$ 的做法比较简单: 1. 求出第 k 大的是什么: 二分答案, ...

  2. 接口测试——postman & jmeter

    新名词: 自动化测试:写代码帮你测试 接口:是一个抽象的概念,一种交互关系. 抓包:拦截请求. 接口测试:就是功能测试,比后者还简单. 需要有测试文档,包括项目.模块.URL.请求方式.参数.参数说明 ...

  3. kettle web化

    kettle web化 通过Java API调用kettle核心代码,并基于Spring Boot提供简易的Web管理界面. 背景 在工作中,通过kettle这款ETL产品进行数据处理时,是通过kit ...

  4. docker container（容器）

    docker 容器 Docker容器类似于一个轻量级的沙箱,Docker利用容器来运行和隔离应用 容器是从镜像创建的应用运行实例.它可以启动,开始,停止,删除,而这些容器都是彼此相互隔离,互不可见的. ...

  5. node.js 递归复制文件夹(附带文件过滤功能)

    1.简介: 很简单,写了一个node操作文件的小脚本,主要实现对目标文件夹中内容的复制.还顺带一个按照文件夹或者文件名过滤的功能. 2.应用场景 适合基于 node 环境的项目,项目打包的时候,配合 ...

  6. nginx连接数优化

    一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu计 ...

  7. HelloPython

    HELLOWORD!你好!Python! 学习Python已有一段时间,一个人自学颇不容易,在此分享一些自己学习经验和感受,温故而知新,也希望自己能有些新收获. 学习Python,大多数人创建的第一个 ...

  8. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  9. python从入门到实践-11章测试模块(测试函数出问题)

    #!/user/bin/env python# -*- coding:utf-8 -*- # 用python中unittes中工具来测试代码 # 1.测试函数import unittestfrom n ...

  10. ubuntu系统下手动安装autoconf安装包

    首先简单介绍一下autoconf.Autoconf是一个可以适应多种unix类系统的shell脚本的工具. 我在往虚拟机中安装应用时,需要用到该工具,于是想下载一个.但是由于系统内核版本低,已不能用a ...