项目是拿 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提示框 自定义小圆点(颜色、形状和大小等等)的更多相关文章

  1. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. 纯CSS实现tooltip提示框,CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  3. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

  4. Echarts数据可视化tooltip提示框,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. echarts中tooltip提示框位置控制

    关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...

  6. 使用css实现全兼容tooltip提示框

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...

  7. 原生js实现tooltip提示框的效果

    在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...

  8. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  9. MFC中添加ToolTip提示框

    PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型 ...

随机推荐

  1. Linux下无需输入password自己主动登陆sshserver方法

    用OpenSSH在linux下登陆sshserver时.每次都提示要输入password,并且使用vim 的netrw插件编辑远程文件时每次改动后保存都要输password,很麻烦. 查看了netrw ...

  2. java教程(五)SSH框架-配置

    前言:从这篇博客開始我将继续讲述Java教程:SSH篇.主要内容环绕SSH框架分析与搭建,今天先简介一下SSH的配置. SSH配置顺序是: spring-->hibernate-->str ...

  3. jython awt demo

    jython awt demo : """\ Create a panel showing all of the colors defined in the pawt.c ...

  4. stylus中文版参考文档之综述

    http://www.zhangxinxu.com/jq/stylus/

  5. 系统管理员的 SELinux 指南:这个大问题的 42 个答案

    安全.坚固.遵从性.策略是末世中系统管理员的四骑士.除了我们的日常任务之外 —— 监控.备份.实施.调优.更新等等 —— 我们还需要负责我们的系统安全.即使这些系统是第三方提供商告诉我们该禁用增强安全 ...

  6. SQLServer2008端口及防火墙设置

    一,Microsoft SQL Server 2008R2数据库设置 1.       开始=>程序=>Microsoft SQL Server 2008R2=>配置工具=>S ...

  7. JAVA学习(一)——基本语法

    tips:前端开发写惯了弱类型语言,再来学强类型语言,真的是被各种修饰符.类型声明给整的云里雾里,而且java语法和javascript语言差别还是很大的,所以做好笔记,把一些需要注意的地方记下来是非 ...

  8. Swift学习笔记(13)--属性 (Properties)

    普通属性用var和let即可,本文不做详述 1.延迟存储属性 延迟存储属性是指当第一次被调用的时候才会计算其初始值的属性.在属性声明前使用@lazy来标示一个延迟存储属性. class DataImp ...

  9. 洛谷 P1719 最大加权矩形

    P1719 最大加权矩形 题目描述 为了更好的备战NOIP2013,电脑组的几个女孩子LYQ,ZSC,ZHQ认为,我们不光需要机房,我们还需要运动,于是就决定找校长申请一块电脑组的课余运动场地,听说她 ...

  10. 13.2 UPDATE

    13.2 UPDATE正在更新内容.请稍后