echarts 修改legend樣式

參考鏈接：https://www.cnblogs.com/goloving/p/9113830.html

 

當折線圖時，legend默認時rect形式，如果需要改圖例形狀，可以自己設置legend的icon屬性

legend: {
    icon:'stack'
},

自定義每個圖例樣式：為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'
        }
    ]
}

修改圖例的圖標為自定義圖片

圖片放在根目錄下的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'
        }
    ]
}