var drawpiechart=function (Chartid,titletext) {
var chartdata=[
{value:335, Name: ' Cause 1 ', trend: ' Up '},
{value:310, Name: ' Cause 2 ', trend: ' Up '},
{value:234, Name: ' Cause 3 ', trend: ' DW '},
{value:135, Name: ' Cause 4 ', trend: ' DW '},
{value:1548, Name: ' Cause 5 ', trend: ' EQ '}
]
var option = {
Title: {
Text:titletext,
Subtext: ",
X: ' Center '
},
ToolTip: {
Trigger: ' Item ',
Formatter: "{A} <br/>{b}: {C} ({d}%)"
},
Legend: {
Orient: ' Vertical ',
Right: ' R ',//
Top: ' Middle ',//Vertical Center
Formatter:function (name) {//after legend with trend arrows, values and percentages
var total=0, Target,trend; Echarts pie legend Literal has a name value, and value needs to be obtained by matching the external ChartData object according to the name value
_.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 ') {//Based on trend value to get corresponding chart and style, style rule {style | string},legend style text written in style rich
resultstr+= ' {g|↑} '
}else if (trend== ' DW ') {
resultstr+= ' {r|↓} '
}else if (trend== ' eq ') {
resultstr+= ' {Y|━} '
}
resultstr+= ' ¥ ' + target
Return ResultStr
},
Data: [' cause 1 ', ' cause 2 ', ' cause 3 ', ' cause 4 ', ' cause 5 '],
textstyle:{
rich:{
r:{
Color: ' Red '
},
y:{
Color: ' Orange '
},
g:{
Color: ' Green '
}
}
}
},
Series: [
{
Name: ' Access source ',
Type: ' Pie ',
Radius: [' 30% ', ' 45% '],//RADIUS value, for ring
Center: [' 35% ', ' 40% '],//aspect ratio, high ratio
data:[
{value:335, Name: ' Cause 1 '},
{value:310, Name: ' Cause 2 '},
{value:234, Name: ' Cause 3 '},
{value:135, Name: ' Cause 4 '},
{value:1548, Name: ' Cause 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)
}
Js + echarts-pie Legend Position adjustment and value addition