Creating the Chart Container

First, establish a container element for the chart using a template ref:

<div class="chart-container" ref="chartRef"></div>

Initializing the Chart Instance

Retrieve the DOM element and insatntiate the ECharts instance:

let chartDom = this.$refs.chartRef;
this.chartInstance = echarts.init(chartDom);

Then render the chart configuration:

this.chartInstance.setOption(chartConfig);

Configuring Gradient Colors

Create a color array containing gradient definitions. Each object specifies the start and end colors for horizontal gradient transitions:

// Gradient colors from dark to light
let gradientPalette = [
  { startColor: "#0F949B", endColor: "#1bf3fe" },
  { startColor: "#3279cd", endColor: "79b2f8" },
  { startColor: "#4ab074", endColor: "#90f9bb" }
];

let gradientColors = [];

gredientPalette.forEach(entry => {
  gradientColors.push(
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: entry.startColor },
      { offset: 1, color: entry.endColor }
    ])
  );
});

Building Series Data

Process the chart data and apply gradient colors to each series:

this.rawData.barItems.forEach(item => {
  this.seriesItems.push({
    name: item.name,
    type: "bar",
    stack: "all",
    barWidth: 20,
    data: item.values,
    showBackground: true,
    backgroundStyle: {
      color: "#134579"
    }
  });
});

Complete Implementation

<template>
  <div class="chart-wrapper" ref="chartRef"></div>
</template>

<script>
export default {
  name: "GradientBarChart",
  data() {
    return {
      rawData: {
        yAxis: ["Day 1", "Day 2", "Day 3"],
        legend: ["Twin Room", "King Room", "Business Suite"],
        barItems: [
          { name: "Twin Room", values: [7, 3, 9] },
          { name: "King Room", values: [4, 8, 6] },
          { name: "Business Suite", values: [5, 2, 2] }
        ]
      },
      seriesItems: [],
      chartInstance: null
    };
  },
  watch: {
    sourceData: {
      handler() {
        this.$nextTick(() => {
          this.setupChart();
        });
      },
      deep: true
    }
  },
  mounted() {
    this.setupChart();
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    setupChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
      
      let domElement = this.$refs.chartRef;
      this.chartInstance = echarts.init(domElement);

      this.rawData.barItems.forEach(entry => {
        this.seriesItems.push({
          name: entry.name,
          type: "bar",
          stack: "all",
          barWidth: 20,
          data: entry.values,
          showBackground: true,
          backgroundStyle: {
            color: "#134579"
          }
        });
      });

      let gradientPalette = [
        { startColor: "#0F949B", endColor: "#1bf3fe" },
        { startColor: "#3279cd", endColor: "#79b2f8" },
        { startColor: "#4ab074", endColor: "#90f9bb" }
      ];

      let gradientColors = [];

      gradientPalette.forEach(entry => {
        gradientColors.push(
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: entry.startColor },
            { offset: 1, color: entry.endColor }
          ])
        );
      });

      const chartConfig = {
        color: gradientColors,
        legend: {
          icon: "circle",
          top: "5%",
          left: "center",
          orient: "horizontal",
          itemHeight: 18,
          itemWidth: 18,
          selectedMode: false,
          itemGap: 30,
          textStyle: {
            fontSize: 16,
            color: "#fff"
          },
          data: this.rawData.legend
        },
        grid: {
          left: "10%",
          right: "3%",
          bottom: "10%",
          top: "20%",
          containLabel: true
        },
        xAxis: [
          {
            type: "value",
            axisTick: { show: false },
            splitLine: {
              show: true,
              lineStyle: { color: "rgba(255,255,255,.3)" }
            },
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5d85a0",
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 16
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            data: this.rawData.yAxis,
            inverse: true,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "#5d85a0",
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            }
          }
        ],
        series: this.seriesItems
      };

      this.chartInstance.setOption(chartConfig);
    }
  }
};
</script>

<style lang="less" scoped>
.chart-wrapper {
  width: 467px;
  height: 300px;
}
</style>

Key Configuration Details

The echarts.graphic.LinearGradient parameters control gradient direction: the first four arguments define a bounding box (0, 0, 1, 0) representing left-to-right horizontal progression. Each offset/color pair determines the color at specific positions along the gradient axis, enabling smooth color transitions across bar elements.