这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

前言

最近在做一个后台管理系统的项目中有这样一个需求：使用百度echarts的圆环图展示数据，且中间显示固定的数据。相信这个需求在很多的后台项目中都会有涉及而且极为平凡，初次接触echarts的时候有点懵无从下手，想过使用label，但是最终效果不尽人意，在多次尝试后才知道使用graphic来做才是最正确的选择，那么接下来就带大家了解下圆环图的集中常见使用。

基础圆环图

基础的圆环图很简单，就是一个圆环显示数据就完了，这也是官方的例子，这里就直接给出代码：

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

这种圆环图直接填充数据就ok了

中间显示固定数据圆环

这种圆环图就是这次项目中所使用到的了，这种圆环图所用到的配置项为graphic，看意思相信大家也知道了就是自己画出来，所以呢知道这个就很简单了，示例如下：

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    graphic: [{
        type: 'text',
        left: 'center',
        top: '47%',
        style: {
            fill: '#333333',
            text: '22万元',
            font: 'normal bolder 2em "Microsoft YaHei"',
            textAlign: 'center',
            textVerticalAlign: 'middle'
        }
    }],
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

这里呢也不需要去详细介绍每个配置项的含义，因为根据名称都能够知道含义，主要说的就三个：left、top、textAlign。不过通常的设置就是left为center，top为center，也就是上下左右都居中显示。

left

left意为左边，就是距离左边的距离，这个距离可以是具体的值，可以是百分比，还可以为center，这里需要知道的就是有left肯定有right，所以这两个都是可以的，但是设置了left就不用设置right，两个只有一个能够生效。

top

top和left类似只是方向上的不同，取值可以是具体值，可以是百分比。还可以是middle，同样有top就有bottom，设置两个只有一个能生效。

textAlign

这个和css中的一样文字的对齐方式，取值为left、center、right

中间显示多行文本

有了上面的基础，其实中间显示多行文本就更加简单了。这里有两种方法来做，一种是采用换行符、另外一种是多画一个然后设置位置。本人比较推荐使用第二种，因为第一种的话在每个浏览器上效果还不一样。示例如下：

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    graphic: [{
        type: 'text',
        left: 'center',
        top: '47%',
        style: {
            fill: '#333333',
            text: '22万元',
            font: 'normal bolder 2em "Microsoft YaHei"',
            textAlign: 'center',
            textVerticalAlign: 'middle'
        }
    },{
        type: 'text',
        left: 'center',
        top: '52%',
        style: {
            fill: '#333333',
            text: '未结算金额',
            font: 'normal bolder 2em "Microsoft YaHei"',
            textAlign: 'center',
            textVerticalAlign: 'middle'
        }
    }],
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

动态显示当前数据

这种也比较简单，官方的例子就有，所以不过多描述，例子如下：

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold',
                    formatter:'{b}{c}'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

如果数据太多也想要换行也好说，在需要换行的地方添加\n即可，如下：

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold',
                    formatter:'{b}{c}\n{a}'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

百度echarts圆环图的几种常见用法

前言