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. 聊聊jdbc statement的fetchSize

    在使用MySQL的JDBC时,如果查询结果集过大,使用一次查询,可能会出现Java.lang.OutOfMemoryError: Java heap space问题,因为DB服务器端一次将查询到的结果 ...

  2. w​i​n​d​o​w​s​ ​s​e​r​v​e​r​ ​2​0​0​8​ ​r​2​ ​启​用​索​引(转)

    08r2的“windows search”服务默认是不安装的,要想启用索引执行下列步骤:        1.打开“服务器管理”——选中“角色”——右边选中“添加角色”——勾选“文件服务”.    2. ...

  3. leetcode关于数组的问题

    关于数组的几道面试题 [Leetcode] 628. 三个数的最大乘积 解题思路: 这个一开始我是没想到思路的(除了遍历),因为有正负号的问题,后来看了一下别人的思路然后自己写的,思路是这样的: 三个 ...

  4. 杨晓峰-Java核心技术-9 HashMap Hashtable TreeMap MD

    目录 第9讲 | 对比Hashtable.HashMap.TreeMap有什么不同? 典型回答 考点分析 知识扩展 Map 整体结构 有序 Map HashMap 源码分析 容量.负载因子和树化 精选 ...

  5. java 反射机制--根据属性名获取属性值

    1.考虑安全访问范围内的属性,没有权限访问到的属性不读取 /** * 根据属性名获取属性值 * * @param fieldName * @param object * @return */ priv ...

  6. ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  7. [ Laravel 5.5 文档 ] 官方扩展包 —— 全文搜索解决方案：Laravel Scout

    简介 Laravel Scout 为 Eloquent 模型全文搜索实现提供了简单的.基于驱动的解决方案.通过使用模型观察者,Scout 会自动同步更新模型记录的索引. 目前,Scout 通过 Alg ...

  8. centos：时间同步

    转自:https://blog.csdn.net/u011391839/article/details/62892020 Linux的时间分为System Clock(系统时间)和Real Time ...

  9. yii源码三 -- db

    <AR> CActiveRecord:path:/framework/db/ar/CActiveRecord.phpoverview:is the base class for class ...

  10. 获取屏幕的宽和高-Display中getHeight()和getWidth() 官方已废弃

    getHeight()和getWidth() deprecated in API level 13 Display dp=getWindowManager().getDefaultDisplay(); ...