Echart 自定义 legend (图例)


最近项目中使用echarts,下面来总结下echart图例(legend)的三种修改方式:

一、Echarts 提供的标记类型包括 : circle,rect,roundRect, triangle,diamond, pin , arrow, none

二、如果以上几种类型不满足业务需求,还可以设置自定义图片   'image://url'  url为图片链接   或者 dataURI

  legend:[

   {

    name: '小仙女',

    icon: 'image:// http://xxx.xxxx/a/b.png '

   },

  ]

  URI 为dataURI :

    'image://data:image/git;base64,..............................................'

  注意:自定义图片的时候,在icon点击的不显示的时候无法灰掉,当然你可以通过 legendToggleSelect 控制点击后的图例,这个就看个人喜好了,我比较倾向于第三种方式

三、通过svg path 设置为任意的矢量路径,可以设置任意颜色,大小  

  具体path路径可以通过AI画出icon,然后通过阿里图标库转换拿到path路径

 


免责声明!

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



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