myCharts.setOption({
tooltip: {
triggerOn: 'click',
enterable: true,
formatter: function(params, ticket, callback) {
console.log(params.length)
let content = {
area: 1,
areaName: params.name
}
let result = that.$axios({
method: 'get',
url: that.getMapCompany,
params: content
}).then(res => {
console.log(params, content, 'log')
})
var tipHtml = '';
tipHtml = '<div style="width:200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
+'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
+'<span style="margin-left:10px;color:#fff;font-size:16px;">'+ params.name +'</span>'+'</div>'
+'<div>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
+'公司数量:'+'<span style="color:#f48225;margin:0 6px;">'+3+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
+'被考核主体数量'+'<span style="color:#f4e925;margin:0 6px;">'+4+'</span>'+'个'+'</p>'
+'</div>'+'</div>';
return tipHtml; return result; }
},
series: [
{
type: 'map',
map: 'china',
zoom: 1,
label: {
show: true,
color: 'white',
fontSize: 10
},
itemStyle: {
normal: {
borderWidth: 2,//边际线大小
borderColor:'#00ffff',//边界线颜色
areaColor:'#09295b'//默认区域颜色
},
emphasis: {
show: true,
areaColor: '#3066ba',//鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: '#fff'
}
}
} },
}
],
})

  

echarts地图tooltip添加标注的更多相关文章

  1. 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  2. ArcGIS 在地图上添加标注

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  4. 【百度地图API】情人节求爱大作战——添加标注功能

    原文:[百度地图API]情人节求爱大作战--添加标注功能 任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA ...

  5. Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

  6. iOS第三方地图-百度地图常用功能使用(POI搜索,地理正反编码,定位,添加标注)

    百度地图官网: http://developer.baidu.com/map/index.php?title=iossdk 百度地图集成 1.引入相关包

  7. Echarts 地图添加自定义区域

    使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...

  8. 【Openlayers3】在地图上添加highcharts图表

    今天试用了一下ol3,效果很是不错! ol3中有个ol.Overlay,使用这个类我们可以在地图中添加各种html要素. 下面我们在地图中添加一个饼图 html中添加一个div容器: <div ...

  9. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  10. 【百度地图API】如何快速创建带有标注的地图?——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

随机推荐

  1. LEECODE Rust学习: 一维数组的动态和

    给你一个数组 nums .数组「动态和」的计算公式为:runningSum[i] = sum(nums[0]-nums[i]) . 请返回 nums 的动态和. 示例 1: 输入:nums = [1, ...

  2. .Net 9.0环境下WebApi发布到IIS

    一.在Visual Studio里发布 右键点击WebApi工程,点击发布按钮,如下图所示. 点击[发布]按钮后,系统弹出发布对话框,如下图所示. 选择文件夹,点击[下一步]. 在该界面选择发布输出的 ...

  3. windows10搭建gitlab服务器

    gitlab服务器没有win运行环境,所以需要先搭建个虚拟机:windows10+VMware(Centos7) +gitlab+局域网其他电脑访问 一:VMware 安装,网上找找有安装教程 二:虚 ...

  4. 【安装系统】win8装win7遇到的一些坑

    估计不少人就觉得重装系统很容易,本身win7再装win7那基本都是无脑一键操作. 下面说的是一次win8装win7的坑~ 案例材料: 戴尔灵越14-5439,内存4G,硬盘500G. 原系统:win8 ...

  5. LingYanAutoUpdateServer:面向 WPF / WinForm / MAUI 自动更新组件开源发布,轻松实现一键升级

    LingYanAutoUpdateServer:为 WPF.WinForms.MAUI 等桌面应用打造的轻量级自动更新开源解决方案 你是否正在开发一个 WPF.WinForms 或 .NET MAUI ...

  6. 202x年开发jar小游戏

    原因 怀旧 安装开发工具 安装jdk 去官网下载32位的jdk1.8. 安装Wireless Toolkit J2ME Wireless Toolkit是Sun的无线开发工具包,这一工具包的设计目的是 ...

  7. C++ basic_string::_M_construct null not valid

    这个错误我在构造函数中爆出了错误 累坏我了 一般来说是赋值了不该赋的值 string 类型的初始化 用 int 结果炸了

  8. OFF文件格式解析

    简介 这里的off文件特指 网格里面使用的off文件 参考链接 https://shape.cs.princeton.edu/benchmark/documentation/off_format.ht ...

  9. vtk 格式

    简介 vtk 个人觉得是比较通用的格式,设计的比较好支持各种类型的模型,无论是表面网格还是体网格. 参考链接 讲的很好,特此记录 https://blog.csdn.net/x_and_y/artic ...

  10. Delaunay 三角化 学习3

    简介 还是太菜从解析官方代码开始. 官方代码共有三个核心函数. 参考链接 http://blog.sina.com.cn/s/blog_6029f0330101irlh.html http://pau ...