Js + echarts - Pie legend 位置调整和值添加

var drawPieChart=function(chartId,titleText){

var chartData=[
{value:335, name:'原因1',trend:'up'},
{value:310, name:'原因2',trend:'up'},
{value:234, name:'原因3',trend:'dw'},
{value:135, name:'原因4',trend:'dw'},
{value:1548, name:'原因5',trend:'eq'}
]
var option = {
title : {
text: titleText,
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',      
right: 'right',        //靠右
top:'middle',        //垂直居中
formatter:function(name){    //在legend后加上趋势箭头,数值和百分比
var total=0, target,trend;  //echarts pie legend字面量有name值,value需要靠外部的chartData对象根据name值匹配获取
_.each(chartData,function(value, i){
total+=chartData[i].value
if(chartData[i].name==name){
target=chartData[i].value
trend=chartData[i].trend
}
})
var resultStr=name + ' | ' + ((target/total)*100).toFixed(2)+'%' + " "
if(trend=='up'){    //根据趋势值来获取对应的图表及样式,样式规则{style | string},legend样式text写在Style rich 里
resultStr+='{g| ↑}'
}else if(trend=='dw'){
resultStr+='{r| ↓}'
}else if(trend=='eq'){
resultStr+='{y| ━}'
}
resultStr+= '¥ ' + target

return resultStr
},
data: ['原因1','原因2','原因3','原因4','原因5'],
textStyle:{
rich:{
r:{
color:'red'
},
y:{
color:'orange'
},
g:{
color:'green'
}
}
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius : ['30%', '45%'],  //半径值,为圆环
center: ['35%', '40%'],  //宽比,高比
data:[
{value:335, name:'原因1'},
{value:310, name:'原因2'},
{value:234, name:'原因3'},
{value:135, name:'原因4'},
{value:1548, name:'原因5'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

var myChart=echarts.init(document.getElementById(chartId))
myChart.setOption(option);
window.addEventListener('resize',myChart.resize)
}

猜你喜欢

转载自www.cnblogs.com/KellyChen/p/9434041.html