1、ECharts(中国地图篇)的使用
一、
网址: http://echarts.baidu.com/download.html
点击: 完整
下载文件: echarts.min.js
网址: http://echarts.baidu.com/download-map.html
点击: 中国地图 - JS
下载文件: china.js
二、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body> <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>
</html>
三、效果图
四、修改省份标签位置:
打开china.js文件,修改"properties":{"cp":[X坐标,Y坐标],...}
1、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(中国地图篇)的使用
代码html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <me ...
随机推荐
- Nginx 之负载均衡与反向代理
负载均衡服务器策略: 1.轮循 每个请求逐个分发到后端服务器 2.加权轮循 按照分配的权重将请求分发到后端服务器 3.ip hash 轮询的基础上,保持一个客户端多次请求分发到一台后端服务器上 一 ...
- PKUSC2019划水记
Day -3~Day -2 划了两天的水,考了两次IOI赛制,垫了两次底.... 怕不是要凉啊(安慰自己才C3还有时间) Day -1 坐火车了,差点把身份证弄丢. 睡了一觉,肝了你的名字(结局草率差 ...
- CISCO实验记录十:switch基本配置
1.交换机IP配置 2.配置telnet 1.交换机IP配置 #interface vlan 1 #ip address 192.168.0.3 255.255.255.0 #no shutdown ...
- 重读APUE(1)-lseek注意事项
lseek使用的注意事项: 1. lseek的返回值,成功返回新的文件偏移量,失败返回-1,不能用<0判断:因为文件偏移量可能是正的,也可能是负的,所以不能使用<0判断成功与否:注意:对于 ...
- 运维自动化之ansible
Ansible简介 Ansible是一个简单的自动化运维管理工具,基于Python语言实现,由Paramiko和PyYAML两个关键模块构建,可用于自动化部署应用.配置.编排task(持续交付.无宕机 ...
- 在testrpc以太坊测试环境部署智能合约
2018年03月13日 09:20:54 思无邪-machengyu 阅读数 2683 版权声明:本文为博主原创文章,转载请务必注明出处,否则追究法律责任 https://blog.csdn.ne ...
- idhttp访问HTTPS
idhttp访问HTTPS 访问一个 WEB 网站,如果采用 HTTP 的话,直接使用 TIdHTTP 这个控件,最简单的用法是: S := IdHTTP1.Get('www.qq.com'); 这里 ...
- python 库 imgaug数据增强
安装及详细使用方法介绍: https://blog.csdn.net/qq_38451119/article/details/82428612 pip install imgaug 失败解决方法: 提 ...
- PHP学习之文件上传类
<?php $up = new Upload(); $newPath = $up->uploadFile('fm'); if ($newPath === false) { var_dump ...
- concurrency parallel 并发 并行 parallelism
在传统的多道程序环境下,要使作业运行,必须为它创建一个或几个进程,并为之分配必要的资源.当进程运行结束时,立即撤销该进程,以便能及时回收该进程所占用的各类资源.进程控制的主要功能是为作业创建进程,撤销 ...