echarts 在legend中使用rich富文本的方法

标签: echarts

  • 2019-05-30
    用echarts有一段时间了,但是有的具体样式调整的时候配置项手册还是说的不是很清楚,又踩了一个坑之后回来记录

先放一张最终效果:
在这里插入图片描述
然后根据我们的需求,首先知道这个是在legend里面调整的,找到有关富文本的说明,官方手册这么写的:
在这里插入图片描述
好的,感觉很清楚的样子,那我来尝试一下好了,头部提示和demo的提示不太一样,所以我分别尝试了一下:
在这里插入图片描述
尝试的结果就是不管是加不加label都不行,…场面一度非常尴尬
最终的写法是这样的:

        legend: {
            orient: 'vertical',
            left: 'center',
            top: 'bottom',
            //formatter放在textStyle外面
            formatter: [
                '{a|这段文本采用样式a}',
                '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
            ].join('\n'),
            textStyle: {
            	//rich放在textStyle里面
                rich: {
                    a: {
                        color: 'red',
                        lineHeight: 10
                    },
                    b: {
                        backgroundColor: {
                            image: 'xxx/xxx.jpg'
                        },
                        height: 40
                    },
                    x: {
                        fontSize: 18,
                        fontFamily: 'Microsoft YaHei',
                        borderColor: '#449933',
                        borderRadius: 4
                    },
                }
            }
        },
原文链接:加载失败,请重新获取