Echarts饼图配置、样式详解一、图线划分，板块间隙，文字边距样式等

叁歲伎倆 2022-04-23 11:12 629阅读 0赞

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

### 效果图： ###

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

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        body{
            background: #30313F;
        }
        </style>
        <script src="js/echarts.min.js"></script>
    </head>
    <body>
    
        <div style="height:500px;">
            <div id="ec1" style="height: 98%;padding: 15px;"></div>
        </div>
    
    
        <script>
            var dom = document.getElementById("ec1");
            var myChart = echarts.init(dom);
            option1 = null;
    
            option1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: " {b}：{c} "
                },
                color:['#FFFF00','#FFCC00','#CC9900','#996600','#993300','#CC6633'],    //环形颜色
                series: [
    
                    {
                        name: '来源',
                        type: 'pie',
                        radius: ['30%', '50%'],     //饼图大小
                        labelLine: {
                            normal: {
                                length: 35,     //折线
                                length2: 150    //文字下面的线
                            }
    
                        },
                        label: {
                            normal: {
                                formatter: '{c|{c}}   {b|{b}}  \n\n',   //显示文字样式
    
                                borderWidth: 20,
                                borderRadius: 4,
                                padding: [0, -120],     //文字和图的边距，也可以通过这个调整文字和引导线位置
                                rich: {
                                    // a: {
                                    //     color: '#333',
                                    //     fontSize: 33,
                                    //     lineHeight: 20
                                    // },
                                    b: {			//name的样式
                                        fontSize: 20,	
                                        lineHeight: 20,
                                        color: '#CDCDD0'
                                    },
                                    c: {				//value的样式
                                        fontSize: 30,
                                        lineHeight: 20,
                                        color: '#fff'
                                    }
                                }
                            }
                        },
                        data: [
                            {value: 11, name: '数据1'},   //value ->C  name ->B
                            {value: 15, name: '数据2'},
                            {value: 7, name: '数据3'},
                            {value: 4, name: '数据4'},
                            {value: 3, name: '数据5'},
                        ],
                        itemStyle: {        //饼图按块划分时是否需要用线隔开，  不需要注释即可
                            normal: {
                                borderWidth: 2,
                                borderColor: '#2C2D3B'
                            }
                        }
                    }
                ]
            };
            if (option1 && typeof option1 === "object") {
                myChart.setOption(option1, true);
            }
        </script>
    </body>
    </html>

[70]: /images/20220320/074f4b7e4a334fd083acee5f84fa13dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]: /images/20220320/115f52763ab54483a0132cd3816731b2.png