echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)
项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化。
先附代码:
formatter: function(params) {
var result = ''
params.forEach(function (item) {
console.log(item)
result += item.axisValue + "</br>" + item.marker + item.data
})
return result
}
如下图,默认圆点颜色为红色:
其中item打印出如下图:
发现marker(小圆点)即为html片段,要改变小圆点颜色只需自定义html即可。
附代码:
formatter: function(params) {
var result = ''
var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>'
params.forEach(function (item) {
result += item.axisValue + "</br>" + dotHtml + item.data
})
return result
}
效果图:
同理,要改变小圆点形状,重写html片段即可。
echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)的更多相关文章
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
- Echarts数据可视化tooltip提示框,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts中tooltip提示框位置控制
关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...
- 使用css实现全兼容tooltip提示框
在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
- CSS3实现Tooltip提示框飞入飞出动画
原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...
- MFC中添加ToolTip提示框
PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型 ...
随机推荐
- Android 6.0 执行时权限处理全然解析
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/50709663: 本文出自:[张鸿洋的博客] 一.概述 随着Android 6. ...
- Linux下无需输入password自己主动登陆sshserver方法
用OpenSSH在linux下登陆sshserver时.每次都提示要输入password,并且使用vim 的netrw插件编辑远程文件时每次改动后保存都要输password,很麻烦. 查看了netrw ...
- Entity Framework之Model First开发方式
一.Model First开发方式 在项目一开始,就没用数据库时,可以借助EF设计模型,然后根据模型同步完成数据库中表的创建,这就是Model First开发方式.总结一点就是,现有模型再有表. 二. ...
- .net 项目分层及规范
1.解决方案命名:公司简称+产品名称.如ABCSOft.BBS 2.解决方案文件夹:以数字排序例如:01.Web表示页面层:02.IBusinessLogic表示业务逻辑接口:03.Bussin ...
- msiexec
msiexec: runCmd = new String[]{ "msiexec", "/i", exeName, "/quiet", &q ...
- 保留原先小程序名称 更改微信小程序主体
首先给小程序开发者普及一些官方消息: 1.目前官方是不允许修改已经认证的小程序主体信息!(公众号可以修改) 2.小程序与公众号的名称是全平台唯一,即如果小程序叫‘ABC’其他小程序和公众号就不能存在‘ ...
- P2186 小Z的栈函数
P2186 小Z的栈函数 题目描述 小Z最近发现了一个神奇的机器,这个机器的所有操作都是通过维护一个栈来完成的,它支持如下11个操作: NUM X:栈顶放入X. POP:抛弃栈顶元素. INV:将栈顶 ...
- [Python] isinstance() for checking object type
isinstance("foo", str) isinstance(1, int) isinstance(4.0, float)
- HBase概念学习(八)开发一个类twitter系统之表设计
这边文章先将可能的需求分析一下,设计出HBase表,下一步再開始编写client代码. TwiBase系统 1.背景 为了加深HBase基本概念的学习,參考HBase实战这本书实际动手做了这个样例. ...
- Image与byte[]数组的相互转换
近期项目有个需求是关于图片操作的,须要将图片保存到数据库中.经过尝试才知道Image类型文件是不能直接存储到数据库中的.保存之前须要我们做一步转换:将Image转换成字节数组类型Byte ...