1.首先下载echarts2.2.7，解压到本地，解压后的目录如下：



2.在WebContent下建立一个名为build的目录，复制echarts2.2.7下面的build下面的dist目录到eclipse的WebContent下，再将dist目录改名为echarts

或者直接将build目录复制到eclipse的WebContent下（因为只用到了build下的dist目录，并没有用到source目录，所以不用复制source目录，如果搞不清楚就直接复制build目录即可，记得将dist改名为echarts）

现在的目录结构是这样的：

如果直接复制build，目录结构如下：

3.新建一个index.jsp页面，打开echarts官网的入门教程或者复制下面的代码（我复制来的）到index.jsp中。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

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

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'http://echarts.baidu.com/build/dist'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],//这里有个</span>要去掉

            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":[5, 20, 40, 10, 10, 20]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

将上面代码块的标红的改为

 <script src="build/echarts/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'build/echarts'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

再启动tomcat服务器，会有图出现。

但是是乱码，要在<!DOCTYPE html>前面加上字符编码

 <%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

上图：

我没接触过前端，折腾了好一阵才弄出来，不知道为什么把build下面的echarts换个名字就运行不成功，求大神帮忙解决~

echarts2.2.7本地搭建的更多相关文章

  1. 如何使用XAMPP本地搭建一个属于你自己的网站

    你好,从今天开始,我将为大家带来一些我学习SEO和建站的免费教程,今天为大家带来的是如何用XAMPP搭建一个属于你自己的网站.来到这里,可以说很多在百度上已经过时了的资料需要总结的资料这里都有,你只要 ...

  2. 使用APMServ本地搭建多个网站

    October 27, 2014 使用APMServ本地搭建多个网站教程 把我写好的代码直接粘贴到 httpd.conf 文件的末尾.然后保存就可以了.代码如下: <VirtualHost *: ...

  3. 超快速使用docker在本地搭建hadoop分布式集群

    超快速使用docker在本地搭建hadoop分布式集群 超快速使用docker在本地搭建hadoop分布式集群 学习hadoop集群环境搭建是hadoop入门的必经之路.搭建分布式集群通常有两个办法: ...

  4. 利用XAMPP本地搭建WordPress博客

    现在越来越多的人利用WordPress搭建了自己的博客网站,我也是一样,但是还有一些人不知道怎么搭建WordPress网站的方法,因为怕弄 不好,所以也就没有花钱去做,所以这里我就讲讲怎么样利用XAM ...

  5. 如何在本地搭建DVWA环境

    如何在本地搭建DVWA环境 1.工具下载:  (1)phpStudy:   http://phpstudy.php.cn/download.html (2)DVWA:http://www.dvwa.c ...

  6. 本地搭建json-server

    1.前言 为了前端项目获取数据,需要在本地搭建json-server,这样保证可以在本地实现增删改查的操作. 2.安装 全局安装: npm -g json-server 3.创建一个json-serv ...

  7. 最新版本elasticsearch本地搭建入门篇

    最新版本elasticsearch本地搭建入门篇 项目介绍 最近工作用到elasticsearch,主要是用于网站搜索,和应用搜索. 工欲善其事,必先利其器. 自己开始关注elasticsearch, ...

  8. 本地搭建Wordpress博客网站（Windows）

    最近在写一些web功能测试的一个主题分享,里边有一个分类是数据库测试,那么数据库测试有几个点的方法,其中有一个是学会看数据库的日志.由于公司内部的数据库日志我们测试人员暂时不开放查看,所以打算自己在本 ...

  9. 如何在本地搭建一个Android应用crashing跟踪系统－ACRA

    https://github.com/bboyfeiyu/android-tech-frontier/tree/master/others/%E5%A6%82%E4%BD%95%E5%9C%A8%E6 ...

随机推荐

  1. Python 接口测试（五）

    五:使用python进行组织编写接口测试用例 接口测试其实就是几个步骤. 拿到接口的url地址 查看接口是用什么方式发送 添加请求头,请求体 发送查看返回结果,校验返回结果是否正确 明白了接口测试的测 ...

  2. oracle 数据字典和动态性能视图

    一.概念数据字典是oracle数据库中最重要的组成部分,它提供了数据库的一些系统信息.动态性能视图记载了例程启动后的相关信息. 二.数据字典1).数据字典记录了数据库的系统信息,它是只读表和视图的集合 ...

  3. 已被.NET基金会认可的弹性和瞬态故障处理库Polly介绍

    前言 本节我们来介绍一款强大的库Polly,Polly是一种.NET弹性和瞬态故障处理库,允许我们以非常顺畅和线程安全的方式来执诸如行重试,断路,超时,故障恢复等策略. Polly针对对.NET 4. ...

  4. 为什么要用深度学习来做个性化推荐 CTR 预估

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:苏博览 深度学习应该这一两年计算机圈子里最热的一个词了.基于深度学习,工程师们在图像,语音,NLP等领域都取得了令人振奋的进展.而深 ...

  5. 三、js的函数

    三.函数 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函数调用表达式的值. 1.函数声 ...

  6. nodejs中http-proxy使用小结

    最近在写xmocker的工具,用于开发前期的mock数据,不可避免的用到了代理的中间件.当然,github上有关于http-proxy封装的中间件.毕竟是自己练手的项目,就自己写了个中间件,方便定制功 ...

  7. 洗礼灵魂，修炼python（8）--高效的字典

    python几大核心之--字典(dict) 1.什么是字典 学生时代都用过字典吧?用这个字的读音,偏旁就能用字典查到其相关信息,词性,意思,组词,造句,还有在什么场合下用这个字等等的. 在python ...

  8. 坑中速记整理! 使用 kotlin 写第一个 ReactNative Android 模块

    Kotlin 和 Swift, 两大新宠! 借 ReactNative 熟悉下 kotlin 的用法,不料掉坑里面了.昨晚花了大半夜,趁这会儿思路清晰,把涉及到的一些关键信息,迅速整理下. 最佳的使用 ...

  9. 对象反序列化时,抛出java.io.StreamCorruptedException: invalid type code: AC异常

    问题描述:在使用java.io.ObjectInputStream类的readObject()方法去读取包含有序列化了多个(两个及两个以上)类的文件时,当读取到第二个类时,会抛出题目中提到的异常. 原 ...

  10. python xml sendEmail

    使用python进行发送邮件,研究的主要是用smtplib这个包,具体代码如下,eg: #!/usr/bin/python #coding=utf-8 import smtplib from emai ...