echarts的rich富文本不生效及其解决办法

我不是女神ヾ 2023-02-14 06:58 9阅读 0赞

# echarts的rich富文本不生效及其解决办法 #

在系统中使用echarts富文本标签不生效，故查找解决办法，并在此记录。

## 解决办法： ##

> [点击下载高版本echarts][echarts] **https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts.min.js**

## 问题原因： ##

引用于echarts官网

> 原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。
> 
> **echarts v3.7 以后，支持了富文本标签**  
> **echarts v3.7 以后，支持了富文本标签**  
> **echarts v3.7 以后，支持了富文本标签**

![富文本][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]

## rich的使用方法： ##

就是使用管道符为指定内容添加样式。

formatter: function(params) { 
        if (parseInt(params.slice(0, 1)) < 3) { 
            return [
                '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1)
            ].join('\n')
        } else { 
            return [
                '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1)
            ].join('\n')
        }
    },
    rich: { 
        a: { 
            color: '#fff',
            backgroundColor: '#FAAA39',
            width: 20,
            height: 20,
            align: 'center',
            borderRadius: 2
        },
        b: { 
            color: '#fff',
            backgroundColor: '#4197FD',
            width: 20,
            height: 20,
            align: 'center',
            borderRadius: 2
        }
    }

### 这是官网使用案例 ###

点击直达[echarts官网富文本标签][echarts 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]

[echarts]: https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts.min.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601164344652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng==,size_16,color_FFFFFF,t_70
[echarts 1]: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200623174536983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng==,size_16,color_FFFFFF,t_70