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

 

效果图：

代码：

<!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. Hello 2019【A,B,C】

    #include<bits/stdc++.h> using namespace std; #define int long long signed main(){ string str; ...

  2. 转载 C# 开源框架(整理)

    C# 开源框架(整理)http://www.cnblogs.com/gaoyuchuanIT/articles/5612268.html Json.NET http://json.codeplex.c ...

  3. cube.js 学习（四）cube.js cube 说明

      cube 是cube.js data schema 的核心,里面定义了生成sql 的说明 一个比较全的schema 例子 cube(`Users`, { sql: `select * from u ...

  4. Codevs 1500 后缀排序(后缀数组)

    1500 后缀排序 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 天凯是MIT的新生.Prof. HandsomeG给了他一个 ...

  5. [golang]Go内嵌静态资源go-bindata的安装及使用

    使用 Go 开发应用的时候,有时会遇到需要读取静态资源的情况.比如开发 Web 应用,程序需要加载模板文件生成输出的 HTML.在程序部署的时候,除了发布应用可执行文件外,还需要发布依赖的静态资源文件 ...

  6. 三层交换+DHCP实验详解

  7. Docker配置文件详解

    先来看一份 docker-compose.yml 文件,不用管这是干嘛的,只是有个格式方便后文解说: version: '2' services: web: image: dockercloud/he ...

  8. 三大框架 之 Spring-Aop

    目录 AOP AOP简介 开发存在 的问题 JDK动态代理 cglib动态代理 Spring的AOP简介 AOP相关术语 Joinpoint:连接点 Pointcut:切入点 Advice:通知 In ...

  9. Linux crontab 定时任务使用

    1.介绍 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程: 与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程 ...

  10. Jenkins定时任务的配置

    在任务配置中,在 构建触发器(Build Triggers)-->勾选"定时构建"-->在输入框中配置触发时间表达式 以上配置,类似cron表达式,表示在5月27日23 ...