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. asp.net获取当前网址url【转】

    设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...

  2. capwap学习笔记——初识capwap（二）

    2.5.1 AC发现机制 WTP使用AC发现机制来得知哪些AC是可用的,决定最佳的AC来建立CAPWAP连接. WTP的发现过程是可选的.如果在WTP上静态配置了AC,那么WTP并不需要完成AC的发现 ...

  3. [Spring boot] Read values from external properties file

    Let's say we have a extral app.proporites file which contains some extra configuration: // resources ...

  4. spring /spring boot中mock

    1 Mockito简介 1.1 Mockito是什么   Mockito是一个简单的流行的Mock框架.它允许你创建和配置mock对象.使用Mockito可以明显的简化对外部依赖的测试类的开发.一般使 ...

  5. 微信小程序 - 组件传值给调用页面

    演示如下(可以ctrl+鼠标放大或者下载GIF图片) 1. 先组件定义事件“checkbox”(组件内事件) 2. 调用页面调用它需要加bind:事件名 = 调用页面事件名(bind即绑定调用组件“o ...

  6. openfiler在esxi下的安装配置

    注意分区的时候如果硬盘太小自动分区会导致分配的卷大小不够用 后改为如下: 以root登录: 应该以openfiler登录,口令是password 也可以导入虚拟机安装 升级虚拟机硬件版本 终端登录用户 ...

  7. Java 生成ZIP文件

    public static byte[] fileToZip(){ ZipOutputStream append = null; ByteArrayOutputStream bos = new Byt ...

  8. Qt通过ODBC连接SQL Server2008实践总结

    Qt连接数据库的方式很多,这里说明一种最常用也是最实用的方式,因为这种方式在Windows上开发程序使用起来非常方便,并且也是远程连接数据库所需要用到的方式. 前提工作: 在Win7下安装了SQL S ...

  9. javascript数组去重复

    数组去重 知乎上看到有人去腾讯面试,然后发了面试的js题目,有一个是数组去重 我的土办法 var arr = ['a', 'g', 'q', 'd', 'a', 'e', 'q']; console. ...

  10. python获取自己的环境变量

    1. import sys sys.path 2. from distutils.sysconfig import get_python_lib get_python_lib() 3. import ...