美文网首页
ECharts中国地图可视化代码 - javascript代码模

ECharts中国地图可视化代码 - javascript代码模

作者: teaGod | 来源:发表于2017-09-28 16:08 被阅读0次

    需要用到的 js 文件:
    china.js , echarts.min.js , jquery-*.min.js

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    
        <base href="<%=basePath%>">
        <title>Funds investment intensity(map)</title>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript" src="js/china.js"></script>
    
    <h1>The map presentation</h1>
    <div id="main" style="width: 1600px; height: 900px;"></div>
    
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title : {
                text : 'Research and development funds investment intensity test',
                left : 'center'
            },
            tooltip : {
                trigger : 'item'
            },
            legend : {
                orient : 'vertical',
                left : 'left',
                data : [ '2012' ]
            },
            visualMap : {
                min : 0,
                max : 6,
                left : 'left',
                top : 'bottom',
                text : [ 'high', 'low' ],
                calculable : true
            },
            toolbox : {
                show : true,
                orient : 'vertical',
                left : 'right',
                top : 'center',
                feature : {
                    dataView : {
                        readOnly : false
                    },
                    restore : {},
                    saveAsImage : {}
                }
            },
            series : [ {
                name : '2012',
                type : 'map',
                mapType : 'china',
                roam : false,
                label : {
                    normal : {
                        show : true
                    },
                    emphasis : {
                        show : true
                    }
                },
                data : []
            }, ]
        };
        myChart.setOption(option);
        var info = {
            "opt" : "map"
        };
        //jquery加载数据
        $.post("./GetMapData", function(datas) {
            var e = eval(datas);
            myChart.setOption({
                series : [ {
                    data : e
                } ]
            })
        });
    </script>
    

    相关文章

      网友评论

          本文标题:ECharts中国地图可视化代码 - javascript代码模

          本文链接:https://www.haomeiwen.com/subject/crqvextx.html