相关描述
前几天实现了柱状图等图的数据可视化，现在就来接着实现一下“更加”形象的数据可视化吧！
具体实现如下
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: 12140
Date: 2023/2/21
Time: 23:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src="lib/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="lib/china.js"></script>
<title>浏览界面</title>
</head>
<body>
<%--<%--%>
<%-- Object message=request.getAttribute("message");--%>
<%-- if(message!=null&&!"".equals(message)){--%>
<%-- %>--%>
<%--<script type="text/javascript">--%>
<%-- alert(<%=request.getAttribute("message")%>);--%>
<%--</script>--%>
<%--<%}%>--%>
<%--<div align="center">--%>
<%-- <table border="1">--%>
<%-- <tr>--%>
<%-- <th>地区名称</th>--%>
<%-- <th>地区人数</th>--%>
<%-- </tr>--%>
<%-- <c:forEach items="${list}" var="l">--%>
<%-- <tr>--%>
<%-- <td>${l.name}</td>--%>
<%-- <td>${l.count}</td>--%>
<%-- </tr>--%>
<%-- </c:forEach>--%>
<%-- </table>--%>
<%--</div>--%>
<%--<%–以下内容--图--不显示–%>--%>
<%--<div id="main" style="width:400px;height:400px;"></div>--%>
<%--<script type="text/javascript">--%>
<%-- var myCharts=echarts.init(document.getElementById("main"));--%>
<%-- var array=new Array();--%>
<%-- var index=0;--%>
<%-- <c:forEach items="${list}" var="l">--%>
<%-- array[index++]=${l.count};--%>
<%-- </c:forEach>--%>
<%-- //指定表--%>
<%-- var option={--%>
<%-- title:{--%>
<%-- text:"地区人数图"--%>
<%-- },--%>
<%-- tooltip:{--%>
<%-- show:true--%>
<%-- },--%>
<%-- legend:{--%>
<%-- data:['各地区人数']--%>
<%-- },--%>
<%-- xAxis:[--%>
<%-- {--%>
<%-- type:'category',--%>
<%-- data:[--%>
<%-- <c:forEach items="${list}" var="l">--%>
<%-- ["${l.name}"],--%>
<%-- </c:forEach>--%>
<%-- ]--%>
<%-- }--%>
<%-- ],--%>
<%-- yAxis:[--%>
<%-- {--%>
<%-- type:'value'--%>
<%-- }--%>
<%-- ],--%>
<%-- series:[--%>
<%-- {--%>
<%-- name:'count',--%>
<%-- type:'map',--%>
<%-- mapType:'china',--%>
<%-- data:array--%>
<%-- }--%>
<%-- ]--%>
<%-- };--%>
<%-- myCharts.setOption(option);--%>
<%--</script>--%>
请输入你想要查询的地区名称：<input type="text" name="dd">
<button onclick="search()">查询</button>
<div id="main" style="width:400px;height:600px"></div>
<script type="text/javascript">
function search(){
//获取到该值
dd=$("input[name=dd]").val();
//ajax
$.ajax({
type:"post",
url:"chartServlet?method=search",//成功
datatype:"json",
data:{"dd":dd},
success:function(msg){
var json=JSON.parse(msg);
var mapdata=[];
size=json.length;
for(i=0;i<size;i++){
mapdata.push({name:json[i].name,value:json[i].count});
}
var myCharts=echarts.init(document.getElementById("main"));
var option={
//图示标题
title:{
text:'各省疫情当日确认情况'
},
// 悬浮窗提示--数据更为详细
tooltip:{
trigger:'item',
formatter:function(params){
index=params.dataIndex;
res="<p>"+params.name+"</p><p>确诊人数："+
json[index].count+"</p>";
return res;
}
},
// 定义染色
visualMap:{
show:true,
x:'left',
y:'bottom',
splitList:[
{start:1},
{start:10,end:20},
{start:21,end:30},
{start:31,end:40},
],
color:['#930000','#EA0000','#ff7575','#F9F900']
},
//定义系列
series:[{
name:'确诊人数',
type:'map',
mapType:'china',
roam:false,
label:{
normal:{
show:true
},
emphasis:{
show:false
}
},
data:mapdata
}]
};
myCharts.setOption(option);
},
error:function(){
alert("请求失败！");
}
});
}
</script>
</body>
</html>