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 ...
随机推荐
- liveview能设定开机最小化到托盘吗 对liveview 3.5.2的建议
liveview能设定开机最小化到托盘吗?[建议] 能不能添加上面的功能,最好能开机自动录制 目前我的版本是3.5.2 建议增加功能 1.开机最化到托盘 2.开机自动 ...
- Android 系统完整的权限列表
访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.perm ...
- 使用端口排查解决启动Tomcat端口被占问题
有时候在eclipse中启动Tomcat或启动纯净版的Tomcat会出现端口被占的问题,下面菜鸟小编带大家进行端口排查解决问题.(下面假设是我的80端口被占了,如果你不知道你的Tomcat端口是多少就 ...
- 项目启用eslint 检测工具
在日常开发中,一个大点的项目会有多人参与,那么可能就会出现大家的代码风格不一,各显神通,这个时候就要祭出我们的eslint. 在这之前磨刀不误砍柴工,我们先来配置一下我们的代码编辑工具,如何在vsco ...
- STM32F103RCT6驱动AD7705（cubeide）
首先在cubeide上配置spi,使用spi1,由于正点开发板上的nr24l01与ad7705正好相同,因此根据引脚配置PA1为DRDY,PC4为CS片选 根据手册上所写,配置寄存器初始化 uint8 ...
- Zabbix 监控服务介绍
Zabbix 监控服务介绍 目录 Zabbix 监控服务介绍 一.Zabbix 监控服务介绍 1.1.1 Zabbix 监控服务介绍 1.1.2 如何去做监控 1.13 硬件监控 1.1.4 系统监控 ...
- Python调用钉钉群机器人发送群消息
1.首先需要一个钉钉群,群才有机器人 2.群设置->智能群助手->添加机器人->自定义机器人 3.添加自定义机器人,配置如下:给机器人命名,选择加签.保存机器人的秘钥.Webhook ...
- C++与C语言中struct 与typedef struct 应用区别(摘自csdn mpp_king)
typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,stru ...
- 学习dom,bom中全选按钮设置
<script> var cbAll = document.getElementById('j_cbAll') //全选按钮 var jt ...
- Hyper-V 直连主机USB设备
因为授权问题不让用 Vmware 了.所以换成微软自带的 Hyper V 但是碰到一个很头痛的问题,就是外部设备没法像 Vmware 那样直接连接到虚拟机里面,很多第三方设备没法调试了. 找了很久终于 ...