echarts 格式化legend并设置样式

要实现的效果

官方文档： 要实现两个需求： - legend每一项默认只会显示类目名称，要添加相对应的值进去 - 设置 类目名称 对应值 各自的样式

legend相关配置如下：

legend: {
          
   
					//纵向排列
                    orient: vertical,
                    //与外部容器之间的距离
                    left: 5%,
                    top:30%,
                    //每一项之间的间隔
                    itemGap: 25,
                    //格式化每一项内容
                    formatter(name) {
          
   
                    	//只接收一个参数，就是类目名称
                        let value
                        //使用name去放内容的数组中拿到对应的值
                        self.finalData.forEach(item => {
          
   
                            if(item.name == name){
          
   
                                value = item.value
                            }
                        })
                        //name, value可以理解为样式标记符，用于在富文本中设置对应的样式
                        return [
                            `{name|${
            
     name}}`,
                            `{value|${
            
     value}}`
                        ].join(
)
                        // 
表示换行
                    },
                    //使用富文本去定义样式
                    textStyle:{
          
   
                        rich:{
          
   
                            name:{
          
   
                                fontSize:14,
                                color:"#3e4555",
                                lineHeight:20
                            },
                            value:{
          
   
                                fontSize:20,
                                color:"#3e4555",
                                lineHeight:24
                            }
                        }
                    }
                },