How to change bar color in Echarts - vue.js

Question

I'm using Echarts with vue and I created a bar chart and I want to change the color of each bar in this chart. I tried the code below but it just changes the color of the first one.
optionYear: {
legend: {},
color: ["#14323F", "green", "red", "purple", "yellow", "black"], // tried this to change bar color
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params) {
return params[0].data[1] + "%";
},
},
dataset: [
{
dimensions: ["name", "value"],
source: [[], [], [], [], [], []],
},
{
transform: {
type: "sort",
config: { dimension: "value", order: "desc" },
},
},
],
xAxis: {
type: "category",
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {},
series: {
type: "bar",
encode: { x: "name", y: "value" },
datasetIndex: 1,
},
},

Answer 1

To meet your requirement (set color to each x-axis), you should set itemStyle function in the option.series, here's the code:
option = {
series: {
// This is the key part
itemStyle: {
color: function (param) {
const color = ["#14323F", "green", "red", "purple", "yellow", "black"];
// param.value[0] is the x-axis value
return color[param.value[0] % color.length]
}
},
type: "bar",
encode: { x: "name", y: "value" },
datasetIndex: 1,
},
legend: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params) {
return params[0].data[1] + "%";
},
},
dataset: [
{
dimensions: ["name", "value"],
source: [[0, 10], [1, 20], [2, 30], [4, 40], [5, 50], [6, 60]],
},
{
transform: {
type: "sort",
config: { dimension: "value", order: "desc" },
},
},
],
xAxis: {
type: "category",
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {},
};
It will show like this, each bar of different x-axis will have a different color:
This option.color you set is for different series in the chart, for example, like a chart like this: