echarts 分别定义legend宽高与样式

最新推荐文章于 2024-05-28 16:27:28 发布

原创最新推荐文章于 2024-05-28 16:27:28 发布 · 6.9k 阅读

2 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文分享了在ECharts中实现双Legend布局的代码实例，通过调整legend的样式，包括宽度、高度、位置等属性，实现了对legend的精确控制。适用于需要在图表中展示不同类型数据并区分显示的情况。

业务需求
项目上的需求,需要将第二个legend做成这种情况,这就需要分别对legend的样式做出定义
代码如下:

legend:[{
itemWidth:12,
itemHeight:12,
data:[{name:'数量',icon:'rect'}],   //rect为矩形
bottom:5, //调整位置
left:'45%' //调整位置 
},{
itemWidth:12,
itemHeight:2,
data:[{name:'价值',icon:'rect'}],   //rect为矩形
bottom:5, //调整位置
right:'45%' //调整位置 
}]

因为我已经设好了颜色,所以在这段legend代码中我不需要设置了,避免无意义代码出现,有需要的可以参考博文更加详细