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

  • 相关阅读:
    2016第50周五
    2016第50周四
    2016第50周三
    2016第50周二
    2016第50周一
    2016第49周日
    软件架构、框架、模式、模块、组件、插件概念汇总
    2016第49周五
    2016第49周四
    从服务器上共享文件上下载文件或上传文件
  • 原文地址:https://www.cnblogs.com/goloving/p/9113830.html
Copyright © 2011-2022 走看看