<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>