图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. 【BZOJ4071】【APIO2015】巴邻旁之桥

    题意: Description 一条东西走向的穆西河将巴邻旁市一分为二,分割成了区域 A 和区域 B. 每一块区域沿着河岸都建了恰好 1000000001 栋的建筑,每条岸边的建筑都从 0 编号到 1 ...

  2. pandas 7 合并 merge 水平合并，数据会变宽

    pd.merge( df1, df2, on=['key1', 'key2'], left_index=True, right_index=True, how=['left', 'right', 'o ...

  3. C#之改变窗体icon图标、新建类文件、调用dll库

    一.改变窗体的图标 没有修改之前为: 修改之后为自己想要的图标: 需要在窗体Form1.cs属性里边添加icon图片文件: 二.新建cs类文件 如下图所示,新建一个类文件,我用于来调用库文件也可以来定 ...

  4. How to customize Skin Gallery - Remove / rename skins and groups

    1. REMOVE (HIDE) A SPECIFIC SKIN Traverse through the gallery group collection, then through its gal ...

  5. c++ string类的完整实现！！！

    本文实现了c++ STL中的basic_string模板类,当然.通过typedef也就实现了string类和wstring类.限于篇幅,实现代码中用到了标准库的char_traits模板类,本人自己 ...

  6. 大海教你学手游2015CocosLua第一季_00课程介绍

    话说大盘从5100直掉到3500点,千仅仅股票跌幅超过20%,跌跌不休.散户.证监会.做空机构開始斗气地主来了: 散户:叫地主 空头:抢地主,3分 证监会:pass 空头:压死 证监会:不要 散户:不 ...

  7. 里根上台时国债只占GDP的30%

    学里根是刻舟求剑,关键是钱从哪来 5  里根主要靠借钱,这是冷战红利,美国打完二战国债占了GDP的120%,然后总量就没怎么增加,但战后GDP快速增长,结果国债占GDP的比例连续下降,打越战登月石油危 ...

  8. uva_11997,K Smallest Sums优先队列

    #include<iostream> #include<cstdio> #include<cstring> #include<queue> #inclu ...

  9. powershell无法拖动文件到命令行

    PS C:\Program Files\PowerShell\6.0.0-beta.6> New-Service -Name LISA_43_Dev_Batch -DisplayName LIS ...

  10. java9新特性-11-String存储结构变更

    1. 官方Feature JEP254: Compact Strings 2. 产生背景 Motivation The current implementation of the String cla ...