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'
            }
        ]
    }

  • 相关阅读:
    SDOI2019游记
    noi.ac309 Mas的童年
    51nod1237 最大公约数之和
    loj6074 子序列
    noi.ac89A 电梯
    51nod97B 异或约束和
    bzoj4490 随机数生成器Ⅱ加强版
    CF55D Beautiful numbers
    CF24D Broken robot
    CF226D The table
  • 原文地址:https://www.cnblogs.com/goloving/p/9113830.html
Copyright © 2011-2022 走看看