图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. 【BZOJ 1059】[ZJOI2007]矩阵游戏

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后要求对于所有的i,a[i][i]=1 那么,如果第i行的第j列为1. 就说明我们可以把这个第i行换到第j行. 因为这样的话,a[ ...

  2. 面试题——ArrayList和LinkedList的区别

    List概括 先回顾一下List在Collection的框架图: 从图中可以看出: List是一个接口,他继承Collection接口,代表有序的队列. AbstractList是一个抽象类, ,它继 ...

  3. [转载]深入JVM锁机制-synchronized

    转自:http://blog.csdn.net/chen77716/article/details/6618779,并加上少量自己的理解 目前在Java中存在两种锁机制:synchronized和Lo ...

  4. Android之——拦截短信

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46994097 这里.向大家简介通过BroadcastReceiver来拦截短信的方 ...

  5. Codeforces 558E 线段树处理字符串内排序

    给出长度为n的字符串,m个操作. 每一个操作有三个值 l,r,op. op==1,表示将字符串中[ l ,r ]的部分依照升序排列. op==0,表示将字符串中[ l ,r ]的部分依照降序排列. 输 ...

  6. LightOJ - 1132 Summing up Powers 矩阵高速幂

    题目大意:求(1^K + 2^K + 3K + - + N^K) % 2^32 解题思路: 借用别人的图 能够先打表,求出Cnm,用杨辉三角能够高速得到 #include<cstdio> ...

  7. 1、初始JAVA

    一.    语言的翻译分两种: 编译型语言:例如c语言.c++语言  优点:速度快  缺点:不能跨平台                编译器编译——>特定平台的目标文件obj——>特定平台 ...

  8. Find or Query Data with the mongo Shell

    https://docs.mongodb.com/getting-started/shell/query/ Overview You can use the find() method to issu ...

  9. 36.创建自定义的指令directive

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  10. 11.IntelliJ IDEA详细配置和使用教程(适用于Java开发人员)

    转自:https://blog.csdn.net/chssheng2007/article/details/79638076 前言 正所谓工欲善其事必先利其器,对开发人员而言若想提高编码效率,一款高效 ...