echarts2.2.7本地搭建
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本地搭建的更多相关文章
- 如何使用XAMPP本地搭建一个属于你自己的网站
你好,从今天开始,我将为大家带来一些我学习SEO和建站的免费教程,今天为大家带来的是如何用XAMPP搭建一个属于你自己的网站.来到这里,可以说很多在百度上已经过时了的资料需要总结的资料这里都有,你只要 ...
- 使用APMServ本地搭建多个网站
October 27, 2014 使用APMServ本地搭建多个网站教程 把我写好的代码直接粘贴到 httpd.conf 文件的末尾.然后保存就可以了.代码如下: <VirtualHost *: ...
- 超快速使用docker在本地搭建hadoop分布式集群
超快速使用docker在本地搭建hadoop分布式集群 超快速使用docker在本地搭建hadoop分布式集群 学习hadoop集群环境搭建是hadoop入门的必经之路.搭建分布式集群通常有两个办法: ...
- 利用XAMPP本地搭建WordPress博客
现在越来越多的人利用WordPress搭建了自己的博客网站,我也是一样,但是还有一些人不知道怎么搭建WordPress网站的方法,因为怕弄 不好,所以也就没有花钱去做,所以这里我就讲讲怎么样利用XAM ...
- 如何在本地搭建DVWA环境
如何在本地搭建DVWA环境 1.工具下载: (1)phpStudy: http://phpstudy.php.cn/download.html (2)DVWA:http://www.dvwa.c ...
- 本地搭建json-server
1.前言 为了前端项目获取数据,需要在本地搭建json-server,这样保证可以在本地实现增删改查的操作. 2.安装 全局安装: npm -g json-server 3.创建一个json-serv ...
- 最新版本elasticsearch本地搭建入门篇
最新版本elasticsearch本地搭建入门篇 项目介绍 最近工作用到elasticsearch,主要是用于网站搜索,和应用搜索. 工欲善其事,必先利其器. 自己开始关注elasticsearch, ...
- 本地搭建Wordpress博客网站（Windows）
最近在写一些web功能测试的一个主题分享,里边有一个分类是数据库测试,那么数据库测试有几个点的方法,其中有一个是学会看数据库的日志.由于公司内部的数据库日志我们测试人员暂时不开放查看,所以打算自己在本 ...
- 如何在本地搭建一个Android应用crashing跟踪系统－ACRA
https://github.com/bboyfeiyu/android-tech-frontier/tree/master/others/%E5%A6%82%E4%BD%95%E5%9C%A8%E6 ...
随机推荐
- Python 接口测试（二）
三:http状态码含义(来源于w3school): 状态码: 1xx: 信息 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客 ...
- 深入浅出AQS之共享锁模式
在了解了AQS独占锁模式以后,接下来再来看看共享锁的实现原理. 原文地址:http://www.jianshu.com/p/1161d33fc1d0 搞清楚AQS独占锁的实现原理之后,再看共享锁的实现 ...
- Tomcat启动一闪而过
问题: 在下载tomcat7纯净版之后,配置完环境变量.运行startup.bat,一闪而过tomcat没有启动成功. 解决办法: 设置CLASSPATH.环境变量设置JAVA_HOME为java安装 ...
- 用sqlserver的自定义函数直接获取多级部门全名
好久没写存储过程了,今日正好同事的开发需要,实现显示多级部门的部门全名称. 如 财务部/会计部/会计一部 部门表 人员表 函数 getOrgAllName --OrgID 72 当前的部门ID A ...
- swift 开发学习问题
1 UITableViewController 问题: [UITableView dequeueReusableCellWithIdentifier:forIndexPath:], unable to ...
- Message:Unable to locate element 问题解决方法
Python断断续续学了有一段时间了,总感觉不找个小项目练练手心里没底,哪成想出门就遇到"拦路虎",一个脚本刚写完就运行报错,还好做足了心里准备,尝试自行解决. 或许网上有相关解决 ...
- oracle数据中记录被另一个用户锁住
原因:PL/SQL里面执行语句执行了很久都没有结果,于是中断执行,于是就直接在上面改字段,在点打钩(记入改变)的时候提示,记录被另一个用户锁住. 解决方法: 第一步:(只是用于查看哪些表被锁住,真正有 ...
- 移植Linux-3.4.2内核到S3C2440
一.BootLoader引导内核过程 1.Bootloader的工作 1.1.将内核读入内存 2.2.保存内核启动参数到指定位置,内核启动时去这个位置解析参数 3.3. ...
- 【NOIP】OpenJudge - 15：银行利息
#include<stdio.h>//银行利息 int main() { float a,b; int i,c,d; scanf("%f%f%d",&a,&am ...
- PHP CodeBase: 生成N个不重复的随机数
有25幅作品拿去投票,一次投票需要选16幅,单个作品一次投票只能选择一次.前面有个程序员捅了漏子,忘了把投票入库,有200个用户产生的投票序列为空.那么你会如何填补这个漏子? <?php /* ...