1)、把相应的库拷贝到webapp目录
2)、在jsp中引入
<script src="/zg2/js/jquery-1.8.3.js"></script>
<script src="/zg2/js/echarts.js"></script>
package com.sm2107a.zg2.controller;
import com.sm2107a.zg2.pojo.TbUser;
import com.sm2107a.zg2.service.TbUserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
/**
* @author 军哥
* @version 1.0
* @description: EChart图表的示例
* @date 2023/10/19 14:40
*/
@Controller
@Slf4j
@RequestMapping(value = "/echarts")
public class EChartController {
@Autowired
TbUserService tbUserService;
@GetMapping(value = "/index")
public String index() {
return "/echarts/index";
}
@PostMapping(value = "/getUserAge")
@ResponseBody
public Object getUserAge() {
List<TbUser> list = tbUserService.list();
//-- 组织数据
ArrayList<String> names = new ArrayList<>();
ArrayList<Integer> ages = new ArrayList<>();
//-- 生成饼状图的数据
ArrayList<HashMap<String, Object>> hashMapArrayList = new ArrayList<>();
for (TbUser tbUser : list) {
names.add(tbUser.getUserName());
ages.add(tbUser.getUserAge());
HashMap<String, Object> integerHashMap = new HashMap<>();
integerHashMap.put("value", tbUser.getUserAge());
integerHashMap.put("name", tbUser.getUserName());
hashMapArrayList.add(integerHashMap);
}
//-- 返回数据
HashMap<String, Object> map = new HashMap<>();
map.put("names", names);
map.put("ages", ages);
map.put("pie", hashMapArrayList);
map.put("code", 200);
return map;
}
/***
* @description 三种图形显示再一个页面上
* @params
* @return java.lang.String
* @author 军哥
* @date 2023/10/19 15:54
*/
@GetMapping(value = "/three")
public String three() {
return "/echarts/three";
}
}
<%--
Created by IntelliJ IDEA.
User: andy
Date: 2023/11/17
Time: 16:06
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>订单汇总统计</title>
<script src="/zg2/js/echarts.js" ></script>
<script src="/zg2/js/jquery-1.8.3.js" ></script>
</head>
<body>
<div>
<div id="main" style="width: 400px;height:300px;"></div>
</div>
<div>
<input type="button" value="显示折线图" onclick="showEcharts(1)">
<input type="button" value="显示柱状图" onclick="showEcharts(2)">
<input type="button" value="显示饼状图" onclick="showEcharts(3)">
</div>
<script type="text/javascript">
// 获取数据并显示图形
function showEcharts(type) {
$.post("/zg2/chart/getUserAmount.do", {}, function (res) {
if(type == 1) {
// 显示折线图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 2108A'
},
tooltip: {},
legend: {
data: ['账单金额']
},
xAxis: {
data: res.xdata
},
yAxis: {},
// 定义图形的样式
// bar 柱状图 line 折线图 pie 饼状图
series: [
{
name: '账单金额',
type: 'line',
data: res.ydata
}
]
};
myChart.setOption(option, true);
}
else if(type == 2) {
// 显示柱状图
// 显示折线图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 2108A'
},
tooltip: {},
legend: {
data: ['账单金额']
},
xAxis: {
data: res.xdata
},
yAxis: {},
// 定义图形的样式
// bar 柱状图 line 折线图 pie 饼状图
series: [
{
name: '账单金额',
type: 'bar',
data: res.ydata
}
]
};
myChart.setOption(option, true);
}
else if(type == 3) {
// 显示饼状图
// 显示折线图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 2108A'
},
tooltip: {},
legend: {
data: ['账单金额']
},
// 定义图形的样式
// bar 柱状图 line 折线图 pie 饼状图
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: res.pies
}
]
};
myChart.setOption(option, true);
}
});
}
$(document).ready(function () {
// 默认显示并状态
showEcharts(3);
});
</script>
</body>
</html>