饼图自定义图例代码如下:
tooltip: {
textStyle:{
fontSize:14,
color:'#fff'
},
backgroundColor: 'rgba(51, 51, 51, 0.7)',
// borderColor: 'rgba(51, 51, 51, 0.7)',
borderWidth:0,
trigger: 'item',
formatter: function (val) {
console.log(val)
let res=`<div>
<span>分类 : ${val.name}</span>
<div style="margin-top: 10px">${val.marker} 占比 : ${val.percent}%</div>
<div style="margin-left: 18px">人数 : ${val.value}</div>
</div>`
return res
}
},
柱状图自定义图例效果:
tooltip: {
trigger: 'axis',
backgroundColor: '#FFFFFF',
borderColor: '#EEF1F7',
borderWidth: 1,
textStyle: {
width: 168,
height: 160,
lineHeight: 24,
color: '#333333',
fontSize: '14',
fontFamily: 'PingFangSC-Regular'
},
formatter: params => {
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
console.log(params, '88888***');
params.forEach(item => {
dataStr += `<div>
<div style="margin: 0 10px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:30px;">${item.data}</span>
</div>
</div>`
})
return dataStr
}
},