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后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...
随机推荐
- POJ 3660 Floyd传递闭包
题意:牛有强弱,给出一些牛的强弱的胜负关系,问可以确定几头牛的排名. 思路: Floyd传递闭包 // by SiriusRen #include <bitset> #include &l ...
- Android PullToRrefresh 自定义下拉刷新动画 （listview、scrollview等）
PullToRefreshScrollView 自定义下拉刷新动画,只需改一处. 以下部分转载自http://blog.csdn.net/superjunjin/article/details/450 ...
- Unity 移动键Q的三种用法 For Mac，Windows类同
拖动整个场景:三指 (任何模式下)ALT+三指:旋转当前镜头 (任何模式下)双指前后滑动:缩放镜头 ps1:Q键移动的游戏场景,W移动的是游戏对象 ps2:三指 = 左键拖动
- Unity 脚本挂载位置
原则:谁的脚本,挂载到谁身上 1,一般场景中会有个GameController脚本,挂在空物体上. 2,我见很多人脚本习惯挂到Camera上,好吧,不知算不算规范.
- hdu 1240（三维广搜）
题意: 有一个n*n*n的三维空间. 给你起始坐标和终点坐标.要你从起点到终点,问最少需要多少步走出去.如果走不出去则输出"NO ROUTE". 空间中 'O' 表示这个点可以走, ...
- P1494 [国家集训队]小Z的袜子(luogu)
P1494 小Z的袜子 终于了解了莫队算法(更专业的名称Square Root Decomposition of Queries) 莫队算法: 一般来说解决静态(实际上也有修改的但复杂度更高)的离线( ...
- Day 02 - 01 计算机的操作系统
操作系统 场景:有以下三个人 1.庄园主 -->相当于人类 2.管家 --> 把人类要传达的信息分配给奴隶,相当于操作系统 3.奴隶 -->为人类干活的机器 1.操作系统做了什么? ...
- （1）安装----anaconda3下配置pyspark【单机】
1.确保已经安装jdk和anaconda3.[我安装的jdk为1.8,anaconda的python为3.6] 2.安装spark,到官网 http://spark.apache.org/downlo ...
- [luogu2592 ZJOI2008] 生日聚会 (计数dp)
题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...
- debian 9 配置ati驱动
可以参考debian wiki 1.识别自己显卡驱动 lspci -nn | grep VGA 2.添加源 # Debian "stretch" deb http://httpre ...