ECharts笔记--实现地图版的数据显示（存在bug/┭┮﹏┭┮/）
相关描述
前几天实现了柱状图等图的数据可视化，现在就来接着实现一下“更加”形象的数据可视化吧！
具体实现如下
<%@ 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>
ECharts笔记--实现地图版的数据显示（存在bug/┭┮﹏┭┮/）的更多相关文章
- Echarts笔记——使用AJAX填充数据
最近把编辑器从Sublime换成HBuilder,感觉好用很多啊,可能自己插件没弄好吧.不不过HBuilder的启动速度确实慢,放机械盘启动要7-13秒,还好有固态. 因为项目需要,这周上手了百度的E ...
- echarts笔记
常见问题: 1.x轴和y轴type同时为category时不可行 只能改变方式显示,返回不同名称,如加上百分比显示 formatter:"value%"; var waterLev ...
- Angular 学习笔记 ( 我追的 feature 和 bug )
Angular 有许多功能还不齐全,也有不少 bug 让人很头疼,所以这里做一些记入 Angular Bug 1.input type="number", valueChanges ...
- 防Bug笔记
最近不知道咋回事,写代码特别多bug出来.故专门做一笔记,记下容易犯的bug,以期日后减少低级错误. Python 1. JavaScript 1.多用``, 少用''/""
- Echarts的一些总结
Echarts是专注做统计图表的插件,其本质是使用canvas进行图表的绘制.而如今它的属性和配置也是越来越丰富.基本的配置很简单,比如饼状图,就是数据和要显示的文字和颜色,柱状图,就是横纵坐标和数据 ...
- 《Linux内核设计与实现》Chapter 18 读书笔记
<Linux内核设计与实现>Chapter 18 读书笔记 一.准备开始 一个bug 一个藏匿bug的内核版本 知道这个bug最早出现在哪个内核版本中. 相关内核代码的知识和运气 想要成功 ...
- 【测试基础第六篇】bug定义及生命周期
bug定义 狭义:软件程序的漏洞或缺陷 广义:测试工程师或用户所发现和提出的软件可改进的细节(增强型.建议性)或需求文档存在差异的功能实现 职责:发现bug,提给开发,让其修改 bug类型--了解 代 ...
- Android程序crash处理
Android程序crash处理 时间 2014-11-24 13:45:37 CSDN博客 原文 http://blog.csdn.net/allen315410/article/details ...
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...
- 初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选
[playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...
随机推荐
- Ubuntu18.04 右上角网络连接消失问题记录
问题记录 因为一块板子要访问远程桌面,需要联网才行,然后发现桌面右上角的网络连接标志不见了,而且无论用usb共享网路,或者是无线网卡,都连不上网. 首先想是不是硬件的问题,给系统重新装了一个ubunt ...
- （jmeter笔记）jmeter打印日志
Bean Shell常用内置变量 JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.l ...
- redis统计用户活跃数量
1.说明,redis 位图存储节省内存,用户id:156,1333; 如果用户登录,根据日期存储为1 setbit 20209001 156 1 ;//id为156的用户在1月1号登录了 setbit ...
- 射频识别技术(RFID)
概述: 无线射频识别即射频识别技术(Radio Frequency Identification,RFID),是自动识别技术的一种,通过无线射频方式进行非接触双向数据通信,利用无线射频方式对记录媒体( ...
- Surface Pro (1796)，安装Win11之后出现的问题。
2020年年中我为了体验微软新的操作系统,加入了Review计划,即:Windows预览体验计划.然后升级到了Win11.由于苏菲一直是作为辅助设备用,所以平时就是开节电模式,中途也升级了几次Win1 ...
- XSS跨站脚本攻击(Cross Site Scripting)
XSS是跨站脚本攻击(Cross Site Scripting),不写为CSS是为了避免和层叠样式表(Cascading Style Sheets)的缩写混淆,所以将跨站脚本攻击写为XSS. 攻击者可 ...
- 分布式中间件MyCat 使用
MySQL 分布式软件MyCAT介绍 目录 MySQL 分布式软件MyCAT介绍 一.MySQL 分布式软件MyCAT介绍 1.1.1 MySQL 分布式软件MyCAT介绍 1.1.2 MyCat 架 ...
- React++antd+ProComponents可编辑表格EditableProTable组件实现表单中的可编辑列表组件
需求: 在新增&编辑表单中,共分三个表单模块,第二个模块设计为一个可编辑表格组件,其中可选下拉列表依赖外层第一个模块的某条数据值,提供新增.编辑.删除.按规定条件去重等功能,并在第三个模块中自 ...
- 未知：长度为 K 的重复字符子串
给你一个由小写字母组成的长度为n的字符串 S ,找出所有长度为 k 且包含重复字符的子串,请你返回全部满足要求的子串的数目. 数据范围: , 进阶: 时间复杂度,空间复杂度 输入例子1: &qu ...
- Error:fatal: no such path /web/controller/XXXController.java in HEAD. 报错！
现象: Error:fatal: no such path /test/XXXController.java in HEAD. 报错! 原因: 重命名文件夹大小写问题: 解决办法: git mv Te ...