欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

程序员文章站 2022-03-24 13:27:10
项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化。 先附代码: 如下图,默认圆点颜色为红色: 其中item打印出如下图: 发现marker(小圆点)即为html片段,要改变小圆点颜色只需自定义html即可。 附代码: 效果图: 同理,要改变小圆点形状,重写html片段即 ......

项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化。

先附代码:

formatter: function(params) {
  var result = ''
  params.foreach(function (item) {
    console.log(item)
    result += item.axisvalue + "</br>" + item.marker + item.data
  })
  return result
}

如下图,默认圆点颜色为红色:

echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

 

其中item打印出如下图:

echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

发现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
}

效果图:

echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

 同理,要改变小圆点形状,重写html片段即可。