Echarts饼图中间显示数值完整教程

Echarts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和可视化数据展示界面。其中，饼图是比较常见的一种图表，它能够直观地展示出各项数据在总量中所占的比例。而在饼图中间显示数值可以进一步提升图表的可读性和可视化呈现效果，下面将详细介绍如何实现这一功能。

一、选取合适的饼图类型

Echarts提供了多种不同类型的饼图，包括普通饼图，环形饼图，南丁格尔玫瑰图等。在进行中心数值显示时，需要选择一种适合的饼图类型。下面以普通饼图为例，具体步骤如下：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 配置项
var option = {
    title: {
        text: '某站点访问量统计',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

二、在饼图中间显示数值

为了在饼图中间显示数值，需要在series中添加以下代码：

label: {
    normal: {
        show: true,
        position: 'center',
        formatter: '{b}\n{c}'
    }
}

其中，label是为每个扇形区域添加文本标签的配置项，normal表示普通的文本样式，show则代表是否显示文本。position表示文本的位置，对于饼图中间显示数值，需要将其设置为’center’。最后，formatter是文本格式化函数，其中{b}代表数据项名称（即图例名称），{c}代表数据值。同时，在饼图中心需要添加一个圆形背景，代码如下：

graphic: [{
    type: 'circle',
    left: 'center',
    top: 'middle',
    shape: {
        cx: 0,
        cy: 0,
        r: 50
    },
    style: {
        stroke: '#ccc',
        fill: '#fff'
    }
}]

其中，graphic是echarts中的图形组件，用于添加各种绘图元素。这里添加了一个圆形背景，left和top分别指定位置居中，shape则指定圆形的属性，包括圆心坐标和半径大小。style则指定圆形边框和背景色。

三、调整饼图样式

除了添加饼图中间的数值显示外，还可以针对饼图的样式进行自定义调整，包括颜色、大小、字体、标签等。下面以调整饼图颜色为例，具体代码如下：

series: [
    {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        itemStyle: {
            normal: {
                color: function (params) {
                    var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },
                label: {
                    show: true,
                    position: 'center',
                    formatter: '{b}\n{c}'
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]

这里使用了itemStyle来自定义每个扇形区域的样式，其中normal表示普通状态下的样式，color则是扇形的颜色，这里使用了一个colorList数组来指定多种颜色，每个数值对应一种颜色。同时，label和formatter等属性与前面相同。

四、总结

通过上述步骤，我们能够轻松地在饼图中间显示数值。同时，依据不同的实际需求，我们还可以通过调整标签样式、饼图颜色等方式来自定义图表样式，从而更好地展示数据。