echarts中 legend 自定义方法和单独定义每个图例的样式和宽高

最新推荐文章于 2025-04-18 08:54:47 发布

ILY酱油王

最新推荐文章于 2025-04-18 08:54:47 发布

阅读量3.5w

点赞数 1

分类专栏： JAVA ECHARTS JS 文章标签： JAVA 前端 WEB

本文链接：https://blog.youkuaiyun.com/weixin_39172079/article/details/90413831

版权

JAVA 同时被 3 个专栏收录

23 篇文章

订阅专栏

5 篇文章

订阅专栏

ECHARTS

4 篇文章

订阅专栏

本文介绍了如何在echarts中单独定义每个图例的样式，包括颜色、大小、字体等，并展示了如何自定义图例的点击方法，以实现图例选中状态的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单独定义echarts中每个图例的样式,自定义图例的点击方法

//用不同样式的图例用数组写对应图例的样式
           legend:[{
               top: "15%",
               right: "24%",
               textStyle: {
                   color: "#3BAEFE",
                   fontSize: 14,
                   fontFamily: "微软雅黑"
               },
               itemWidth: 27,
               itemHeight: 16,
               data:[{
                   name: "农药",
                   icon: "circle"
               },{
                   name: "LOL",
                   icon: "rect"
               }]
           },{
               top: "15%",
               right: "15%",
               textStyle: {
                   color: "#3BAEFE",
                   fontSize: 14,
                   fontFamily: "微软雅黑"
               },
               itemWidth: 33,
               itemHeight: 16,
               data:[{
                   name: "农药+LOL",
                   icon: "image:///soyking/static/image/echarts/merge.png" //引用自定义的图片
               }]
           },{
               top: "15%",
               right: "15%",
               textStyle: {
                   color: "#3BAEFE",
                   fontSize: 14,
                   fontFamily: "微软雅黑"
               },
               data:["\n","\n","\n","农药占比","LOL占比"]
           }],

结果:

自定义图例的方法 (点击图例，显示图例的选中结果)

var bar = echarts.init(document.getElementById("barDiv"));

//自定义图例的方法
           bar.on("legendselectchanged",function(obj){
               //获取图例选择的结果
               var selected = obj.selected;
               for(var i in selected){
                   alert(selected[i]);
               }
           });