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

标签：mat   val   tofixed   type   document   原因   art   tst   匹配   

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 位置调整和值添加

标签：mat   val   tofixed   type   document   原因   art   tst   匹配   

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