正文

教你轻松制作echarts双环图，自定义百分比显示技巧

/0 浏览量
0401

简介

双环图是一种用于展示多组数据对比的图表类型，特别是在显示多个类别的百分比时非常有效。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以轻松创建各种图表，包括双环图。本文将详细介绍如何使用 ECharts 制作双环图，并重点讲解如何自定义百分比显示技巧。

准备工作

在开始制作双环图之前，请确保已经以下准备工作：

  1. 安装 Node.js 和 npm：ECharts 需要通过 npm 进行安装。
  2. 引入 ECharts 库：在 HTML 文件中引入 ECharts 的 JavaScript 库。
  3. 选择合适的容器：在 HTML 中创建一个用于展示图表的容器。

基础的双环图

以下是一个基础的双环图示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            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. 显示具体百分比

要显示每个扇区的具体百分比，可以在 label 配置中设置 formatter 函数：

label: {
    normal: {
        formatter: '{c|{d}%}\n{name}',
        rich: {
            c: {
                color: '#333',
                lineHeight: 40,
                align: 'center'
            }
        }
    }
}

这里，{c|{d}%} 表示百分比，{name} 表示扇区的名称。

2. 使用渐变颜色

为了让百分比更加醒目，可以使用渐变颜色：

itemStyle: {
    normal: {
        color: function(params) {
            // 根据数据项的索引生成颜色
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }]);
        }
    }
}

3. 自定义扇区的大小

如果你想自定义扇区的大小，可以使用 startAngle 和 endAngle 属性：

startAngle: 90, // 起始角度
endAngle: 0, // 结束角度

4. 增加文字提示

在鼠标悬停时显示文字提示，可以设置 tooltip 配置：

tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
}

总结

通过以上步骤，你可以轻松地使用 ECharts 创建一个具有自定义百分比显示的双环图。ECharts 提供了丰富的配置选项，使得图表的制作和定制变得更加灵活和简单。希望这篇文章能帮助你更好地理解和应用 ECharts 双环图。

-- 展开阅读全文 --