echarts中国地图

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中国地图的更多相关文章

echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
echarts 中国地图数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲跟着走 // @第一步都是初始化 v ...
使用echarts简单制作中国地图，echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
echarts 中国地图标注所在点
达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
百度Echarts中国地图经纬度
百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...
echarts中国地图3D各个城市标点demo
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta ...
php数据映射到echarts中国地图
echarts和php结合根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...

随机推荐

Oracle 查看锁定表用户的SQL
#描述:当执行如下SQL select * From XXX for Updata 发现表“XXX”被锁定 #只需要执行如下SQL 查看锁定该表的用户 SELECT object_name, mach ...
CentOS 6.7操作系统安装
如果由于是显卡驱动不兼容的话,在选择安装界面按tab键,进入命令行,然后在命令行后加上 nodmraid 关键字回车开始安装. 接下来选择hard driver 选择最后一个分区进行系统安装,然后 ...
vue2.0中关于active-class
一.首先,active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换: 相关可查阅文档:https://router ...
Unity脚本中可以引用的类型
Hierarchy(层级视图)面板里的对象,或者 Project(工程视图)里的Prefab.
3DSMAX制作逼真的欧式沙发建模教程
这篇教程是朋友们介绍利用3DSMAX制作逼真的欧式沙发建模,教程制作出来的效果真心很不错,通过这篇教程,大家可以学习沙发建模的制作方法和思路,推荐过来,一起来学习吧! 3DSMAX软件下载:http: ...
python 递归算阶乘（转载）
Python 递归函数递归函数在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数.举个例子,我们来计算阶乘 n! = 1 * 2 * 3 * ... * n,用函数 ...
MySQL的读写分离的几种选择
MySQL的读写分离的几种选择 MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践原址如下: http://heylinux.com/archives/1004. ...
Maven下Flex国际化配置
之前写了flashbulid.initellij下的flex国际化配置,它们都是在本地打包发布的,那么我们的工程用maven管理了,需要自动发布.这时候如何修改flex的pom文件,来让它build的 ...
8:30+1.5小时,返回时间格式的 php函数
一个实用的自定义函数 /** * 传入8:30格式的开始时间,和小数形式的小时长度,返回结束时间 * @param [type] $start [description] 8:30 * @param ...
jvm 虚拟机参数_新生代内存分配
1.参数 -Xmn 设置新生代的大小,设置一个比较大的新生代会减少老年代的大小,这个参数对系统性能以及 GC 行为影响很大,新生代大小一般设置为真个堆内存的1/3到1/4 -XX:SurvivorRa ...

echarts中国地图

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

随机推荐

热门专题