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中。

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11.     <script type="text/javascript">
  12.         // 路径配置
  13.         require.config({
  14.             paths: {
  15.                 echarts: 'http://echarts.baidu.com/build/dist'
  16.             }
  17.         });
  18.  
  19.         // 使用
  20.         require(
  21.             [
  22.                 'echarts',
  23.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  24.             ],//这里有个</span>要去掉
  25.             function (ec) {
  26.                 // 基于准备好的dom，初始化echarts图表
  27.                 var myChart = ec.init(document.getElementById('main')); 
  28.  
  29.                 var option = {
  30.                     tooltip: {
  31.                         show: true
  32.                     },
  33.                     legend: {
  34.                         data:['销量']
  35.                     },
  36.                     xAxis : [
  37.                         {
  38.                             type : 'category',
  39.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  40.                         }
  41.                     ],
  42.                     yAxis : [
  43.                         {
  44.                             type : 'value'
  45.                         }
  46.                     ],
  47.                     series : [
  48.                         {
  49.                             "name":"销量",
  50.                             "type":"bar",
  51.                             "data":[5, 20, 40, 10, 10, 20]
  52.                         }
  53.                     ]
  54.                 };
  55.  
  56.                 // 为echarts对象加载数据
  57.                 myChart.setOption(option);
  58.             }
  59.         );
  60.     </script>
  61. </body>

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

  1.  <script src="build/echarts/echarts.js"></script>
  2.     <script type="text/javascript">
  3.         // 路径配置
  4.         require.config({
  5.             paths: {
  6.                 echarts: 'build/echarts'
  7.             }
  8.         });
  9.  
  10.         // 使用
  11.         require(
  12.             [
  13.                 'echarts',
  14.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  15.             ],

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

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

  1.  <%@ page language="java" contentType="text/html; charset=utf-8"
  2.     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. RG_4

    集训前半段马上就要结束了. 很多作业等待着我. 真希望作业君不喜欢我.

  2. 2.bootstrap-全局css

    1.Bootstrap 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.基本的网格结构 下面是 ...

  3. java核心卷轴之泛型程序设计

    本文根据<Java核心卷轴>第十二章总结而来,更加详细的内容请查看<Java核心卷轴> 1. 泛型类型只能是引用类型,不可以使用基本数据类型. 2. 类型变量含义 E : 集合 ...

  4. hdu 4123--Bob’s Race(树形DP+RMQ)

    题目链接 Problem Description Bob wants to hold a race to encourage people to do sports. He has got troub ...

  5. Average of Levels in Binary Tree

    Given a non-empty binary tree, return the average value of the nodes on each level in the form of an ...

  6. 自测-5 Shuffling Machine

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  7. 大数据开发 | MapReduce介绍

    1.  MapReduce 介绍 1.1MapReduce的作用 假设有一个计算文件中单词个数的需求,文件比较多也比较大,在单击运行的时候机器的内存受限,磁盘受限,运算能力受限,而一旦将单机版程序扩展 ...

  8. Java历程-初学篇 Day03扫描仪与类型转换

    一,扫描仪 步骤1,使用扫描仪方法 步骤2,导个包 步骤三,使用 注意事项:严格区分大小写 二,类型转换 1,自动类型转换 当将一个数值范围小的类型赋给一个数值范围大的数值型变量,java在编译过程中 ...

  9. XML编程

     XML编程 XML及其语法 XML约束之DTD XML编程(CRUD---Create Read Update Delete) XML约束之Schema XML语法: XML文档的组成: 一个X ...

  10. 【特效】jquery选项卡插件，页面多个选项卡统一调用

    把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本 ...