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

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