echarts legend单项数据添加背景色|背景图
把legend图例设置背景色或者背景图
-
把legend设置成Arr,在每个legend对象里面背景颜色设置图片或者颜色值，backgroudColor:{image:(background.png)}。
-
设置完成后，legend会重叠在一起，使用top设置距离顶部的高度，把重叠的legend分开显示。
-
关于文字的显示，使用自定义富文本样式textStyle.rich，通过padding设置文本左右显示，经测试文本字数不能超过7个字，超过就视觉上宽度是不一样的。
原图：
demo图：
核心代
码：
top: `${90 - (i + 1) * 10}%`,
data: [
https://img-mid.csdnimg.cn/release/static/image/mid/ask/439372854686186.png "#left")
{
name: item.name,
icon: 'rect',
borderWidth: 0
}
],
backgroundColor:{
image: './legend_bg.png'
} ,
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 150px;
background-color: #0e1842;
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
#echarts01 {
background-size: cover;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.js"></script>
</head>
<body>
<div id="echarts01" style="width: 800px;height: 400px;background-color: #0e1842;"></div>
<script>
var myChart = echarts.init(document.getElementById('echarts01'));
const data = [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
const colorArr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
const legendArr = []
data.forEach((item, i) => {
legendArr.push({
selectedMode: false,
type: 'plain',
orient: 'vertical',
right: 10,
itemGap: 12,
itemWidth: 10,
itemHeight: 10,
top: `${90 - (i + 1) * 10}%`,
data: [
{
name: item.name,
icon: 'rect',
borderWidth: 0
}
],
padding: [2, 2, 0, 2],
backgroundColor:{
image: './legend_bg.png'
} ,
formatter: (name) => {
console.log(data[i].value);
name = name.length>6? name.substring(0,6)+'...':name
return `{name|${name}} {bfb|${data[i].value}%}`
},
textStyle: {
color: '#545659',
fontSize: 14,
fontFamily: '微软雅黑',
rich: {
name: {
padding: [4, 4],
color: '#fff',
align: 'left',
backgroundColor: 'transparent'
},
bfb: {
fontSize: 12,
padding: [4, -100, 0, 0],
align: 'right',
color: '#fff',
backgroundColor: 'transparent'
}
}
},
})
})
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: legendArr,
series: [
{
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>