如何添加使用echats地图悬浮显示内容
/初始化绘制全国地图配置
var option = {
backgroundColor: '#000',
title: {
text: 'Echarts3 中国地图农村金融',
subtext: '三级科技下乡',
link: 'http://www.cnblogs.com/sxz2008/',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal',
fontFamily: "Microsoft YaHei"
},
subtextStyle: {
color: '#ccc',
fontSize: 13,
fontWeight: 'normal',
fontFamily: "Microsoft YaHei"
}
},
tooltip: { //显示悬浮窗口
trigger: 'item',
//使用这个函数返回悬浮内容
formatter:function(params){
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
// var res='随机数字'+'<br />';
var res=params.name+':'+'随机数字'+'<br />';
var myseries=provinces;//省市区
for(var i=0;i<myseries.length;i++){
if(myseries[i].name==params.name){
res+=myseries[i].name+':'+myseries[i].value+'<br />';
}
}
//市区
for(var j=0;j<city.length;j++){
if(city[j].name==params.name){ res+=city[j].name+':'+city[j].value+'<br />';
} }
//县区
for(var k=0;k<area.length;k++){
if(area[k].name==params.name){
res+=area[k].name+':'+area[k].value+'<br />';
}
}
return res;
}, },
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
},
iconStyle: {
normal: {
color: '#fff'
}
}
},
visualMap: {
type: 'continuous', // 连续型
min: 0, // 值域最小值,必须参数
max: 1200, // 值域最大值,必须参数
calculable: true, // 是否启用值域漫游
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
// 指定数值从低到高时的颜色变化
},
textStyle: {
color: '#fff' // 值域控件的文本颜色
}
}, animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000 };
使用echarts.js 改造git项目能够省市区显示具体内容;主要是json数据和formatter函数返回的值
如何添加使用echats地图悬浮显示内容的更多相关文章
- JS实现鼠标悬浮,显示内容
其实就是增加title属性
- iOS_地图之显示附近微博
1.首先需要新建一个MKMapView地图对象,在storyBoard中拖拽一个,在工程中导入MapKit.framework: 2.遵守MKMapViewDelegate协议,设定显示地 ...
- 百度地图API显示多个标注点并添加百度样式检索窗口
原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...
- [Xcode 实际操作]四、常用控件-(17)为MKMapView地图上显示提示框
目录:[Swift]Xcode实际操作 本文将演示当点击地图上的标注圆点时,弹出信息窗口. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...
- 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- echarts以地图形式显示中国疫情情况实现点击省份下钻
首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...
- 百度地图API显示多个标注点带检索框
通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- javascript学习内容--改变样式、取消设置、显示内容、隐藏内容
<head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...
- html5定位并在百度地图上显示
在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...
随机推荐
- Maven使用lib下的包
Maven使用中央仓库的同时,使用lib下的包 pom.xml添加如下配置 <build> <plugins> <plugin> <artifactId> ...
- VMware5.5-vCenter的安装准备及安装
vSphere 最近公司来了新同事,为了帮助他尽快熟悉VM-vsphere,一块复习了下,并把实验总结为文档. 声明:本例是以王隆杰老师的vsphere5.5教程为基础和线索进行的,由于时间匆忙,可能 ...
- 使用openCV打开USB摄像头(UVC 小米micro接口)
之前在AndroidStudio上就用了别人用写的库成功地打开了USB摄像头. 于是我之后又在PC上尝试了一下,首先去淘宝买了个MICRO母转USB公的转接口,然后在Qt上配置了一下OPENCV后开始 ...
- 如何在debug vue-cli建立的项目
因为vue-cli使用了webpack,导致了一些页面报错了位置不精确的问题. 在网上找到了解决方案,在此分享. https://segmentfault.com/q/1010000008757714 ...
- Wannafly Winter Camp 2019.Day 8 div1 E.Souls-like Game(线段树 矩阵快速幂)
题目链接 \(998244353\)写成\(99824435\)然后调这个线段树模板1.5h= = 以后要注意常量啊啊啊 \(Description\) 每个位置有一个\(3\times3\)的矩阵, ...
- React Native小白入门学习路径——二
万万没想到,RN组仅剩的一个学长也走了,刚进实验室没几天就被告知这样的事情,一下子还真的有点接受不了,现在RN组就成了为一个没有前辈带的组了,以后学习就更得靠自己了吧.唉,看来得再努力一点了. 这一周 ...
- [HAOI2015]树上染色
Description: 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你 ...
- Mac下安装pyenv
mac 用virtualenv安装py3.6的虚拟环境报错(virtualenv -p /usr/bin/python3 env36), 解决的话需要安装zlib包, 然后去掉configure配置里 ...
- Codeforces899C Dividing the numbers(数论)
http://codeforces.com/problemset/problem/899/C tot为奇数时,绝对差为1:tot为偶数时,绝对差为0. 难点在于如何输出. #include<io ...
- RestTemplate之GET和POST调用和异步回调
get方式 String url = "http://hostname:port/v1.0/data/data"; HttpHeaders headers = new HttpHe ...