echarts中 legend 自定義方法和單獨定義每個圖例的樣式和寬高

單獨定義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]);
                }
            });

 

原文鏈接：https://blog.csdn.net/weixin_39172079/java/article/details/90413831