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

 

效果图：

代码：

<!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. 洛谷 P3375 【模板】KMP字符串匹配 题解

    KMP模板,就不解释了 #include<iostream> #include<cstdio> #include<cstring> #include<algo ...

  2. YAML_01 YAML语法和playbook写法

    ansible的playbook采用yaml语法,它简单地实现了json格式的事件描述.yaml之于json就像markdown之于html一样,极度简化了json的书写.在学习ansible pla ...

  3. web大文件分块上传断点续传demo

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  4. Zabbix 邮件报警示例

     Zabbix 邮件报警示例: 1.编辑 mail.rc 文件添加默认的邮箱配置 # vi /etc/mail.rc set from=1234567@qq.com set smtp=smtp.qq. ...

  5. PHP常用的变量检查函数和获取某个变量的类型

    定义变量 $a = 100; 1.gettype($a) #检查变量的类型 输出integer 2.settype($a, 'double') #设置$a变量为double类型 3. is_array ...

  6. 64位内核开发第二讲.内核编程注意事项,以及UNICODE_STRING

    目录 一丶驱动是如何运行的 1.服务注册驱动 二丶Ring3跟Ring0通讯的几种方式 1.IOCTRL_CODE 控制代码的几种IO 2.非控制 缓冲区的三种方式. 三丶Ring3跟Ring0开发区 ...

  7. docker gitlab and gitlab api

    https://docs.gitlab.com/ee/api/repositories.html curl --header "PRIVATE-TOKEN: fxhDXPRJAowCouXE ...

  8. Java初级黄金体验 其一

    关于作者 作者背景:公元2001年,意大利那不勒斯少年,为了达成梦想,在国庆的三天发现自己替身能力Java.从而加入了黑手党组织,并成为...... 作者目的:入门Java 为了Fighting Go ...

  9. revenue

    美 ['revənju]   英 ['revənjuː]   n.收益:营业额:税务署 网络收入:税收:岁入

  10. JVM 修改类加载器启动类加载器

    1.类加载器加载路径 public class MyTest18 { public static void main(String[] args) { //系统类加载器加载路径 System.out. ...