Echarts3实例环形多标注图

冷不防 2021-09-17 10:04 438阅读 0赞

### 前言 ###

在实现环形图的时候，label属性只能设置在内部和外部，不能实现同时存在的，这时，需要同Echarts的`graphic`属性作为label标签进行替代和填充。

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                height: 100%;
            }
            *{
                margin: 0px;
                height: 0px;
            }
            #chartDiv{
                width: 520px;
                height: 300px;
                border: 1px solid red;
            }
        </style>
        <script src="js/echarts.min.js"></script>
    </head>
    <body>
    <div id="chartDiv"></div>
    
    <script>
        var chartDiv = echarts.init(document.getElementById("chartDiv"));
    
        var option = {
            title:{
                text:"多标注环形图"
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color:['#7BBCFE','#F7D272','#F9738D'],
            grid: {
                containLabel:true
            },
            graphic:[{
                type:'text',
                left:'center',
                top:'40%',
                style:{
                    text:'访问总量',
                    fill:'#000',
                    width:30,
                    height:30,
                    fontSize:24,
                }
            },{
                type:'text',
                left:'center',
                top:'50%',
                style:{
                    text:'2000次',
                    fill:"red",
                    width:30,
                    height:30,
                    fontSize:14,
                }
            }],
            series: [
                {
                    name:'',
                    type:'pie',
                    radius: ['50%', '60%'],
                    center: ['50%','50%'],
                    //avoidLabelOverlap: true,
                    label: {
                        normal: {
                            formatter: '{a|{b}}{abg|}\n{hr|}\n  {b|数量：}{c}  {per|{d}%}  ',//空格也起作用
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 2,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 20,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 20
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                        }
                    },
                    data:[
                        {value:335, name:'直达'},
                        {value:679, name:'营销广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
        chartDiv.setOption(option);
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/26285ae4c4d4411faa8606f9a05045db.png