第三周课堂测试3

Posted 2021-03-06 songxinai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三周课堂测试3相关的知识，希望对你有一定的参考价值。

技术图片

设计思路

1、在阶段二的主界面添加点击事件

2、引入各省市的json数据文件

3、Servlet获取数据库值

源代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<title>Insert title here</title>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;;height:600px;"></div>    
  
<script>

var myChart = echarts.init(document.getElementById(‘main‘));
//myChart.showLoading();
var province = "${province}";
//var list = "${list}";


$.get("json/"+ province +".json", function (geoJson) {

    myChart.hideLoading();

    echarts.registerMap(province, geoJson);

    myChart.setOption(option = {
        title: {
            text: province + ‘地区疫情情况‘,
        },
        tooltip: {
            trigger: ‘item‘,
            formatter:   function(params) {
                
                return params.name + ‘<br/>‘ + ‘确诊人数 : ‘ + params.value + ‘<br/>‘ ;
            } 
        },
        toolbox: {
            show: true,
            orient: ‘vertical‘,
            left: ‘right‘,
            top: ‘center‘,
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 0,
            max: 50000,
            text: [‘High‘, ‘Low‘],
            inRange: {
                color: [‘lightskyblue‘, ‘yellow‘, ‘orangered‘]
            }
        },
        series: [
            {
                name: province + ‘地区疫情情况‘,
                type: ‘map‘,
                mapType: province, // 自定义扩展图表类型
                label: {
                    show: true
                }
            }
        ]
    });
});



$.ajax({
    url:"CityServlet?method=d",
    async:true,
    type:"POST",
    data:{"province":province},
    success:function(data){
 
        var mydata1 = new Array(0);
        for(var i=0;i<data.length;i++){
            var c = {};
            c["name"] = data[i].province+‘市‘;
            c["value"] = data[i].confirmed_num;
            mydata1.push(c);
        }
        myChart.setOption({        //加载数据图表
            series: [{
                data: mydata1
            }]
        });
    },
    error:function(){
        alert("请求失败");
    },
    dataType:"json"
});




</script>


</body>
</html>

结果截图

技术图片

以上是关于第三周课堂测试3的主要内容，如果未能解决你的问题，请参考以下文章