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

• 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
                    },
                }
            }
        },