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. 更改python字符编码以便使用UTF-8的编码url路径

    url编码分两种, 一种是unicode, 另一种是gb2312, 今天遇到的一个网站是要将字符编码按照gb2312来编码,用来得到一个先填写blanks后再返回页面的数据,废话少说,需要做的就是先查 ...

  2. HTML、CSS和JS中注释类型的总结

    添加必要的注释,是一个优秀的程序员必须具备的好习惯,可以大大提高代码的可维护性.可读性. 1.HTML注释 <!--注释的内容--> 注释的地方(根据个人习惯可能有所不同): 结束标签的后 ...

  3. shp系列（一）——利用C++进行shp文件的读（打开）与写（创建）开言

    博客背景和目的 最近在用C++写一个底层的东西,需要读取和创建shp文件.虽然接触shp文件已经几年了,但是对于shp文件内到底包含什么东西一直是一知半解.以前使用shp文件都是利用软件(如ArcGI ...

  4. ubuntu16.04 安装 docker-compose

    下载安装 docker-composecurl -L https://github.com/docker/compose/releases/download/1.15.0/docker-compose ...

  5. gcc编译c中有与lua交互的代码

    编译C程序中有与Lua有关的程序(编译环境是Linux系统,lua解释器是luajit)gcc -o test30 test30.cpp -I/usr/local/include/luajit-2.0 ...

  6. Pyhton学习——Day40

    #一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:# 核心(ECMAScript)# 文档对象模型(DOM) Document object model (整合js,css,ht ...

  7. js类的使用

    brush示例 以d3的一个brush进行叙述,示例见: https://bl.ocks.org/xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 应用情形: 当页 ...

  8. 【HiJ1m】在NOIP2017前写过的有用的东西汇总

    http://www.cnblogs.com/Elfish/p/7544623.html 高级树状数组 http://www.cnblogs.com/Elfish/p/7554420.html BST ...

  9. sql where条件子句

    where中可用的运算符: where 的执行 是从右到左: where的SQL优化:(where条件特别多的情况下,效果明显) 对于and,应该尽量把假的放到右边. 对于or,应该尽量把真的放到右边 ...

  10. windows服务器剪贴板不能共用的解决办法

    远程桌面无法使用剪贴板共享纯文本的解决方法========================================以下操作须在远程桌面上操作,本地机没用的!================== ...