使用echarts设计一个环形图，具体的代码和效果如下

最新推荐文章于 2024-09-04 19:52:59 发布

xw486223221

最新推荐文章于 2024-09-04 19:52:59 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： echarts

本文链接：https://blog.csdn.net/xw486223221/article/details/89418653

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

app.title = '环形图';
option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        itemWidth: 15, //图例的宽度
        itemHeight: 15, //图例的高度
        itemGap: 25,//图例之间的间隔
        selectedMode: true, //是否图例上的有点击事件，true为有
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    //设置一个环形中间显示的数据
    graphic:[{
        type:'text',
        left:'center',
        top:'35%',
        style:{
            fill:'#686868',
            text:'总数',
            font: '20px Microsoft YaHei'
        }
    },{
        type:'text',
        left:'center',
        top:'40%',
        z:10,
        style:{
            text:'2562',
            font: '20px Microsoft YaHei'
        }
    }],
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['45%', '65%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    formatter: '\n \n{b}：\n{c}',
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold',
                    }
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

不同配置项在官方配置里都有说明：
https://www.echartsjs.com/option.html#graphic.elements-text.style.font
最后得到的结果图入下：
在这里插入图片描述这是我自己的学习过程，可以给图形展示的朋友们做借鉴