如何添加使用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 ...
随机推荐
- SpringBoot使用WebJars
本人主要做的是java,但是从第一份工作开始,就一直在做一个写前端又写后端的程序员,相信很多朋友和我一样,不仅要会后台代码,还要懂得很多的前端代码,例如javascipt和css样式. 本文就为大家简 ...
- XamarinAndroid组件教程设置自定义子元素动画(一)
XamarinAndroid组件教程设置自定义子元素动画(一) 如果在RecyclerViewAnimators.Animators中没有所需要的动画效果,就可以自定义一个.此时,需要让自定义的动画继 ...
- 最近在搞gitlab发现2个不错的开发流程分享一下
一个不错的gitlab开发流程 http://blog.51cto.com/sgk2011/1925922 不错的git开发流程 https://www.cnblogs.com/coderzl/p/7 ...
- Codeforces.1051G.Distinctification(线段树合并 并查集)
题目链接 \(Description\) 给定\(n\)个数对\(A_i,B_i\).你可以进行任意次以下两种操作: 选择一个位置\(i\),令\(A_i=A_i+1\),花费\(B_i\).必须存在 ...
- SPOJ.TLE - Time Limit Exceeded(DP 高维前缀和)
题目链接 \(Description\) 给定长为\(n\)的数组\(c_i\)和\(m\),求长为\(n\)的序列\(a_i\)个数,满足:\(c_i\not\mid a_i,\quad a_i\& ...
- 1490 ACM 数学
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1490 题意: 给出n*n 的矩阵,选出不同行不同列的n个元素,并求和: 如果所有选法所产生的和相等,则输出 ...
- git解决Could not execute editor
我是安装k-vim后出现了这个问题,可能是vim的某些插件引起的 配置git的编辑器可解决: git config --global core.editor "/usr/bin/vim&qu ...
- Html块标签、含样式的标签、语义化的标签:
Html块标签: (1)<div>标签 块元素,表示一块内容,没有具体的语义 (2)<span>标签 行内元素,表示一行中的一小段内容,没有具体的语义 <p>标签 ...
- python添加、修改、删除、访问类对象属性的2种方法
1.直接添加.修改.删除.访问类对象属性 class Employee (object): empCount = 0 def __init__(self, name, salary) : self.n ...
- Codeforces Round #443 (Div. 1) B. Teams Formation
B. Teams Formation link http://codeforces.com/contest/878/problem/B describe This time the Berland T ...