1. 程式人生 > >echarts環形圖配置

echarts環形圖配置

ntb etop ase trigger 圖形 HA 圖例 居中對齊 seam

itemMoneys(){
let myChart = echarts.init(document.getElementById("money"))
window.addEventListener("resize",function(){
myChart.resize();
});
var moneyLegendData=[];//金額圖例
for(let i=0;i<this.categoryInfoList.length;i++ ){
moneyLegendData.push(this.categoryInfoList[i].purchaseCategory)
}
var ss=formatMoney( this.totalAmount);
myChart.setOption({
tooltip: {
trigger: ‘item‘,
formatter:function(obj){
return obj.name + "<br>" + formatMoney(obj.value)
}
},
legend: {
x : ‘center‘,
bottom : 30,
itemGap:20,
icon : ‘circle‘,
data:moneyLegendData
},
series: [
{
name:‘訪問來源‘,
type:‘pie‘,
radius: [‘66%‘, ‘70%‘],
center : [‘50%‘, ‘40%‘],
avoidLabelOverlap: false,
label: {
normal:
        //顯示的文本居中在圖形中,換行也居中對齊
       formatter:‘總金額\n\n‘+ss,
            fontSize:16,
lineHeight:24,
color:"#717171",
show: true, position: ‘center‘},
emphasis: {
show: true
}
},
labelLine: {normal: {show: false}},
data:[
{value:Number(this.categoryInfoList[0].purchaseAmount), name:this.categoryInfoList[0].purchaseCategory,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: ‘#03a1fd‘},
{offset: 1, color: ‘#0de5a7‘}
])
}
}
},
{value:Number(this.categoryInfoList[1].purchaseAmount), name:this.categoryInfoList[1].purchaseCategory,
itemStyle: {
normal: {//漸變色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: ‘#C9C7F7‘},
{offset: 1, color: ‘#C6C3F5‘}
])
}
}
},
{value:Number(this.categoryInfoList[2].purchaseAmount), name:this.categoryInfoList[2].purchaseCategory,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: ‘#EF8690‘},
{offset: 1, color: ‘#FEC772‘}
])
}
}
},
{value:Number(this.categoryInfoList[3].purchaseAmount), name:this.categoryInfoList[3].purchaseCategory,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: ‘#E986DE‘},
{offset: 1, color: ‘#E866A1‘}
])
}
}
},
{value:Number(this.categoryInfoList[4].purchaseAmount), name:this.categoryInfoList[4].purchaseCategory,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: ‘#ddd‘},
{offset: 1, color: ‘#ddd‘}
])
}
}
},
{value:Number(this.categoryInfoList[5].purchaseAmount), name:this.categoryInfoList[5].purchaseCategory,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: ‘#80F0C5‘},
{offset: 1, color: ‘#62F279‘}
])
}
}
}
]
}
]
})
},

效果圖:
技術分享圖片

 

echarts環形圖配置