echarts中legend分两行显示

最新推荐文章于 2024-09-11 13:48:35 发布

斗鱼第一包子

最新推荐文章于 2024-09-11 13:48:35 发布

阅读量3.1k

点赞数 2

文章标签： echarts

本文链接：https://blog.csdn.net/qq_34282415/article/details/118692428

版权

这篇博客详细介绍了如何使用Echarts库来配置图表的图例，使其内容分行显示。通过设置`legend`的`formatter`属性和`textStyle`，可以自定义每个图例项的样式，包括颜色、字体大小、对齐方式，并利用`rich`对象调整文字宽度，实现图例的美观展示。示例代码展示了多个图例项的不同位置和格式化效果。

摘要由CSDN通过智能技术生成

分行显示legend图例内容

legend: [
       {
         data:['室外变压器补漆点', '涂装酸洗磷化'],
				 y:"0",
         x:'center',
         formatter: ['{a|{name}}',].join('\n'),
         textStyle: {
                    color: '#c3dbff',  //更改坐标轴文字颜色
                    fontSize : 14,
                    align:'left', 
                    rich:{
                      a:{
                        width:100,
                      }
                    }
                  },
       },{
         data:['总装煤油气相干燥','脱漆点'],
				 y:"20",
         x:'center',
         formatter: ['{a|{name}}',].join('\n'),
         textStyle: {
                    color: '#c3dbff',  //更改坐标轴文字颜色
                    fontSize : 14 ,
                    align:'left',
                    rich:{
                      a:{
                        width:100,
                      }
                    }
                  },
       },{
         data:['烘房','燃气锅炉处'],
				 y:"40",
         x:'center',
         formatter: ['{a|{name}}',].join('\n'),
         textStyle: {
                    color: '#c3dbff',  //更改坐标轴文字颜色
                    fontSize : 14  ,
                    align:'left',
                    rich:{
                      a:{
                        width:100,
                      }
                    }
                  },
       },{
         data:['储气罐','滤油机房'],
				 y:"60",
         x:'center',
         formatter: ['{a|{name}}',].join('\n'),
         textStyle: {
                    color: '#c3dbff',  //更改坐标轴文字颜色
                    fontSize : 14  ,
                    align:'left',
                    rich:{
                      a:{
                        width:100,
                      }
                    }
                  },
       },{
         data:['高配房','浸漆房'],
				y:"80",
         x:'center',
         formatter: ['{a|{name}}',].join('\n'),
         textStyle: {
                    color: '#c3dbff',  //更改坐标轴文字颜色
                    fontSize : 14  ,
                    align:'left', 
                    rich:{
                      a:{
                        width:100,
                      }
                    }
                  },
       },{
         data:['柴油储存点','仓库'],
				 y:"100",
         x:'center',
         formatter: ['{a|{name}}'].join('\n'),
         textStyle: {
                    color: '#c3dbff',  //更改坐标轴文字颜色
                    fontSize : 14 ,
                    align:'left', 
                    rich:{
                      a:{
                        width:100,
                      }
                    }
                  },
       },    
    ],

显示效果
在这里插入图片描述