echarts2.2.7本地搭建

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

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)

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

echarts2.2.7本地搭建

如果直接复制build,目录结构如下:

echarts2.2.7本地搭建

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服务器,会有图出现。

echarts2.2.7本地搭建

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

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

上图:

echarts2.2.7本地搭建

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

上一篇:World Wind Java开发之十三——加载Geoserver发布的WMS服务(转)


下一篇:jquery插件cloud-zoom(放大镜)