zoukankan      html  css  js  c++  java
  • 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:[" "," "," ","农药占比","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

  • 相关阅读:
    进制转化
    递归小结
    Java异常处理面试题归纳
    字符串相加 内存分配
    递归与循环
    cookie
    会话管理
    在javaweb中通过servlet类和普通类读取资源文件
    JS中遍历EL表达式中后台传过来的Java集合
    Ztree加载完成后显示勾选节点
  • 原文地址:https://www.cnblogs.com/tzwbk/p/12699595.html
Copyright © 2011-2022 走看看