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

随机推荐

java.security.AccessControlException: access denied ("java.lang.RuntimePermission" "getClassLoader")
转自:https://blog.csdn.net/bluecard2008/article/details/80921682?utm_source=blogxgwz0 摘要: 今天在使用jetty做容 ...
BZOJ 4184 线段树+高斯消元
思路: 线段树表示的是时间每回最多log个段区间覆盖一直到叶子的线性基 xor 一下就是答案一开始没有思路看了这篇题解豁然开朗 http://www.cnblogs.com/joyou ...
.NET MVC权限设计思考之切入点
在WebForm下我们一般会设计个PageBase继承Page,在OnInit方法中实现对基本权限的验证业务,然后所有的页面在继承PageBase直接继承这项基本权验证业务.而在.NET MVC下我们 ...
一个APP开发有那么难吗？
app开发 idea:产品设计喵有一个想法. 人员配置: 攻城狮:前端后端服务器齐撸产品设计:设计原型/UI效果图(界面/交互)齐撸］流程分析: 1.产品设计喵反复打磨自己的想法,明确要做什么样的 ...
路飞学城Python-Day32【小结】
import socket from multiprocessing import Process def talk(conn): while True: try: data = conn.recv( ...
JS 日历
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
man帮助命令
linux系统提供可比较丰富的帮助手册,man是manual(说明书)的缩写,在日常的linux系统管理中经常会用到. 语法: man(选项)(参数) 选项: -a:在所有的man帮助手册中搜索: - ...
推荐几款常用的Eclipse插件
Eclipse 应该说是老牌也是最常用的Java开发工具,尽管这几年 InstelliJ IDEA 的发展势头很强劲,身边使用和推崇的人也大有人在,但个人而言还是觉有些不太习惯.这里也介绍几款自己常用 ...
HDU 4828
其实..这题是<组合数学>的习题中的一道......当初不会..... 想到一个证明: 填入2n个数,把填在上方的数的位置填上+1,下方的填上-1.这样,在序列1....2n的位置,任意前 ...
Spring+mybatis+struts框架整合的配置具体解释
学了非常久的spring+mybatis+struts.一直都是单个的用他们,或者是两两组合用过,今天总算整合到一起了,配置起来有点麻烦.可是配置完一次之后.就轻松多了,那么框架整合配置具体解释例如以 ...

echarts中国地图

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

随机推荐

热门专题