案例
程序员文章站
2022-04-15 09:07:12
打开页面在页面上展示 , 各个省份的用户量 ,和各个商品的库存量
1 页面
展示数据 , 数据从后台查询的
在页面加载的时候 请求后台 获取数据 [ajax异步请求技术] 将返回的数据展示到echarts中
1) 在页面加载的时候 请求后台 导入jQuery.js文件
<script src="../js/jquery.min.js"></script>
$.ajax({
url:"/day0001_war/Ajax"
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
</body>
<script>
// 原生的js有异步请求技术 但是十分复杂
// 使用jQuery类库 ajax请求代码简洁 功能强大
$.ajax({
url:"/day0001_war/Ajax"
})
</script>
</html>$.ajax({
url:"/day0001_war/MyEcharts"
dataType:"json" ,
success:function(res){
// 展示echarts图表
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts展示数据</title>
<script src="../js/echarts-en.min.js"></script>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="d1" style="width: 700px;height: 500px;float: left"></div>
<div id="d2" style="width: 700px;height: 500px ;float: right"></div>
</body>
<script>
/**/
// 初始化echarts对象
var myChart = echarts.init(document.getElementById('d1'));
// option
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
//set
myChart.setOption(option);
</script>
<script>
$.ajax({
url: "/day0001_war/MyEcharts",
dataType:"json" ,
success: function (res) {
alert(res.names)
// 初始化echarts对象
var myChart = echarts.init(document.getElementById('d2'));
// option
option = {
xAxis: {
type: 'category',
data: res.names
},
yAxis: {
type: 'value'
},
series: [{
data: res.values,
type: 'line'
}]
};
//set
myChart.setOption(option);
}
})
</script>
</html>2 后台
接收页面的请求 , 返回yemia
package com._51doit.controller;
import com._51doit.pojo.PageBean;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "MyEcharts")
public class MyEcharts extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
resp.setHeader("content-Type","text/html;charset=UTF-8");
// 接收页面的请求
// 返回结果数据 json数据 names values
PageBean pageBean = new PageBean();
// pageBean封装数据
pageBean.setNames(new String[]{"华为p40","苹果12","小米10","华为p30","锤子09"});
pageBean.setValues(new int[]{100,88,23,49,32});
//将pageBean转换成json数据
String res = JSON.toJSONString(pageBean);
resp.getWriter().write(res);
}
}
本文地址：https://blog.csdn.net/qq_37933018/article/details/109271979