相关描述

前几天实现了柱状图等图的数据可视化，现在就来接着实现一下“更加”形象的数据可视化吧！

具体实现如下

<%@ 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>--%>

<%--&lt;%&ndash;以下内容--图--不显示&ndash;%&gt;--%>

<%--<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/┭┮﹏┭┮/）的更多相关文章

  1. Echarts笔记——使用AJAX填充数据

    最近把编辑器从Sublime换成HBuilder,感觉好用很多啊,可能自己插件没弄好吧.不不过HBuilder的启动速度确实慢,放机械盘启动要7-13秒,还好有固态. 因为项目需要,这周上手了百度的E ...

  2. echarts笔记

    常见问题: 1.x轴和y轴type同时为category时不可行 只能改变方式显示,返回不同名称,如加上百分比显示 formatter:"value%"; var waterLev ...

  3. Angular 学习笔记 ( 我追的 feature 和 bug )

    Angular 有许多功能还不齐全,也有不少 bug 让人很头疼,所以这里做一些记入 Angular Bug 1.input type="number", valueChanges ...

  4. 防Bug笔记

    最近不知道咋回事,写代码特别多bug出来.故专门做一笔记,记下容易犯的bug,以期日后减少低级错误. Python 1. JavaScript 1.多用``, 少用''/""

  5. Echarts的一些总结

    Echarts是专注做统计图表的插件,其本质是使用canvas进行图表的绘制.而如今它的属性和配置也是越来越丰富.基本的配置很简单,比如饼状图,就是数据和要显示的文字和颜色,柱状图,就是横纵坐标和数据 ...

  6. 《Linux内核设计与实现》Chapter 18 读书笔记

    <Linux内核设计与实现>Chapter 18 读书笔记 一.准备开始 一个bug 一个藏匿bug的内核版本 知道这个bug最早出现在哪个内核版本中. 相关内核代码的知识和运气 想要成功 ...

  7. 【测试基础第六篇】bug定义及生命周期

    bug定义 狭义:软件程序的漏洞或缺陷 广义:测试工程师或用户所发现和提出的软件可改进的细节(增强型.建议性)或需求文档存在差异的功能实现 职责:发现bug,提给开发,让其修改 bug类型--了解 代 ...

  8. Android程序crash处理

    Android程序crash处理 时间 2014-11-24 13:45:37  CSDN博客 原文  http://blog.csdn.net/allen315410/article/details ...

  9. swipe.js 2.0 轻量级框架实现mobile web 左右滑动

    属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...

  10. 初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选

    [playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...

随机推荐

  1. NifytGUI——ListBox控件

    ListBox控件的用法,创建一个xml,代码如下: <?xml version="1.0" encoding="UTF-8" standalone=&q ...

  2. 计算2-expr命令举例

    一.expr命令 1.语法和功能 只能用于整数运算和字符串长度.匹配等运算处理 expr 2 + 2 expr 2 - 2 expr 2 \* 2 expr 2 / 2 i=5;i=`expr $1 ...

  3. B - WeirdSort

    B - WeirdSort 思路:经过认真的审题,你会发现,这只是个冒泡的变形,我们建立两个数组,然后用一个数组里面的数字确定位置,然后冒泡就行了.最后抖机灵用了个is_sorted,判断数组里面数字 ...

  4. HDFS 机架感知与副本放置策略

    HDFS 机架感知与副本放置策略 机架感知(RackAwareness) 通常,大型 Hadoop 集群会分布在很多机架上,在这种情况下, 希望不同节点之间的通信能够尽量发生在同一个机架之内,而不是跨 ...

  5. 操作系统|02.Linux基础(1)

    Linux基础 1.Linux系统安装.密码的破解 1.1常见的系统 unix:性能稳定,价格高昂,命令与Linux相通.多为大型政府单位.大型企业.金融机构使用. Linux:开源.自由 Linux ...

  6. Linux 同步分发脚本

    shell 内容 #!/bin/bash #1. 判断参数个数 if [ $# -lt 1 ] then echo Not Enough Arguement! exit; fi 尚硅谷大数据技术之 H ...

  7. windows jetbrains toolbox 无法修改应用安装目录（应用正在运行）的解决方案

    打开 jetbrains toolbook安装目录/.settings.json 添加一行 "install_location": 指定的路径地址 解决方案来自 JetBrains ...

  8. 从NCBI中下载各物种参考基因组

    1. 打开NCBI 2. 输入物种名,以HPV为例: 搜索,到genomes分栏下面选择Assembly点击进去 3. 进去下面的界面,再点击RefSeq进入下载界面 4. 进入下载界面: HPV参考 ...

  9. ubuntu | virtualbox报错：不能为虚拟电脑打开一个新任务

    百度了几个办法 都不行. 还得是gxd,说在vmware虚拟机设置勾上这个就行了

  10. 【项目记录】3：pyinstaller打包之后tkcalendar无法使用的解决办法

    PyInstaller 没有检测到二级导入这一事实.tkcalendar 的HowTos文档中解释了解决此问题的方法: 使用 PyInstaller 捆绑应用程序时, 检测 tkcalendar 的 ...