Echarts饼图图例修改，legend样式修改1、配置如下fontweight属性bold
var data=[
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟⼴告' },
{ value: 135, name: '视频⼴告' },
{ value: 1548, name: '搜索引擎' }
]
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟⼴告', '视频⼴告', '搜索引擎'],
icon:"circle",
formatter:function(name){
let target;
for(let i=0;i<data.length;i++){
if(data[i].name===name){
target=data[i].value
}
}
let arr=["{a|"+target+"}","{b|"+name+"}"]
return arr.join("\n")
},
textStyle:{
rich:{
a:{
fontSize:16,
color:"#EA5504",
padding:10
},
b:{
fontSize:14,
color:"#333"
}
}
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟⼴告' },
{ value: 135, name: '视频⼴告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
2、分析
//图例图标修改
icon:"circle",
图例 标题样式修改,lenged 对象⾥的修改
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟⼴告', '视频⼴告', '搜索引擎'],                icon:"circle",
formatter:function(name){ //修改关键
let target;
for(let i=0;i<data.length;i++){
if(data[i].name===name){
target=data[i].value
}
}
let arr=["{a|"+target+"}","{b|"+name+"}"]
return arr.join("\n")
},
textStyle:{
rich:{
a:{
fontSize:16,
color:"#EA5504",
padding:10
},
b:{
fontSize:14,
color:"#333"
}
}
}

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