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)
}

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

原文地址：https://www.cnblogs.com/KellyChen/p/9434041.html