echarts之legend-改变图例的图标为⾃定义图⽚
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'
}
]
}
是echarts中的图例
名称 类型 默认值 可选值 效果
data Array [] 图例内容数组，数组项通常为{string}，每⼀项代表⼀个系列的name，默认布局到达边缘会⾃动分⾏（列），传⼊空字符串”可实现⼿动分⾏（列）。 使⽤根据该值索引series中同名系列所⽤的图表类型和itemStyle，如果索引不到，该item将默认为没启⽤状态。 如需个性化图例⽂字样式，可把数组项改为{Object}，指定⽂本样式和个性化图例icon
先来⼀个demo
legend:{
show:true,
orient:'horizontal',
borderColor:'#df3434',
borderWidth:2,
data:['蒸发量','降⽔量','最低⽓温']
}
  效果图如下：
⾃定义每个图例样式
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:'降⽔量',
font weight boldertextStyle:{
fontSize:12,
fontWeight:'bolder',
icon:'image://./images/icon2.png'//格式为'image://+icon⽂件地址'，其中image:：后的//不能省略                },
icon:'pie'
}
]
}
  效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。