echarts显示过程中(jstl)传值方法


<%@ 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 lang="zh">
<head>
    <meta charset="UTF-8">
    <title>新型冠状病毒肺炎实时地图</title>
    <style>
        #main {
            margin: 20px auto; /* 外边距 */
            width: 1000px;
            height: 720px;
        }
    </style>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    
</head>
<body>
<div id="main"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById(main));

var dataList = [];
<c:if test="${!empty courses}">
<c:forEach items="${courses}" var="item">
    var obj = {
            name: "${item.local}",
            value: "${item.num}"
    };
    dataList.push(obj);
</c:forEach>
</c:if>
/*
window.dataList = [
    
    <c:forEach items="${courses}" var="item">
    alert("${item.num}");{
    name: "${item.local}",
    value: "${item.num}"
},
    </c:forEach>

];
*/
option = {
tooltip: {
    triggerOn: "click",
    formatter: function(e, t, n) {
        return .5 == e.value ? e.name + ":有疑似病例" : e.seriesName + "<br />" + e.name + "" + e.value
    }
},
visualMap: {
    min: 0,
    max: 1000,
    left: 26,
    bottom: 40,
    showLabel: !0,
    text: ["", ""],
    pieces: [{
        gt: 50,
        label: "> 50 人",
        color: "#7f1100"
    }, {
        gte: 10,
        lte: 50,
        label: "10 - 50 人",
        color: "#ff5428"
    }, {
        gte: 1,
        lt: 10,
        label: "1 - 9 人",
        color: "#ff8c71"
    }, {
        gt: 0,
        lt: 1,
        label: "疑似",
        color: "#ffd768"
    }, {
        value: 0,
        color: "#ffffff"
    }],
    show: !0
},
geo: {
    map: "china",
    roam: !1,
    scaleLimit: {
        min: 1,
        max: 2
    },
    zoom: 1.23,
    top: 120,
    label: {
        normal: {
            show: !0,
            fontSize: "14",
            color: "rgba(0,0,0,0.7)"
        }
    },
    itemStyle: {
        normal: {
            //shadowBlur: 50,
            //shadowColor: ‘rgba(0, 0, 0, 0.2)‘,
            borderColor: "rgba(0, 0, 0, 0.2)"
        },
        emphasis: {
            areaColor: "#f2d5ad",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 0
        }
    }
},
series: [{
    name: "用户分布",
    type: "map",
    geoIndex: 0,
    data: dataList
}]
};

    myChart.setOption(option);
</script>
</html>

中国地图,毕设研社区用户位置显示

传值关键代码:

var dataList = [];
<c:if test="${!empty courses}">
<c:forEach items="${courses}" var="item">
    var obj = {
            name: "${item.local}",
            value: "${item.num}"
    };
    dataList.push(obj);
</c:forEach>
</c:if>

 

 

 

<%@ 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 lang="zh"><head>    <meta charset="UTF-8">    <title>新型冠状病毒肺炎实时地图</title>    <style>        #main {            margin: 20px auto; /* 外边距 */            width: 1000px;            height: 720px;        }    </style>    <script src="js/echarts.min.js"></script>    <script src="js/china.js"></script>    </head><body><div id="main"></div></body><script>var myChart = echarts.init(document.getElementById(‘main‘));
var dataList = [];<c:if test="${!empty courses}"><c:forEach items="${courses}" var="item">var obj = {name: "${item.local}",    value: "${item.num}"};dataList.push(obj);</c:forEach></c:if>/*window.dataList = [<c:forEach items="${courses}" var="item">alert("${item.num}");{    name: "${item.local}",    value: "${item.num}"},</c:forEach>
];*/option = {tooltip: {    triggerOn: "click",    formatter: function(e, t, n) {        return .5 == e.value ? e.name + ":有疑似病例" : e.seriesName + "<br />" + e.name + ":" + e.value    }},visualMap: {    min: 0,    max: 1000,    left: 26,    bottom: 40,    showLabel: !0,    text: ["高", "低"],    pieces: [{        gt: 50,        label: "> 50 人",        color: "#7f1100"    }, {        gte: 10,        lte: 50,        label: "10 - 50 人",        color: "#ff5428"    }, {        gte: 1,        lt: 10,        label: "1 - 9 人",        color: "#ff8c71"    }, {        gt: 0,        lt: 1,        label: "疑似",        color: "#ffd768"    }, {        value: 0,        color: "#ffffff"    }],    show: !0},geo: {    map: "china",    roam: !1,    scaleLimit: {        min: 1,        max: 2    },    zoom: 1.23,    top: 120,    label: {        normal: {            show: !0,            fontSize: "14",            color: "rgba(0,0,0,0.7)"        }    },    itemStyle: {        normal: {            //shadowBlur: 50,            //shadowColor: ‘rgba(0, 0, 0, 0.2)‘,            borderColor: "rgba(0, 0, 0, 0.2)"        },        emphasis: {            areaColor: "#f2d5ad",            shadowOffsetX: 0,            shadowOffsetY: 0,            borderWidth: 0        }    }},series: [{    name: "用户分布",    type: "map",    geoIndex: 0,    data: dataList}]};
    myChart.setOption(option);</script></html>

echarts显示过程中(jstl)传值方法

上一篇:nginx网站加密SSL


下一篇:03-css3D转换