1. 效果如圖爹殊，應(yīng)用了echarts官網(wǎng)的餅圖例子作說明
image.png
2. 配置如下
var data=[
{ value: 335, name: '直接訪問' },
{ value: 310, name: '郵件營銷' },
{ value: 234, name: '聯(lián)盟廣告' },
{ value: 135, name: '視頻廣告' },
{ value: 1548, name: '搜索引擎' }
]
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>蜕乡: {c} (m8gc6co%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
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: '聯(lián)盟廣告' },
{ value: 135, name: '視頻廣告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
3 分析
- 3.1 圖例圖標(biāo)修改
icon:"circle",
- 3.2 圖例 標(biāo)題樣式修改,lenged 對(duì)象里的修改
legend: {
orient: 'vertical',
x: 'left',
data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
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"
}
}
}
主要是應(yīng)用了富文本樣式，具體可以查看Echarts官方API
