Echarts3实例环形多标注图

最新推荐文章于 2024-05-28 15:45:01 发布

idomyway

最新推荐文章于 2024-05-28 15:45:01 发布

阅读量2.7k

点赞数 2

分类专栏： Echarts 文章标签： echarts 环形图多标注 label graphic

本文链接：https://blog.csdn.net/idomyway/article/details/85224874

版权

Echarts 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言

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

实现效果

在这里插入图片描述

实现代码

<!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>

idomyway

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Echarts3实例环形多标注图

前言&nbsp;&nbsp;&nbsp;&nbsp;在实现环形图的时候，label属性只能设置在内部和外部，不能实现同时存在的，这时，需要同Echarts的graphic属性作为label标签进行替代和填充。实现效果实现代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="
复制链接

扫一扫