图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. mybatis中 #跟$的区别

    #相当于对数据 加上 双引号,$相当于直接显示数据 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sq ...

  2. puppet介绍与安装

    puppet是什么puppet是一种基于ruby语言开发的Lnux.Unix.windows平台的集中配置管理系统.它使用自有的puppet描述语言,可管理配置文件file.用户user.cron任务 ...

  3. 二叉排序树(B-Tree)-c实现

    这个二叉排序树写完了,虽然还有些bug,但还是很高兴的. 主要实现二叉排序树的构建.(*表示稍微重要点) 二叉排序树的打印. 二叉排序树的删除. 代码里的三种情况都测了 顺便附送一个简单的中序遍历,递 ...

  4. 特斯拉正加快部署第三代Autopilot自动驾驶计算机

    新浪科技讯,北京时间 4 月 10 日下午消息,据电动汽车新闻网站 Electrek 报道,特斯拉正在加快部署第三代 Autopilot 自动驾驶计算机,因为当前一代产品的计算能力即将被耗尽. 201 ...

  5. mysql死锁-查询锁表进程-分析锁表原因

    查询锁表进程: 1.查询是否锁表 show OPEN TABLES where In_use > 0;   2.查询进程     show processlist   查询到相对应的进程===然 ...

  6. ASP.NET-本地化、全球化

    在<system.web>中加入一个全球化的标识,网站就可以自适应全球化了 也可以将出错信息全球化 上面的这种方式测试过对google浏览器好像没用,但是对IE内核的是可行的,可能goog ...

  7. POJ——T 3020 Antenna Placement

    http://poj.org/problem?id=3020 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9844   A ...

  8. Android五天乐（第三天）ListFragment与ViewPager

    1ListFragment 今天首先学习了一种很经常使用的展示场景:列表展示. 昨天学习了使用Fragmet来取代activity进行设计.今天在托管单个fragment的基础上,掌握托管一个布局li ...

  9. nodejs01

    一.Node.js简介 1.1 简介 V8引擎本身就是用于Chrome浏览器的JS解释部分,但是Ryan Dahl这哥们,鬼才般的,把这个V8搬到了服务器上,用于做服务器的软件. Node.js是一个 ...

  10. User-defined types

    We have used many of Python’s built-in types; now we are going to define a new type. As an example, ...