echart.html:  需要注意js文件加载的顺序

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Echarts</title>

<!--     <link rel="stylesheet" href="css/index.css">

    <link rel="stylesheet" href="css/head.css"> -->

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

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

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

</head>

<body>

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

    <div id="main" style="width: 600px;height:200px;"></div>

</body>

</html>

test.js: 需要注意在function(){}()里面加一个jquery的 $(function(){}，为的是HTML的DOM加载完毕，否则会报以下错误

Uncaught Error: Initialize failed: invalid dom.

test=function () {

    $(function() {

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

        var myChart = echarts.init(document.getElementById('main'));

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

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

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

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

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

            }]

        };

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

        myChart.setOption(option);

    });

    //alert("test");

}();

Echart示例的更多相关文章

  1. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  2. 利用eChart绘制网页图表

    首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...

  3. Echarts简单案例

    官网: http://echarts.baidu.com/index.html 文档:  http://echarts.baidu.com/echarts2/doc/doc.html <html ...

  4. [deviceone开发]-echart的简单报表示例

    一.简介 echart是一个常用的基于h5的报表库.这个例子简单展示了实现折线图,柱状图,圆环图和圆饼图的使用. 并实现和do的非html部分的数据交互. 二.效果图 三.相关下载 https://g ...

  5. EChart使用

    EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...

  6. 网站中使用echart

    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...

  7. WebGIS中利用AGS JS+eChart实现一些数据展示的探索

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...

  8. java 版本EChart使用

    一.简介 EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计.该种方式js在页面动态拼接json数据,再进行渲染.这种方法的优点是,灵活,可以随时进行修改.缺点 ...

  9. EChart和G2比较

    1.上市时间:EChart已经久经沙场,G2算是新事物 2.源码:截止发文,在Github上 数量 EChart G2 commits 3086 8 branches 3 1 releases 43 ...

随机推荐

  1. http://download.csdn.net/detail/yanzi1225627/6548337

    [2013.9.8网络首发]导入Android4.2源码里的Gallery2和Camera模块至Eclipse全过程 上次导入的时候是新建的一个user library,然后把所需要的四个库文件放里面 ...

  2. ENC28J60学习笔记——第1部分

    1前言 嵌入式以太网开发,可以分为两个部分,一个是以太网收发芯片的使用,一个是嵌入式以太网协议栈的实现.以太网收发芯片的使用要比串口收发芯片的使用复杂的多,市面上流通比较广泛的以太网收发芯片种类还不少 ...

  3. 一个简易Asp.net网站日志系统

    前不久在网站上看到了网站日志访问记录组件UserVisitLogsHelp开源了! 这篇博客感觉还不错,就把源码download了下来,学习一下,发现里面的代码书写和设计并不是很好,于是自己改了改.自 ...

  4. ODBC更新记录集提示”记录集为只读“

    创建的ODBC应用程序默认的记录集不具有只读属性,但是再更新记录表时会提示”记录集为只读“,这是为什么呢? 今天看书找到了答案: 因为MFC中的数据库类不支持需要连接两个或者多个表的记录集更新,如果选 ...

  5. 【GRPC】GRPC-负载均衡

    GRPC-负载均衡 grpc nginx_百度搜索 grpc(1):Centos 安装java的grpc服务,使用haproxy进行负载均衡,nginx不支持 - freewebsys的专栏 - CS ...

  6. 转：PCA的Python实现

    http://blog.csdn.net/jerr__y/article/details/53188573 本文主要参考下面的文章,文中的代码基本是把第二篇文章的代码手写实现了一下. - pca讲解: ...

  7. 深浅拷贝 python

    原文:http://www.jb51.net/article/15714.htm 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象.2. copy.deepcopy 深拷贝 ...

  8. Pandas DataFrame笔记

    1.属性方式,可以用于列,不能用于行 2.可以用整数切片选择行,但不能用单个整数索引(当索引不是整数时) 3.直接索引可以使用列.列集合,但不能用索引名索引行 用iloc取行,得到的series: d ...

  9. Spring中的代理模式

    代理模式 所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式是一种 ...

  10. 这次要好好吐槽下idea呢还是SpringMVC ？

    特么的!(我为什么要骂脏话,因为这个问题弱智+不能理解) 相信很多人遇到过 org.springframework.web.servlet.PageNotFound - No mapping foun ...