echarts提供给我们默认的legend icon只有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'这么几种类型, 有时候我们需要自定义,比如去引入图片等
自定义icon为图片
legend: {
data: [
{
name: "XXX",
textStyle: {
fontSize: 12,
color: "#fff"
},
icon: "image://http://baidu.com/xxx.xx"
}
]
},
但是在vue中,引用项目中的图片或者icon又会出现路径问题,很头疼,
因为除了static文件夹,图片放在其他文件夹都会被webpack构建,如改成base64的格式。js会找不到图片路径。
因此,我提供两种方式供大家参考:
1、
legend: {
data: [
{
name: "XXX",
textStyle: {
fontSize: 12,
color: "#fff"
},
icon: "image://" + require(@/assets/xxx.png) + ""
}
]
},
2、
import xxxx from '@/assets/xxxx.png'
legend: {
data: [
{
name: "XXX",
textStyle: {
fontSize: 12,
color: "#fff"
},
icon: "image://" + xxxx + ""
}
]
},
此外,我还遇到一种情况,双Y轴时,两个不同大小的icon引入后,第一次渲染是没有问题的,但是重复渲染后,两个icon的尺寸就成一样了,
这样的需求就很D疼,
解决办法我是直接搞了两个尺寸相同的icon,有更好的办法欢迎留言告诉呀