关键点:饼图传入两份数据,一份设置label在外显示,一份在内显示,设置不同信息,位置叠加

/*饼图:项目状态*/
var myChart = echarts.init(document.getElementById('echarts-pie'));

// 指定图表的配置项和数据
var option = {
    title : {
        text: '项目状态',
        x:'center'
    },
    color:['#477dea', '#9a9a9a','#f2b644'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    normal:{
        show: true,
        position: 'inside',
        formatter: '{d}%'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['已签单','实施中','已完成']
    },
    series : [
        {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'已签单'},
                {value:310, name:'实施中'},
                {value:234, name:'已完成'}
            ],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inner', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 10   //文字的字体大小
                    },
                    formatter:'{d}%'   //显示%
                }
            }
        },
        {
            name: '',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'已签单'},
                {value:310, name:'实施中'},
                {value:234, name:'已完成'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'outer', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 10   //文字的字体大小
                    },
                    formatter:'{c}'   //显示%
                }
            }
        }
    ]
};


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

参考链接:https://blog.csdn.net/wangchaohpu/article/details/81669856

作者 铁血 汉子 2019年3月12日
2024/12/22/07:15:02am 2019/3/12/10:52:44
0 10363