zoukankan      html  css  js  c++  java
  • Echarts的legend改变图例图标为自定义图片

      当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性

    legend: {
        icon:'stack'
    },

    1、自定义每个图例样式:为data的每个对象修改icon属性

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸发量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'stack'
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#df3434'
                },
                icon:'pie'
            }
        ]
    }

    2、修改图例的图标为自定义图片

      首先我找了如下两张图片放在根目录下的images文件夹下

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸发量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'image://./images/icon1.png'//格式为'image://+icon文件地址',其中image::后的//不能省略
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    icon:'image://./images/icon2.png'//格式为'image://+icon文件地址',其中image::后的//不能省略
                },
                icon:'pie'
            }
        ]
    }

  • 相关阅读:
    Keyboarding题解
    埃及分数 解题报告
    小木棍加强版解题报告
    扩展欧几里得
    luoguP4999 烦人的数学作业
    中国剩余定理
    20201115gryz模拟赛解题报告
    扩展欧几里得算法
    斐蜀定理
    CSP2020-S游记
  • 原文地址:https://www.cnblogs.com/goloving/p/9113830.html
Copyright © 2011-2022 走看看