1. 效果如图，应用了echarts官网的饼图例子作说明
image.png
2. 配置如下
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'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
3 分析
- 3.1 图例图标修改
icon:"circle",
- 3.2 图例 标题样式修改,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"
}
}
}
主要是应用了富文本样式，具体可以查看Echarts官方API
