Thiết lập biểu đồ cột hiển thị giá trị âm dương trong Vue.js bằng thư viện ECharts thực hiện qua các bước sau:

npm install echarts --save

Khai báo thư viện trong component:

import echarts from 'echarts';

Cấu trúc template và logic xử lý dữ liệu:

<template>
  <div ref="chartContainer" style="width: 900px; height: 500px"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartConfig: {},
      positiveTarget: [],
      positiveActual: [],
      negativeTarget: [],
      negativeActual: [],
      monthLabels: [],
      years: ['2022', '2023'],
      colorScheme: ['#5871c0', '#9eca7f', '#f3c96b', '#de6e6a'],
      labelSettings: {
        show: false,
        position: 'outside',
        color: '#BEC3EB'
      },
      highlightStyle: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      },
      columnWidth: 17
    };
  },
  mounted() {
    for (let i = 0; i < 12; i++) {
      this.monthLabels.push(`${i + 1} tháng`);
      this.positiveTarget.push(Math.random() * 200);
      this.positiveActual.push(Math.random() * 500);
      this.negativeTarget.push(-(Math.random() * 300));
      this.negativeActual.push(-(Math.random() * 100));
    }
    this.$nextTick(() => this.renderChart());
  },
  methods: {
    renderChart() {
      this.chartConfig = {
        legend: {
          data: [
            `${this.years[0]} Mục tiêu`,
            `${this.years[0]} Thực tế`,
            `${this.years[1]} Mục tiêu`,
            `${this.years[1]} Thực tế`
          ],
          right: '10%',
          icon: 'circle',
          textStyle: {
            color: '#BEC3EB',
            fontSize: 13
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 15
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          data: this.monthLabels,
          splitArea: { show: false },
          axisLabel: {
            textStyle: {
              color: '#5871c0',
              fontSize: 13
            }
          }
        },
        yAxis: [{
          type: 'value',
          splitNumber: 10,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6469A1',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            formatter: value => Math.abs(value),
            textStyle: {
              color: '#BEC3EB',
              fontSize: 13
            }
          }
        }],
        grid: {
          bottom: 25,
          top: 35,
          right: 0
        },
        series: [
          {
            name: `${this.years[0]} Mục tiêu`,
            type: 'bar',
            stack: 'targetGroup',
            label: this.labelSettings,
            emphasis: this.highlightStyle,
            data: this.positiveTarget,
            barWidth: this.columnWidth,
            itemStyle: { color: this.colorScheme[0] }
          },
          {
            name: `${this.years[0]} Thực tế`,
            type: 'bar',
            stack: 'actualGroup',
            label: this.labelSettings,
            emphasis: this.highlightStyle,
            data: this.positiveActual,
            barWidth: this.columnWidth,
            itemStyle: { color: this.colorScheme[1] }
          },
          {
            name: `${this.years[1]} Thực tế`,
            type: 'bar',
            stack: 'targetGroup',
            label: this.labelSettings,
            emphasis: this.highlightStyle,
            data: this.negativeTarget,
            barWidth: this.columnWidth,
            itemStyle: { color: this.colorScheme[2] }
          },
          {
            name: `${this.years[1]} Mục tiêu`,
            type: 'bar',
            stack: 'actualGroup',
            label: this.labelSettings,
            emphasis: this.highlightStyle,
            data: this.negativeActual,
            barWidth: this.columnWidth,
            itemStyle: { color: this.colorScheme[3] }
          }
        ]
      };

      const chartInstance = echarts.init(this.$refs.chartContainer);
      chartInstance.setOption(this.chartConfig);
    }
  }
};
</script>

Cần đảm bảo container đã được render hoàn tất trước khi khởi tạo biểu đồ để tránh lỗi.