图1和图2是手机上显示的效果，

图3是电脑浏览器显示的效果。

如何使用ECharts?

1.下载echarts.js

2.引入echarts.js

<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>

3.定义div区域

<div id="ec1" style="width: 100%;height:400px;"></div>

<div id="ec2" style="width: 100%;height:400px;"></div>

4.初始化并关联区域

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

var myEc1 = echarts.init(document.getElementById('ec1'));

5.配置数据与参数

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

    var option = {

        title: {

            text: 'ECharts 入门示例'

        },

        tooltip: {},

        legend: {

            data:['销量']

        },

        xAxis: {

            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

        },

        yAxis: {},

        series: [{

            name: '销量',

            type: 'bar',

            data: [5, 20, 36, 10, 10, 20]

        }]

    };

6.填充区域

// 使用刚指定的配置项和数据显示图表。

myEc1.setOption(option);

tips:这里最核心的就是option这个参数了，配置不同的option，就会显示不同的图表内容。

完整案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">

    <title>echarts测试</title>

</head>

<body style="overflow: hidden;">

<header class="aui-bar aui-bar-nav">

    echarts测试

</header>

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

<div id="ec1" style="width: 100%;height:400px;"></div>

<div id="ec2" style="width: 100%;height:400px;"></div>

<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>

<script>

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

    var myEc1 = echarts.init(document.getElementById('ec1'));

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

    var option = {

        title: {

            text: 'ECharts 入门示例'

        },

        tooltip: {},

        legend: {

            data:['销量']

        },

        xAxis: {

            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

        },

        yAxis: {},

        series: [{

            name: '销量',

            type: 'bar',

            data: [5, 20, 36, 10, 10, 20]

        }]

    };

    // 使用刚指定的配置项和数据显示图表。

    myEc1.setOption(option);

    var myEc2 = echarts.init(document.getElementById('ec2'));

    option = {

        tooltip : {

            trigger: 'axis',

            axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'

            }

        },

//        label:{

//            normal:{

//                show: true,

//                position: 'inside'}

//        },

        legend: {

            data:['直接粉丝','间接粉丝']

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis : [

            {

                type : 'category',

                data : ['一月','二月','三月','四月','五月','六月','七月']

            }

        ],

        yAxis : [

            {

                type : 'value'

            }

        ],

        series : [

            {

                name:'直接粉丝',

                type:'bar',

                data:[320, 332, 301, 334, 390, 330, 320]

            },

            {

                name:'间接粉丝',

                type:'bar',

                stack: '广告',

                data:[150, 232, 201, 154, 190, 330, 410]

            }

        ]

    };

    myEc2.setOption(option);

</script>

</body>

</html>

具体使用，可以参考官方案例，http://echarts.baidu.com/examples.html

ECharts简单入门的更多相关文章

  1. ECharts简单入门demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  4. HCharts随笔之简单入门

    此处可以对比我的另一个Echars简单入门 直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  5. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  6. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  7. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  8. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  9. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

随机推荐

  1. centos7 jumpserver 部署和使用手册（二）

    前面已经介绍了jumpserver的部署,基于这篇部署文档,下面介绍下部署完成后的的功能使用: 一.系统设置 1.1根据提供的帐号密码(admin/admin)登录jumpserver 修改 url ...

  2. 【转载】spring-boot 项目跳转到JSP页面

    原路径:https://blog.csdn.net/qq_36820717/article/details/80008225 1.新建spring-boot项目  目录结构如下 2.新建TestCon ...

  3. sqoop从mysql导入到hdfs出现乱码问题

    最近把hive元数据库的快照数据导入到hdfs中,以便对历史的元数据进行查询. 命令如下: sqoop import -D mapred.job.queue.name=do.production -- ...

  4. Python 安装 httplib2

    简述 httplib2 是一个使用 Python 写的支持的非常全面的 HTTP 特性的库.需要 Python2.3 或更高版本的运行环境,0.5.0 版及其以后包含了对 Python3 的支持. 简 ...

  5. USACO 1.2 Palindromic Squares (进制转换，回文)

    /* ID:twd30651 PROG:palsquare LANG:C++ */ #include<iostream> #include<fstream> #include& ...

  6. 设置Webdriver启动chrome为默认用户的配置信息

    Webdriver 启动Chrome浏览器时,默认是打开一个新用户,而非默认用户.即新用户没有我们安装扩展程序.但在实际应用中,我们会须要 默认用户安装的一些扩展程序,比方对于某些js或者css样式. ...

  7. 汇编中中括号[]作用以及lea和mov指令的区别

    现在总结一下:其中牵扯到lea指令,mov指令,[] 一.lea指令:对于寄存器来说:第二个操作数是寄存器必须要加[],不然报错,这里lea就是取[寄存器]的值,如:mov eax,2lea ebx, ...

  8. less09 判断语句

    less //.mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5 // background-color: black; //} // ...

  9. bzoj1009: [HNOI2008]GT考试（kmp+矩阵乘法）

    1009: [HNOI2008]GT考试 题目:传送门 题解: 看这第一眼是不是瞬间想起组合数学??? 没错...这样想你就GG了! 其实这是一道稍有隐藏的矩阵乘法,好题! 首先我们可以简化一下题意: ...

  10. 【DotNetNuke介绍】

    简介 DotNetNuke(以下简称DNN)的最终目的是创建一个门户的框架平台,这个平台可以为开发者增添模块搭建应用程序提供坚实的可靠的支持.应用程序的一个关键的功能就是数据存取..NET Frame ...