使用jsp+echart 开发简单曲线图实例
开发前准备
1.官网下载echart 的js文件https://echarts.baidu.com/download.html
2.搭建简单的jsp项目。
本实例只采用静态的数据实例生成曲线。
项目部署
1.新建项目。
创建serverlet项目，在项目文件夹WebRoot下新建js文件夹，将echarts.js文件拷贝到此文件夹下。
2.创建jsp文件。
在项目index.jsp文件中编写代码：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'tvHisQuery.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src = "./js/echarts.js" type = "text/javascript"></script>
</head>
<body>
<div id='main'style = 'width:1500px; height:1000px;'></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title:{
text:'value',
left:'center',
textStyle:{color:'#ccc'}
},
tooltip:{
trigger:'axis'
},
xAxis:{
data:["a","b","c","d"]
},
yAxis:{},
series:[{
name:'turnover',
type:'line',
data:[5,3,6,7] }]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果
tomcat运行项目，采用浏览器访问项目。http://localhost:8080/ChartLine/index.jsp
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
