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

 

效果图：

代码：

<!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. SPA项目开发动态树、数据表格、分页功能

    SPA项目开发 1.修改左侧动态树 LeftNav.vue <template> <el-menu router :" class="el-menu-vertic ...

  2. 常用的两种web单点登录SSO的实现原理

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...

  3. 从海量文本中统计出前k个频率最高的词语

    现有如下题目:有一个海量文本,存储的是汉语词语,要求从中找出前K个出现频率最高的词语,写出最优算法,兼顾时间和空间复杂度. 思路分析:熟悉搜索引擎的程序员,应该不是难题.用传统的HashMap是无法解 ...

  4. C++2.0新特性(一)——<特性认知、__cplusplus宏开启、Variadic Templates 、左右值区分>

    一.新特性介绍 2.0新特性包含了C++11和C++14的部分 1.2 启用测试c++11功能 C++ 标准特定版本的支持,/Zc:__cplusplus 编译器选项启用 __cplusplus 预处 ...

  5. Ubuntu16.04 配置vnc4server

  6. Flutter扫码识别二维码内容

    前面一篇写了生成二维码图片,这篇来写使用相机扫描识别二维码 识别二维码需要用到插件 barcode_scan 首先在 pubspec.yaml 文件中添加以下依赖,添加依赖后在 pubspec.yam ...

  7. Column 'status' specified twice

    字段写了两次, 检查下sql语句, 删除一个就好了.

  8. JVM 字节码的结构

    编译的.class文件,可以用javap进行反编译 javap Test.class javap -c Test.class javap -verbose Test.class 1.创建MyTest1 ...

  9. python gdal ogr osgeo

  10. 【idea】断点调试时查看所有变量和静态变量

    转载至博客:https://blog.csdn.net/qq32933432/article/details/86672341 缘起 笔者在进行HashMap原理探索的时候需要在IntelliJ ID ...