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 ...
随机推荐
- next.js引入antd报错
首先在pages根目录下新建一个_app.js ,代码如下,然后再引入对应antd组件即可 import App from 'next/app' import 'antd/dist/antd.cs ...
- Linux常用指令1
1.文件和目录的相关指令: ·cd:打开 ·pwd:查看当前所在的目录 ·mkdir:新建目录 ·rmdir:删除目录 ·ls:文件和目录查看 ·cp:复制 ·rm:删除 ·mv:移动 2.文本文件内 ...
- 关于decimal与double数据类型
关于double和decimal类型, double类型能表示的精度不如decimal,但是其数据范围比decimal的大. 对于double类型的字段,用sum函数会出现多位小数的情况,比如a+b+ ...
- SpringBoot怎么管理封装java包的关系
首先SpringBoot直接写注解加依赖就可以了,基本上不用写xml,非常方便,在这里我只写了两个核心包 为什么选择jar类型? SpringBoot基本上是个应用程序了,只要用java命令程序去运行 ...
- chap3第三小组总结
本周我们第三小组在张庆老师的带领下,走向编程的新一扇大门--分支结构. 我们第三小组是线下聚在一起学习,这样可以使我们的学习效率大大提高,我们在线下学习可以让我们的小组长更方便的指导我们的学习 ...
- 正则url匹配
今天来说一下正则的url匹配 示例:url ="https://v5.lairen.com/activity?id=862&code=ab9a61823398273b7b036fd9 ...
- （1）从txt读取GPS数据 真实GPS和slam定位GPS匹配 坐标系ecef和enu转化 计算均方根误差和单帧误差
#!/usr/bin/python # -*- coding: UTF-8 -*- import numpy as np import os #==========================1坐 ...
- springboot项目 报错No mapping for GET /css/bootstrap.css，前端无法展示样式
说来也奇怪,前几天刚写完的项目 写的好好的 现在打开他就加载不了前端的静态资源了 报错No mapping for GET /css/bootstrap.css 解决方法: 新建一个配置类 ,将静态资 ...
- nginx中proxy_set_header Host $host的作用
nginx配置upstream负载均衡后请求400,配置proxy_set_header Host $host成功.请问这是什么原理? proxy_set_header Host $host有什么作用 ...
- CSS 语法-习惯代码书写风格
代码风格是实际开发中的书写方式,并非强制标准. CSS 样式格式: 展开格式:开发过程使用,代码可读性强,便于调错. 紧凑格式:上传服务器时使用,减少不必要的空白字符,压缩文件大小,利于传输. 代码压 ...