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换个名字就运行不成功，求大神帮忙解决~
