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. ajax 发送json 后台接收 遍历保存进数据库

    前台怎么拿参数的我就不管了我也不会 反正用这个ajax没错 ajax 代码   一定要写明http请求类型  { contentType:"application/x-www-form-ur ...

  2. oracle pctfree和pctused 详解

    一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示当数据块的可用空间低于10%后,就不可以被insert ...

  3. 使用javaAPI操作hdfs

    欢迎到https://github.com/huabingood/everyDayLanguagePractise查看源码. 一.构建环境 在hadoop的安装包中的share目录中有hadoop所有 ...

  4. bzoj4198 荷马史诗 哈夫曼编码

    逐影子的人,自己就是影子. --荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗>.但是由<奥德赛>和&l ...

  5. Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010

    Razor页面布局 1)  在布局模板页中使用@RenderBody标记来渲染主要内容.比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容. 2)  在布局 ...

  6. IIS 500错误或无法显示此网页解决方法

    不知道是不是XP版本的原故,发现越来越多的XP系统装好IIS后连默认网站都打不开,(其他系统没有注意)出现几个大字,IIS 500错误.相信碰到这个问题的人都深有体会,确实很烦人.卸了IIS重装也是不 ...

  7. Java面向对象 集合（上）

     Java面向对象  集合(上) 知识概要:             (1)体系概述 (2)共性方法 (3)迭代器 (4)list集合 (5)Set 集合 体系概述:              集 ...

  8. 一步一个坑 - WinDbg调试.NET程序

    引言 第一次用WinDbg来排查问题,花了很多时间踩坑,记录一下希望对后面的同学有些帮助. 客户现场软件出现偶发性的界面卡死现象一直找不出原因,就想着让客户用任务管理器生成了一个dump文件发给我,我 ...

  9. JS数组filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()实例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  10. WPF使用资源字典组织资源

    转载:http://blog.163.com/wangzhenguo2005@126/blog/static/371405262010111413321728/     首先在解决方案资源管理器中添加 ...