设置 ECharts 柱状图每个主题色
在 ECharts 中，可以通过多种方式为柱状图的每个柱子设置不同的颜色，以下是几种常用方法及其实现步骤。直接在数据中设置颜色
在 series 的 data 数组中，为每个数据项指定一个对象，并通过 itemStyle 属性设置颜色。
option = {
series: [
{
type: 'bar',
data: [
{ value: 100, itemStyle: { color: 'red' } },
{ value: 200, itemStyle: { color: 'blue' } },
{ value: 300, itemStyle: { color: 'green' } },
],
},
],
};
特点：简单直观，适合静态数据场景。
使用回调函数动态映射颜色
通过 itemStyle.color 的回调函数，根据数据索引或值动态设置颜色。
option = {
series: [
{
type: 'bar',
data: [100, 200, 300, 400],
itemStyle: {
color: function (params) {
const colorsMap = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
return colorsMap[params.dataIndex];
},
},
},
],
};
特点：代码简洁，适合动态数据场景。
使用渐变色
通过回调函数为每个柱子设置不同的渐变色。
option = {
series: [
{
type: 'bar',
data: [100, 200, 300],
itemStyle: {
color: function (params) {
const gradientColors = [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'red' },
{ offset: 1, color: 'blue' },
],
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'green' },
{ offset: 1, color: 'yellow' },
],
},
];
return gradientColors[params.dataIndex];
},
},
},
],
};
特点：适合需要视觉效果更丰富的场景。
随机生成颜色
通过定义随机颜色生成函数，为每个柱子动态分配颜色。
const randomRGB = () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return `rgb(${r},${g},${b})`;
};
option = {
series: [
{
type: 'bar',
data: [100, 200, 300],
itemStyle: {
color: randomRGB,
},
},
],
};
特点：适合需要随机展示效果的场景。
总结
根据需求选择合适的方法：
静态数据：直接赋值。
动态数据：回调函数映射。
高级视觉效果：渐变色或随机色。 这些方法可以灵活满足不同场景下的柱状图配色需求。
