Echarts官网：https://echarts.apache.org/zh/index.html

官方文档只给出了npm或者yarn 等安装方式

在jsp中使用也比较简单

1、直接在官方下载 echarts.js

https://echarts.apache.org/zh/download.html

如果只想使用某一个模块，官网也提供了定制下载：https://echarts.apache.org/zh/builder.html

2、将下载好的文件放在资源目录下，通过<script src="js/echarts.js"></script> 引入

3、在官网中找到想使用的图标，直接复制js代码到jsp中即可
https://echarts.apache.org/examples/zh/index.html

这里以饼状图为例

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="<c:url value='/resource/js/echarts.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/jquery-3.2.1.js'/>"></script>
</head>
 
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo" style="width: 500px; height: 200px;"></div>
	<script type="text/javascript"> var demo= echarts.init(document.getElementById('demo')); option = { title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; demo.setOption(option); </script>
 
</body>
 
</html>

图表显示是需要数据的，但是其官网教程中为了演示方便直接在页面js中填入数据

而我们更经常的要做的操作是从远程服务器将数据取出，放入图表。

通过ajax获取数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="<c:url value='/resource/js/echarts.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/jquery-3.2.1.js'/>"></script>
</head>
 
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo" style="width: 500px; height: 200px;"></div>
	<script type="text/javascript"> var demo= echarts.init(document.getElementById('demo')); var url = '${pageContext.request.contextPath}/getData'; $.getJSON(url).done(function(data) { demoData = data.demoData; option = { title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: '50%', // 将这里的数据替换成我们后端传来的json字符串就OK了 data: demoData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; demo.setOption(option); }) </script>
 
</body>
 
</html>

@WebServlet("/getData")
public class GetAllDataServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	public GetAllDataServlet() {
        super();
    }
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		Integer[] salesVolume = {10,100,20,56,35,80};
		
		Map<String, Object> map = new HashMap<>();
		map.put("demoData", salesVolume);
		
		response.getWriter().println(JSON.toJSONString(map));
		
	}
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
 
}

如何在jsp中使用ECharts

在jsp中使用也比较简单

相关文章

热门标签

最新文章