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 ...
随机推荐
- Docker info 查看报错 WARNING: No swap limit support 解决
docker可以通过启动命令来限制容器可以使用的最大物理内存和swap,但是通常在使用这些命令的时候经常会碰到"WARNING: No swap limit support"警告 ...
- Filament初探，全场景性能测试
一直很想研究下Filament在移动端全场景(大约20万Triangle,约120个渲染实体)的实时帧率.终于在今天有时间腾出来研究下Filament在Android上的全场景PBR渲染性能. 这里以 ...
- [OC] APP唤醒，URL Scheme，工程中的 URL Types 和 LSApplicationQueriesSchemes
1.网页唤醒APP: 假设我们有一个APP,名字叫做 "APP甲",需要通过网页唤起 APP甲,我们首先需要在 APP甲的工程文件里配置参数 URL Types: 在 info.p ...
- com.alibaba.fastjson.JSONObject cannot be cast to xxx
今天在使用json格式的数据进行转化的时候遇到了这个问题,故此记录下来. 通常我们使用JSON把数据转成实体的方法是这样的 List<DataModel> dataModels= (Lis ...
- mysql 正则匹配不规则日期
where colum4 REGEXP "^[[:digit:]]{1}/[[:digit:]]{1}/[[:digit:]]{4}"=1 -- 2/3/2021 wher ...
- python学习（day4）
1.selenium库 import selenium #使用selenium跳过登陆 '''selenium pip install selenium ''' from selenium impor ...
- echarts区域选择(brush)默认开启选择
api.dispatchAction({ // 刷选模式的开关.使用此 action 可将当前鼠标变为可刷选状态. 事实上,点击 toolbox 中的 brush 按钮时,就是通过这个 action, ...
- MQTT服务器搭建——Liunx安装mosquitto，并设置用户密码
一.安装 1.下载mosquitto安装包 地址:http://mosquitto.org/files/source/ 2.安装依赖包 yum install gcc gcc-c++ libstdc+ ...
- sql 字符串末尾空格不占长度
print len('qwer ');--4 print len('qwer ');--4 print len('qwer ' + 't');-- ...
- python3GUI--天气预报小工具By:PyQt5（附源码）
@ 目录 一．准备工作 二．预览 1.启动 2.添加城市 三．设计流程 1.UI设计(草图) 2.UI设计(QT设计师) 3.解释 四．源代码 五．总结 之前用tk写过一款python3GUI--天气 ...