echarts added to estadisticas page

components/LineChart.vue

@@ -0,0 +1,117 @@
+<template>
+  <!-- <section> -->
+  <div :id="chartId" class="chart-container ">
+    <div v-show="dialog && dialog.dataIndex !== -1" class="chart-dialog">
+      <p>this is a test</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { nextTick } from 'vue';
+
+// Import the tooltip, title, rectangular coordinate system, dataset and transform components
+import {
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent
+} from 'echarts/components';
+
+// Features like Universal Transition and Label Layout
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
+
+// Register the required components
+echarts.use([
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LabelLayout,
+  LegendComponent,
+  LineChart,
+  SVGRenderer,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent,
+  UniversalTransition,
+  CanvasRenderer
+]);
+export default {
+  props: {
+    chartId: {
+      type: String,
+      default: ''
+    },
+    lineChartData: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      showDataDialog: false,
+      dialog: {
+        top: 0,
+        left: 0,
+        dataIndex: -1,
+      }
+    }
+  },
+  computed: {
+    chartContainer() {
+      return document.getElementById(this.chartId)
+    }
+  },
+  watch: {
+    lineChartData: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (newVal && newVal.xAxis && newVal.series) {
+          this.$nextTick(() => {
+            const el = document.getElementById(this.chartId);
+            if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+              this.initChart();
+            }
+          });
+        }
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.chartContainer, {
+        renderer: 'svg',
+        useDirtyRect: false,
+        decalPattern: true,
+      });
+      this.chart.setOption(this.lineChartData)
+      this.chart.resize();
+    },
+  },
+}
+</script>
+
+<style>
+.chart-container {
+  position: relative; 
+  width: 100%; 
+  height: 24rem; 
+  color: #000000; 
+}
+
+.chart-dialog {
+  position: absolute; 
+  z-index: 10; 
+  width: 6rem; 
+  height: 6rem; 
+  background-color: #ffffff; 
+}
+</style>