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. vue-quill-editor 禁止编辑

    每天学习一点点,知识财富涨点点 因为权限问题需要对富文本vue-quill-editor进行禁止编辑,因为也不是专业前端,处理起问题来还是只有看文档和百度,发现对这个提问不是很多,可能很多大牛都不会出 ...

  2. Python—使用xm.dom解析xml文件

    什么是DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 一个 DOM 的解析器在解析一个 XML 文档时,一次性读 ...

  3. Spark的数据存储（十九）

    Spark本身是基于内存计算的架构,数据的存储也主要分为内存和磁盘两个路径.Spark本身则根据存储位置.是否可序列化和副本数目这几个要素将数据存储分为多种存储级别.此外还可选择使用Tachyon来管 ...

  4. hdu 3572 Task Schedule【 最大流 】

    求出最大流,再判断是否满流 先不理解为什么要这样建图 后来看了这一篇题解 http://blog.csdn.net/u012350533/article/details/12361003 把0看做源点 ...

  5. Unity设置Turorials-Wide布局

    在bilibili上看关于UGUI官翻视频时,很喜欢对方的布局,自己照着改了下,改的步骤如下: 1, 先选用 2by3 布局 2, 把Project面板拖到Hierarchy下边 3, 把2列布局改成 ...

  6. VS运行程序发生栈溢出的分析

    这两天时间都浪费在解决各种栈溢出了,没想到最后各个部件合在一起的时候会出现这么多的问题,这其实是我第一次解决栈溢出问题,很认真的查了查资料,找了几种解决方法,但是作用都不大,拆了东墙补西墙,虽然知道及 ...

  7. CF949B A Leapfrog in the Array 思维题，推理

    题意: Dima是一名初级程序员. 在他的工作中,他经常不断地重复以下操作:从数组中删除每个第二个元素. 有一天,他对这个问题的解决方案感到厌倦,他提出了以下华丽的算法. 假设有一长度为2n的数组,最 ...

  8. Pyhton学习——Day54

    #Django内容回顾# -请求响应HTTP协议(有.无状态)默认传递的是字符串# 传递字符串分为两个部分:1.http1.1 GET /url /index + 请求头# Provisional h ...

  9. vector的resize与reserve的区别

  10. 《Exception》第八次团队作业：Alpha冲刺（第四天）

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...