rich 富文本使用方式

最新推荐文章于 2024-04-10 17:11:19 发布

旧友前度丶

最新推荐文章于 2024-04-10 17:11:19 发布

阅读量158

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wangyangzxc123/article/details/134727358

版权

yAxis轴上增加图片或者其他文字配合动态颜色或者样式显示

 yAxis: {
          type: 'category',
          data: yArr,
          axisLabel: {
            textStyle: {
              fontSize: 14,
              fontWeight: 'bolder',
              color: '#fff'
            }, // rich 使用规则.
            formatter: function (value) {
              let obj = ''
              res.forEach(item => {
                if (item.lineName === value && item.riskLevelName === '低风险') {
                  obj = `{label|★}${value}`
                } else if (item.lineName === value && item.riskLevelName === '中风险') {
                  obj = `{unit|★★}${value}`
                } else if (item.lineName === value && item.riskLevelName === '高风险') {
                  obj = `{falg|★★★}${value}`
                }
              })
              return obj
            }, // rich 只能是rich 不能用其他代替.
            rich: {
              label: { fontSize: '16px', color: '#016ac3' },
              unit: { fontSize: '16px', color: '#e59c2c' },
              falg: { fontSize: '14px', color: '#ef6a6b' },
              value: {
                color: '#fff',
                fontSize: '13px'
              }
            },
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: '#154561',
              width: 1 // 这里是为了突出显示加上的
            }
          },
          axisTick: { show: false }
        },