说明：建议移动端使用的时候自己定制需要的东西，详情看官网

 

效果图：

代码：

<!DOCTYPE html>

<html style="height: 100%">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

</head>

<body style="height: 100%; margin: 0">

<div id="container" style="height: 50%;width: 100%;"></div>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

<script type="text/javascript">

    var dom = document.getElementById("container");

    var myChart = echarts.init(dom);

    var app = {};

    option = null;

    app.title = '世界人口总量 - 条形图';

    option = {

        title: {

            text: '世界人口总量',

            subtext: '数据来自网络'

        },

        tooltip: {

            trigger: 'axis',

            axisPointer: {

                type: 'shadow'

            }

        },

        legend: {

            data: ['2011年', '2012年']

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis: {

            type: 'value',

            boundaryGap: [0, 0.01]

        },

        yAxis: {

            type: 'category',

            data: ['巴西','印尼','美国','印度','中国','世界人口(万)']

        },

        series: [

            {

                name: '2011年',

                type: 'bar',

                data: [18203, 23489, 29034, 104970, 131744, 630230]

            },

            {

                name: '2012年',

                type: 'bar',

                data: [19325, 23438, 31000, 121594, 134141, 681807]

            }

        ]

    };

    ;

    if (option && typeof option === "object") {

        myChart.setOption(option, true);

    }

    window.onresize = function () {

        myChart.resize(); //使第一个图表适应

    }

</script>

</body>

</html>

x轴字体倾斜45度：

 xAxis: {

            type: 'value',

            boundaryGap: [0, 0.01],

            axisLabel: {

                interval:0,

                rotate:20//角度顺时针计算的

            }

        },

echarts移动端demo的更多相关文章

  1. webrtc学习笔记2（Android端demo代码结构）

    最近正在修改webrtc的Android端demo和服务器交互的内容,介绍一下demo的大体结构吧,以便能快速回忆. 环境:Android5.0以上.libjingle_peerconnection_ ...

  2. 【vue】移动端demo资料

    http://imzjh.com/inew/#/(移动端demo) https://github.com/liangxiaojuan/eleme(饿了么git地址) https://github.co ...

  3. http://echarts.baidu.com/demo.html#effectScatter-map

    http://echarts.baidu.com/demo.html#effectScatter-map

  4. UdpClient类客户端和服务端demo

    服务端demo static IPEndPoint ipe = new IPEndPoint(IPAddress.Any, 0); static UdpClient udp = new UdpClie ...

  5. 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

    1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...

  6. Axis2创建WebService服务端接口+SoupUI以及Client端demo测试调用

    第一步:引入axis2相关jar包,如果是pom项目,直接在pom文件中引入依赖就好 <dependency> <groupId>org.apache.axis2</gr ...

  7. echarts移动端中例子总结。

    接下来我总结一下我常用到的几个移动端echarts小例子: 第一步:我先引入自己想要的库 第二步: 给echarts给了一个窗口(有大小的窗口) 第三步: 开始引入你想要的图形的options 我做的 ...

  8. Echarts服务端生成图片

    Echarts是百度发布的一套优秀的浏览器端图表控件,Echarts是基于html5的cavens绘图实现.而使用server端生成图片无法借用浏览器端渲染.通用的做法有两种: 是用headless浏 ...

  9. echarts移动端字体模糊解决方法

    echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下: 获取字体大小 ...

随机推荐

  1. SpringCloud分布式系统的演进.

    day1 https://github.com/deadzq/product-service 单体服务 https://github.com/deadzq/eurekaserver1 注册中心Eure ...

  2. CSS字体图标

    一.什么是字体图标: 1. 字体图标可以和图片一样改变透明度,旋转度,等等 2.本质是文字,可以改变大小颜色等等比较适用于移动端 总结;图标字体具有矢量效果,放大缩小不失真,而且可以使用CSS任意更改 ...

  3. Problem 4 dp

    $des$ 小 $Y$ 十分喜爱光学相关的问题, 一天他正在研究折射.他在平面上放置了 $n$ 个折射装置, 希望利用这些装置画出美丽的折线.折线将从某个装置出发, 并且在经过一处装置时可以转向, 若 ...

  4. UOJ188. 【UR #13】Sanrd [min_25筛]

    传送门 思路 也可以算是一个板题了吧qwq 考虑min_25筛最后递归(也就是DP)的过程,要枚举当前最小的质因子是多少. 那么可以分类讨论,考虑现在这个质因子是否就是次大质因子. 如果不是,那么就是 ...

  5. esp8266 + dht11 + 两路继电器 实现pc远程控制开关机温度监控.并配置zabbix监控

    事因:翻了翻自己之前的硬件小箱子,几年前买的一些小东西,想用用起来. 正好我有些数据放在机器上,有时候需要机器启动,我使用完成后在断开. 其实网络唤醒也能做到,但是机器一直给电也不好,在说家里有小孩A ...

  6. YII框架的事件机制

    一.什么是事件机制 解释:发生了一件事情,然后某些东西对这件事作出反应. 例子:假设发生了A同学结婚事件,然后B同学给份子钱反应,那么,B是怎么知道(监听)A事件的发生了呢,有两种办法. 扫描式:B不 ...

  7. Hadoop 压缩

    压缩的好处 文件压缩的好处:减少文件存储锁需要的磁盘空间,加速数据在网络和磁盘上的传输. 常见的压缩格式 压缩格式 工具 算法 文件扩展名 是否可以切分 DELATE 无 DEFLATE     .d ...

  8. Samba文件共享服务设置

    SMB的主程序 smbd:SMB-TCP139,CIFS-TCP445 nmbd:NetBios-UDP137,138 SMB主程序对应的两个服务 /etc/init.d/smb /etc/init. ...

  9. 数据库blob图片文件，多图片打包下载

    数据库存储blob图片文件,前端打包下载 数据库图片文件实体类 package com.cmrh.mspserver.pos.dto; import java.io.Serializable; imp ...

  10. 如何画好ER图

    快速阅读 了解ER图的基本组成,以及如何在viso中画ER图. 什么是ER图 是实体关系图,用矩形表示实体,用椭圆形表示属性,用棱形表示两实体之间的联系.相互用直接联接起来,是一种数据建模工具.用来描 ...