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

虽然文章是复制过来的,但是文章写得不错,实际的解决了问题

先附代码:

复制代码

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片段即可。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要想让tooltip提示框前面的图形与legend图形一致,可以使用echarts的formatter属性来自定义tooltip的显示内容。 具体步骤如下: 1.在series中设置好legend的相关配置,包括图例名称、图例图形类型和图例颜色等。 2.在tooltip的formatter属性中使用回调函数,通过参数params获取到对应数据的seriesIndex和dataIndex,然后根据这些信息从series中获取到对应的图例信息,最后将图例信息和数据信息合并成字符串返回。 下面是一段示例代码: ```js option = { legend: { data: ['数据一', '数据二'], // 设置图例图形类型和颜色 icon: 'circle', textStyle: { color: '#333' } }, tooltip: { trigger: 'axis', formatter: function (params) { var seriesIndex = params[0].seriesIndex; var dataIndex = params[0].dataIndex; // 获取对应的图例信息 var legendName = option.legend.data[seriesIndex]; var legendIcon = option.legend.icon; var legendColor = option.color[seriesIndex]; // 获取数据信息 var dataValue = params[0].value; var dataName = params[0].name; // 合并图例信息和数据信息 return legendIcon + ' ' + legendName + ': ' + dataValue + '<br/>' + dataName; } }, color: ['#FFB6C1', '#87CEFA'], xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: {}, series: [{ name: '数据一', type: 'line', data: [100, 200, 150, 300, 250, 180] }, { name: '数据二', type: 'line', data: [80, 150, 200, 120, 300, 220] }] }; ``` 在上面的代码中,我们通过legend和color配置了图例的相关信息,然后在tooltip的formatter回调函数中获取到对应的图例信息和数据信息,并将它们合并成字符串返回,最终得到的tooltip提示框前面的图形就与legend图形一致了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值