轻松掌握ECharts：圆环镂空图制作攻略与实战技巧

简介

圆环镂空图是一种常见的图表类型，它能够直观地展示数据的占比关系。ECharts 是一款功能强大的 JavaScript 数据可视化库，可以轻松创建各种图表。本文将详细介绍如何使用 ECharts 制作圆环镂空图，并提供一些实战技巧。

准备工作

在开始制作圆环镂空图之前，请确保您已经安装了 ECharts 库。您可以从 ECharts 的官方网站下载最新版本的库，并将其包含到您的项目中。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

基础配置

下面是一个圆环镂空图的基本配置示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'], // 镂空效果
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

myChart.setOption(option);

实战技巧

1. 颜色渐变

为了使圆环更加美观，可以使用颜色渐变效果。在 series 配置中，可以通过 itemStyle 的 color 属性来实现。

itemStyle: {
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
        }, {
            offset: 1, color: 'blue' // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
    }
}

2. 标签位置调整

默认情况下，标签会显示在圆环的中间。您可以通过调整 label 配置中的 position 属性来改变标签的位置。

label: {
    position: 'outside', // 标签显示在圆环外部
    formatter: '{b}: {c} ({d}%)'
}

3. 高亮显示

当鼠标悬停在某个扇区上时，可以高亮显示该扇区。在 emphasis 配置中，可以通过 label 和 itemStyle 属性来实现。

emphasis: {
    label: {
        show: true,
        fontSize: '20',
        fontWeight: 'bold'
    },
    itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

总结

通过以上步骤和技巧，您应该能够轻松地使用 ECharts 制作出美观且实用的圆环镂空图。在实际应用中，可以根据具体需求调整配置，以达到最佳效果。希望本文对您有所帮助！