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

---

• 2021-02-15
  今天看到有人评论说我抄袭官网…一时不知道该说什么，因为我不太会说话，本来不想回复的，但是忍一时越想越气，退一步越想越亏…唉我也不知道怎么说了
  这个文章只是我个人记录一下自己踩坑的经历，如果以后还遇到类似的问题能有个地方找一下当时是怎样实现的而已。没有抄袭官网的意思（我没想到这个也需要解释）。
  至于为什么官网有的我还要重新写一遍，一个是因为那上面写的直接复制过来不好用，我当时踩了坑，我试验了一圈，找到了正确的书写格式，我需要记录一下怕我自己忘了。另外一个是这是我自己的博客我想写啥就写啥，自己写日记说这个电影真好看是不是也抄袭电影了啊，我又没有拿着这个赚钱或者怎么样的，管得着管不着啊你（狗头保我的狗命）