base_ui/components/charts/Bar.vue

<template>
  <div>
    <v-chart
      :option="options"
      style="height: 500px; width: 90%"
      ref="chart"
      @click="onChartClick"
      lazy
    ></v-chart>
  </div>
</template>

<script>
//
import { use } from "echarts/core";
import { BarChart } from "echarts/charts";
import { TooltipComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

/**
 * @vue-prop {Array} [data=[]] - داده‌های نمودار XY برای نمایش
 *
 * @vue-data {Object} [options={}] - تنظیمات نمودار
 * @vue-data {Object} tooltip - تنظیمات راهنمای ابزار
 * @vue-data {String} tooltip.trigger - رویدادی که راهنمای ابزار فعال شود (مثلاً 'axis')
 * @vue-data {Object} tooltip.axisPointer - تنظیمات نشانگر محور
 * @vue-data {String} tooltip.axisPointer.type - نوع نشانگر محور (مثلاً 'shadow')
 * @vue-data {Array} xAxis - محور افقی (x)
 * @vue-data {String} xAxis.type - نوع محور (مثلاً 'category')
 * @vue-data {Array} xAxis.data - داده‌های محور افقی
 * @vue-data {Object} xAxis.axisLabel - تنظیمات برچسب‌های محور افقی
 * @vue-data {Number} xAxis.axisLabel.interval - فاصله بین برچسب‌ها
 * @vue-data {Number} xAxis.axisLabel.rotate - زاویه چرخش برچسب‌ها
 * @vue-data {Array} yAxis - محور عمودی (y)
 * @vue-data {String} yAxis.type - نوع محور (مثلاً 'value')
 * @vue-data {Array} series - سری‌س های داده
 * @vue-data {String} series.name - نام سریس
 * @vue-data {String} series.type - نوع نمودار (مثلاً 'bar')
 * @vue-data {String} series.colorBy - مبنای انتخاب رنگ
 * @vue-data {String} series.barWidth - عرض نوارها
 * @vue-data {String} series.selectedMode - حالت انتخاب (مثلاً 'single')
 * @vue-data {Number} series.datasetIndex - شاخص مجموعه داده مرتبط با سری
 * @vue-data {Array} series.data - داده‌های سریس
 */
export default {
  props: {
    dataChart: {
      default() {
        return [];
      },
      type: Array,
    },
  },

  data() {
    return {
      options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true,
        // },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLabel: { interval: 0, rotate: 30 },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "داده",
            type: "bar",
            colorBy: "data",
            barWidth: "60%",
            selectedMode: "single",

            datasetIndex: 1,
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      },
    };
  },
  watch: {
    dataChart(navItem) {
      this.dataChartHandler(navItem);
    },
  },
  mounted() {
    this.dataChartHandler(this.dataChart);
  },
  methods: {
    /**
     * پردازش داده‌های نمودار برای نمایش.
     * @param {Array} value - آرایه‌ای از اشیاء داده‌های نمودار که هر شیء شامل فیلدهای name و y است.
     */
    dataChartHandler(value) {
      let modifiedData = value.map((item) => {
        return {
          name: item.name,
          value: item.y,
        };
      });

      let x = modifiedData.map(function (item) {
        return item.name;
      });
      this.options.xAxis[0].data = x;

      let dataChart = modifiedData.map(function (item) {
        return item.value;
      });
      this.options.series[0].data = dataChart;
    },
    /**
     * هندلر برای رویداد کلیک بر روی نمودار.
     * @param {Object} event - شیء رویداد که شامل اطلاعات نقطه‌ی کلیک شده است.
     */
    onChartClick(event) {
      const itemSelected = { name: event.name, y: event.value };
      this.$emit("list", itemSelected);
    },
  },

};
</script>
<style lang="scss"></style>