echarts中国地图效果图：

===================

需要引入echarts的js文件：（1.echarts.min.js；2.china.js）

下载地址：

echarts.min.js：http://echarts.baidu.com/download.html

china.js：https://github.com/apache/incubator-echarts（下载以后，找到map文件夹中的china.js）

页面代码：

echartsMap.jsp：

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%

    String ctxPath = request.getContextPath();

    request.setAttribute("ctxpath", ctxPath);//项目根路径

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>

<%-- <script src="${ctxpath}/js/zrender.min.js"></script> --%>

<script src="${ctxpath}/js/echarts.min.js"></script>

<script src="${ctxpath}/js/china.js"></script>

<title>echarts示例</title>

<script type="text/javascript">

$(function(){

    var aa = document.getElementById("test");

    debugger;

    //var myEcharts = echarts.init(document.getElementById("test"));

    var myEcharts = echarts.init(aa);

    option = {

            tooltip: {

                trigger: 'item',

                formatter: '{b}'

            },

            series: [

                {

                    name: '中国',

                    type: 'map',

                    mapType: 'china',

                    selectedMode : 'multiple',

                    label: {

                        normal: {

                            show: true

                        },

                        emphasis: {

                            show: true

                        }

                    },

                    data:[

                        {name: '北京', selected:true},

                        {name: '天津', selected:false},

                        {name: '上海', selected:false},

                        {name: '重庆', selected:false},

                        {name: '河北', selected:false},

                        {name: '河南', selected:false},

                        {name: '云南', selected:false},

                        {name: '辽宁', selected:false},

                        {name: '黑龙江', selected:false},

                        {name: '湖南', selected:false},

                        {name: '安徽', selected:false},

                        {name: '山东', selected:false},

                        {name: '新疆', selected:false},

                        {name: '江苏', selected:false},

                        {name: '浙江', selected:false},

                        {name: '江西', selected:false},

                        {name: '湖北', selected:false},

                        {name: '广西', selected:true},

                        {name: '甘肃', selected:false},

                        {name: '山西', selected:false},

                        {name: '内蒙古', selected:false},

                        {name: '陕西', selected:false},

                        {name: '吉林', selected:false},

                        {name: '福建', selected:false},

                        {name: '贵州', selected:false},

                        {name: '广东', selected:false},

                        {name: '青海', selected:false},

                        {name: '西藏', selected:false},

                        {name: '四川', selected:false},

                        {name: '宁夏', selected:false},

                        {name: '海南', selected:false},

                        {name: '台湾', selected:false},

                        {name: '香港', selected:false},

                        {name: '澳门', selected:false},

                        {name: '南海诸岛', selected:false}

                    ]

                }

            ]

        };

    myEcharts.setOption(option);

    //window.onresize = myEcharts.resize;

    myEcharts.on('click', function (params) {

        debugger;

        var city = params.name;

        /* loadChart(city); */

        localStorage.setItem('city', city);

        window.location.href = "${ctxpath}/page/toArea.html";

    });

});

function randomValue() {

    return Math.round(Math.random()*1000);

}

</script>

</head>

<body>

    Echarts中国地图demo：

    <div id="test" style="width: 800px;height: 800px;margin: 0 auto;"></div>

</body>

</html>

area.jsp：

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%

    String ctxPath = request.getContextPath();

    request.setAttribute("ctxpath", ctxPath);//项目根路径

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>首页</title>

<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

    $(function(){

        var city = localStorage.getItem("city");

        debugger;

        $("#city").html(city);

    });

</script>

</head>

<body>

<div id="area"></div>

欢迎来到【<span id="city"></span>】！ <a href="${ctxpath }/echartsMap.jsp">返回</a>

</body>

</html>

controller类：

PageController.java：（页面跳转）

package com.test.www.web.controller;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

@RequestMapping("/page")

public class PageController {

    @RequestMapping("/toArea")

    public String toArea(

            ModelMap map

            ){

        return "area";

    }

}

echarts中国地图的更多相关文章

  1. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  2. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  3. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

  4. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  5. 使用echarts简单制作中国地图，echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  6. echarts 中国地图标注所在点

    达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...

  7. 百度Echarts中国地图经纬度

    百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...

  8. echarts中国地图3D各个城市标点demo

    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta ...

  9. php数据映射到echarts中国地图

    echarts和php结合 根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...

随机推荐

  1. POJ 3628 01背包 OR 状压

    思路: 1.01背包 先找到所有奶牛身高和与B的差. 然后做一次01背包即可 01背包的容积和价格就是奶牛们身高. 最后差值一减输出结果就大功告成啦! 2. 搜索 这思路很明了吧... 搜索的确可以过 ...

  2. Spring《六》管理Bean

    BeanWrapper BeanFactory ApplicationContext 1.通常情况下使用BeanFactory.ApplicationContext 2.ApplicationCont ...

  3. 20个非常有用的Java程序片段--转

    原文地址:http://geek.csdn.net/news/detail/236591 下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = ...

  4. 有关windows dpi适配(c#)

    /// <summary>当前Dpi</summary> public static Int32 Dpi { get; set; } /// <summary>修正 ...

  5. js input 只能输入数字

    HTML网页上这么写 <input type="text" style="ime-mode:disabled;" onpaste="return ...

  6. 将数据内容动态添加到HTML中

    // 申明一个数组用来装遍历的元素 var li = []; //遍历元素并加载到标签中 for(var i = 0; i<navGroup.self_first_nav.length; i++ ...

  7. 使用LayUI在页面实现加载层（图标）代码：

    实现代码: var index = layer.load({ shade: [0.4,'#def'], icon :' 实现效果: 可以使用 layer.close(index); 来控制其在什么时 ...

  8. zabbix监控自身为监控机（server）

    Zabbix 监控主机 添加自身为被监控机 这里我的环境已经部署完毕(没有经验的小伙伴可以看我上一篇文章) 等待一会刷新如下页面 字体出现以下亮度就成功了

  9. NodeJS加密算法(转)

    nodejs中常用加密算法   1.Hash算法加密: 创建一个nodejs文件hash.js,输入内容如下: 1 var crypto = require('crypto'); //加载crypto ...

  10. [AtCoder Grand Contest 024 Problem E]Sequence Growing Hard

    题目大意:考虑 N +1 个数组 {A0,A1,…,AN}.其中 Ai 的长度是 i,Ai 内的所有数字都在 1 到 K 之间. Ai−1 是 Ai 的子序列,即 Ai 删一个数字可以得到 Ai−1. ...