正文

教你轻松设置echarts环状图颜色，颜色搭配技巧大公开

/0 浏览量
0719

在 ECharts 中，环状图是一种非常直观的数据展示方式，尤其是在表示百分比或者分数时。环状图的颜色搭配对于整个图表的美观度和信息传达效果有着至关重要的作用。今天，就让我来为大家揭秘如何轻松设置 ECharts 环状图的颜色，并提供一些实用的颜色搭配技巧。

选择合适的颜色

1. 遵循色彩理论

在进行颜色选择时，我们可以参考一些基本的色彩理论，如色轮、色彩对比等。以下是一些基本的原则：

  • 色轮原理：使用色轮来选择互补色或者对比色，可以增加视觉冲击力。
  • 色彩对比：高对比度的颜色搭配可以突出重点，而低对比度的颜色搭配则更加和谐。

2. 考虑图表内容

  • 数据类型：对于表示百分比或分数的环状图，通常使用单一颜色渐变，以便更直观地展示数据的变化。
  • 文化背景：不同文化对于颜色的理解和偏好不同，选择颜色时也要考虑到目标受众的文化背景。

设置 ECharts 环状图颜色

1. 使用内置颜色

ECharts 提供了一系列内置的颜色主题，你可以直接使用这些主题来设置环状图的颜色。

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: '搜索引擎'}
            ],
            itemStyle: {
                color: '#c23531'
            }
        }
    ]
};

2. 自定义颜色

如果你想要自定义颜色，可以通过以下方式实现：

var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#e5323e'];

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: '搜索引擎'}
            ],
            itemStyle: {
                color: function (params) {
                    return colorList[params.dataIndex];
                }
            }
        }
    ]
};

颜色搭配技巧

1. 渐变效果

使用渐变效果可以让环状图的颜色更加丰富和立体。

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

2. 混合使用颜色

将多种颜色混合使用，可以让环状图看起来更加丰富和有层次。

itemStyle: {
    color: function (params) {
        var color1 = '#c23531';
        var color2 = '#313695';
        var color3 = '#61a0a8';
        var color4 = '#d48265';
        var color5 = '#e5323e';
        var color6 = '#fdd0a2';
        var color7 = '#f46d43';
        var color8 = '#d4312c';
        var color9 = '#f38181';
        var color10 = '#91c7ae';
        var color11 = '#6495ed';
        var color12 = '#e6b722';
        var color13 = '#d72727';
        var color14 = '#277272';
        var color15 = '#8d4167';
        var color16 = '#f6768e';
        var color17 = '#f6e189';
        var color18 = '#837879';
        var color19 = '#d7b5b4';
        var color20 = '#f7f7f7';
        var colors = [color1, color2, color3, color4, color5, color6, color7, color8, color9, color10, color11, color12, color13, color14, color15, color16, color17, color18, color19, color20];
        return colors[params.dataIndex % colors.length];
    }
}

通过以上方法，你可以轻松设置 ECharts 环状图的颜色，并运用各种颜色搭配技巧，让你的图表更加美观和具有吸引力。希望这篇文章能帮助你更好地掌握 ECharts 环状图的颜色设置。

-- 展开阅读全文 --