echart餅狀圖上顯示百分比
阿新 • • 發佈:2019-02-08
效果如下:
echart 3.0寫法:
option = {
//提示框元件,滑鼠移動上去顯示的提示內容
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"//模板變數有 {a}、{b}、{c}、{d},分別表示系列名,資料名,資料值,百分比。
},
//圖例
legend: {
//圖例垂直排列
orient: 'vertical',
x: 'left',
//data中的名字要與series-data中的列名對應,方可點選操控
data:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
},
series: [
{
name:'訪問來源',
type:'pie',
//餅狀圖
// radius: ['50%', '70%'],
avoidLabelOverlap: false,
//標籤
label: {
normal: {
show: true ,
position: 'inside',
formatter: '{d}%',//模板變數有 {a}、{b}、{c}、{d},分別表示系列名,資料名,資料值,百分比。{d}資料會根據value值計算百分比
textStyle : {
align : 'center',
baseline : 'middle',
fontFamily : '微軟雅黑' ,
fontSize : 15,
fontWeight : 'bolder'
}
},
},
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視訊廣告'},
{value:1548, name:'搜尋引擎'}
]
}
]
};
echart 2.0寫法:
//其餘部分相同,label部分有所區別,在2.0中label是itemStyle的一項屬性
series: [
{
name:'訪問來源',
type:'pie',
//餅狀圖
// radius: ['50%', '70%'],
avoidLabelOverlap: false,
//標籤
itemStyle : {
normal : {
label:{
show : true,
position : 'inner',
formatter: '{d}%',
distance : 0.7 //這項是標識距離中心點的距離
textStyle : {
align : 'center',
baseline : 'middle',
fontFamily : '微軟雅黑',
fontSize : 15,
fontWeight : 'bolder'
}
},
labelLine:{
show : false
}
}
},
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視訊廣告'},
{value:1548, name:'搜尋引擎'}
]
}
]
因為沒有仔細看版本,糾結了好半天寫法,果然學前端最重要的就是:認真看文件,認真看文件,認真看文件!重要的事情說三遍!!!