echart 极坐标 formatter处理

这篇博客探讨了在极坐标图表中如何通过加标签的方式自定义样式。作者遇到的问题是极坐标图表的标签直接显示HTML标签,而不是解析它们。为了解决这个问题,作者尝试使用rich属性来设置特定字段的样式,通过在formatter中组合字符串并利用rich属性的权重和颜色设置实现了标签样式的曲线救国方法。博主寻求更直接的解决方案,并欢迎其他开发者在评论区分享经验。
摘要由CSDN通过智能技术生成

需求:想通过加标签的方式给字段加样式
极坐标好像和其他的图表不太一样,其他的图表处理formatter时可以自定义样式,加标签处理,但极坐标直接把标签给显示出来了,不去解析标签
如返回写成

str = '<span>' + item.name +':</span><span>'+ item.value + '</span>'

页面也会把<span>毫无保留的显示出来,如下图
在这里插入图片描述

找到一种曲线救国的方式就是通过rich属性给某个字段设置样式

axisLabel: {
            interval: 0,
            //刻度标签设置
            textStyle: {
              color: "#333",
            },
            formatter: val=>{
              let str = ''
              xData.forEach(item=>{
                str = '{a|' + item + '} ' + '{b|' + val + '}'
              })
              return str
            },
            rich:{
              a:{
                fontWeight: 700
              },
              b:{
                color: 'red'
              }
            }
          },

在这里插入图片描述

如果哪位博主能通过加标签的方式写样式,还请评论区留言,多谢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值