echarts中国地图描绘
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>首页</title>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/area_static_con.js"></script>
<link href="css/mui.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
<link rel="stylesheet" type="text/css" href="css/loading.css"/>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
$(".loading").addClass("loader-chanage")
$(".loading").fadeOut(300)
mui.init();
})
</script>
<style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<!--loading页开始-->
<div class="loading">
<div class="loader">
<div class="loader-inner pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!--loading页结束-->
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var option = {
tooltip: {
// show: false //不显示提示标签
formatter: '{b}', //提示标签格式
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"} //提示标签字体颜色
},
series: [{
type: 'map',
mapType: 'china',
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#c71585"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ffdead",
}
},
data:[
//{name:'福建', selected:true}//福建为选中状态
]
}],
};
myChart.setOption(option);
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
<body>
</body>
</html>
echarts中国地图描绘的更多相关文章
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
- 一个让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 ...
随机推荐
- Linux下升级php版本
查看php版本的信息 vim ./lib/phps.sh 设置权限 chmod 755 ./lib/phps.sh 下载版本 ./lib/phps.sh 7.1.4 查看版本 php -v ...
- P4310 绝世好题 按位DP
这名字可海星\(OvO\) 思路:\(DP\) 提交:2次(\(zz\)我竟然把三目运算符写错了\(QwQ\)) 题解: 按位进行\(DP\):\(f[i]\)表示结尾的数字包括\(1<< ...
- mouseleave([[data],fn])
mouseleave([[data],fn]) 概述 当鼠标指针离开元素时,会发生 mouseleave 事件.该事件大多数时候会与mouseenter 事件一起使用. 与 mouseout 事件不同 ...
- CF #589 (Div. 2) D. Complete Tripartite 构造
这个 D 还是十分友好的~ 你发现这 $3$ 个集合形成了一个环的关系,所以随意调换顺序是无所谓的. 然后随便让 $1$ 个点成为第 $2$ 集合,那么不与这个点连边的一定也属于第二集合. 然后再随便 ...
- ipv4保留地址
曾经以为保留地址下面三类.原来使用中还有很多的. A类 10.0.0.0--10.255.255.255 B类 172.16.0.0--172.31.255.255 C类 192.168.0.0--1 ...
- Linux之基础命令
常用命令 查看ip地址的两种方式 ifconfig ip addr show Linux的两种ip地址: 127.0.0.1 本机回环地址 0.0.0.0 全网地址/绑定所有网卡/所有地址 Linux ...
- [python]打印异常信息的不同方式
异常捕获 try: execpt Exception as e: print(str(e)) 打印异常信息的方式 1.str(e) 返回字符串类型,只给出异常信息,不包括异常信息的类型,如1/0的异常 ...
- 一、docker安装CentOS7
一.安装步骤 前提条件 Docker运行在CentOS7上,要求系统64位.系统内核版本为3.10以上. Docker是一个进程,一启动就两个进程,一个服务,一个守护进程.占用资源就非常少,启动速度非 ...
- TCP首部的TimeStamp时间戳选项 转载
TCP应该是以太网协议族中被应用最为广泛的协议之中的一个,这里就聊一聊TCP协议中的TimeStamp选项.这个选项是由RFC 1323引入的,该C建议提交于1992年.到今天已经足足有20个年头.只 ...
- JDK8 新特性 Lambda表达式
1.java8中Lambda表达式基础语法: (x,y) -> {} 左侧是一个小括号,里面是要实现的抽象方法的参数,有几个参数就写几个参数名,无参可写空括号,无需声明参数类型: 中间是一个jd ...