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 ...
随机推荐
- 比较JqGrid与XtraGrid
此只能比较两者的功能优劣,实现某种功能.效果的方便性和效率.首先分别粗略介绍XtraGrid和jqGrid DevExpress是目前.net下最为强大和完整的UI控件库, XtraGrid是这个控件 ...
- Linux 安装Anaconda 4.4.0
安装步骤参考了官网的说明:https://docs.anaconda.com/anaconda/install/linux.html 具体步骤如下: 1.在官网下载地址 https://www.an ...
- 使用jquery的方法和技巧2，点击多选框的jquery响应
使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...
- JavaWeb（一）之细说Servlet
前言 其实javaWeb的知识早就学过了,可是因为现在在搞大数据开发,所以web的知识都忘记了.准备开始慢慢的把Web的知识一点一点的回忆起来,多学一点没有关系,就怕到时候要用的话,什么都不会了. 一 ...
- Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)ABCD
A. Arpa and a research in Mexican wave time limit per test 1 second memory limit per test 256 megaby ...
- http://codeforces.com/contest/536/problem/B
B. Tavas and Malekas time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- php中常用的字符串大小写转换函数实例解释
PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. strtolower函数.strtoupper函 ...
- java数据库编程之嵌套子查询及exists的使用
第四章:高级查询(二) 4.1:exists和not exists子查询 4.1.1:exists子查询 用exists作为子查询的where条件 语法:select,,,,,,from 表名 w ...
- open() close()
open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 每个参数必须用引号 参数说明: URL:可选参数,在窗口中 ...
- TreeViewItem实现整行选中 (两种用法)
用法一 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quo ...