一、从Echarts官网上下载最新版本组件

Echarts是百度开发的开源Web图表组件，界面美观，使用简单。组件下载地址：http://echarts.baidu.com/echarts2/doc/example.html。

在eclipse中新建一个Dynamic Web Project项目，拷贝Echarts组件包下面build文件夹中的内容到WebContent下面。

二、新建index.jsp编写样例代码

调用Echarts组件接口的代码都是百度官方的样例代码，这块没有什么好讲的。总结在调试过程中遇到的几个问题。

  • index.jsp文件需要设置编码格式为UTF-8，否则显示的图表上展示的中文是乱码。
  • 引用第三方js文件的路径需要用Root相对路径，再往下遍历到引用的文件。部署在Tomcat时的路径与在Eclipse中调试时的路径是不一样的。
  • 虽然，代码中只引用了组件dist目录下的文件，但是需要把build目录的所有文件都拷贝到webcontent下面。只拷贝dist目录，图表无法显示，内部应该有依赖。
<!-- **注意： 设置编码格式为UTF-8**  -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <%
        String webRoot = request.getContextPath();
        System.out.println(webRoot);
    %>

    <!-- **注意：包含路径取webroot的相对路径**  -->
    <script type = "text/javascript" src = "<%=webRoot%>/common/jquery/jquery-1.10.2.min.js"></script>
    <script type = "text/javascript" src = "<%=webRoot%>/common/echarts-2.2.7/build/dist/echarts.js" ></script>

    <script type = "text/javascript">

        function drawBar(dataList){

            // 路径配置
            require.config({
                paths: {
                    echarts: '<%=webRoot%>/common/echarts-2.2.7/build/dist'
                }
            });

            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main')); 

                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['销量']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                "name":"销量",
                                "type":"bar",
                                "data":dataList
                            }
                        ]
                    };

                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );
         }
    </script>

</head>

<body>
    <button id = drawBar onClick = "drawBar([5, 20, 80, 10, 10, 20])" >画统计图表</button>
    <div id="main" style="height:400px"></div>
</body>
</html>

展示图表样例：

ECharts组件应用样例代码的更多相关文章

  1. 使用ffmpeg实现转码样例(代码实现)

    分类: C/C++ 使用ffmpeg实现转码样例(代码实现) 使用ffmpeg转码主要工作如下: Demux -> Decoding -> Encoding -> Muxing 其中 ...

  2. java 线程、线程池基本应用演示样例代码回想

    java 线程.线程池基本应用演示样例代码回想 package org.rui.thread; /** * 定义任务 * * @author lenovo * */ public class Lift ...

  3. java文件夹相关操作 演示样例代码

    java文件夹相关操作 演示样例代码 package org.rui.io; import java.io.File; import java.io.FilenameFilter; import ja ...

  4. 10分钟理解Android数据库的创建与使用(附具体解释和演示样例代码)

    1.Android数据库简单介绍. Android系统的framework层集成了Sqlite3数据库.我们知道Sqlite3是一种轻量级的高效存储的数据库. Sqlite数据库具有以下长处: (1) ...

  5. C#调用 Oracle 存储过程样例代码

    -- 建表 CREATE TABLE sale_report (      sale_date DATE NOT NULL ,      sale_item VARCHAR(2) NOT NULL , ...

  6. java 又一次抛出异常 相关处理结果演示样例代码

    java 又一次抛出异常 相关处理结果演示样例代码 package org.rui.ExceptionTest; /** * 又一次抛出异常 * 在某些情况下,我们想又一次掷出刚才产生过的违例,特别是 ...

  7. C编程规范， 演示样例代码。

    /*************************************************************** *Copyright (c) 2014,TianYuan *All r ...

  8. java I/O进程控制，重定向 演示样例代码

    java I/O进程控制,重定向 演示样例代码 package org.rui.io.util; import java.io.*; /** * 标准I/O重定向 */ public class Re ...

  9. [Python] SQLBuilder 演示样例代码

    用Python写一个SQLBuilder.Java版能够从 http://www.java2s.com/Code/Java/Database-SQL-JDBC/SQLBuilder.htm 看到. 附 ...

随机推荐

  1. Docker Centos7 下建立 Docker 桥接网络

    为什么要让docker桥接物理网络? docker默认提供了一个隔离的内网环境,启动时会建立一个docker0的虚拟网卡,每个容器都是连接到docker0网卡上的.而docker0的ip段为172.1 ...

  2. Windows Server 2016-重置目录还原模式密码

    目录还原模式:Directory Services Restore Mode,简称DSRM,又称目录服务恢复模式.是Windows域控制器的服务器安全模式启动选项.DSRM允许管理员用来修复或还原修复 ...

  3. iOS实现微信外部H5支付完成后返回原APP

    看到微信最近放开了微信H5支付,公司决定把H5集成到多款APP上.下面记录下了开发过程. 由于是微信新推出的支付方式,在网上搜索到的相关资料并不多,其中有一篇文件(点此跳转)对我的整个开发过程起到了很 ...

  4. Nginx和php是怎么通信的？

    先来看一下搭建好PHP运行环境的Nginx配置文件. 非常重要的就是 fastcgi_pass 指令了,这个指令用于指定 fpm 进程监听的地址,Nginx 会把所有的 php 请求翻译成 fastc ...

  5. 修改maven项目jdk版本,并解决Dynamic Web Module 3.1 requires Java 1.7 or newer错误

    使用maven的时候,默认会使用1.5版本的JDK,并且创建项目时也会是1.5版本. 但是我想用JDK1.7版本,所以我手动将maven项目JDK改为1.7版本. 手动修改JDK版本为1.7以后,项目 ...

  6. JavaScript将小写金额转换成大写

    //num为小写金额,单位元 changeMoney(num) { if(isNaN(num))return ""; var strPrefix=""; if( ...

  7. python环境jieba分词的安装

    我的python环境是Anaconda3安装的,由于项目需要用到分词,使用jieba分词库,在此总结一下安装方法. 安装说明======= 代码对 Python 2/3 均兼容 * 全自动安装:`ea ...

  8. Jenkins+Gradle实现android开发持续集成、打包

    Jenkins简介 Jenkins 是一个开源项目,提供了一种易于使用的持续集成系统,使开发者从繁杂的集成中解脱出来,专注于更为重要的业务逻辑实现上.同时 Jenkins 能实施监控集成中存在的错误, ...

  9. python︱模块加载(pip安装)以及pycharm安装与报错解决方式

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 准备放下R开始学python,真是痛苦,因为找 ...

  10. PHPmysqli的 预处理执行插入语句

    预编译在mysql端 预编译可以自动防止sql注入攻击 <?php //预编译技术 //1.创建一个mysqli对象 //2.创建myslqi预编译对象 $mysqli=); $mysqli-& ...