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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM