graficas highcharts

APP/pages/resumen.vue

@@ -10,64 +10,70 @@
       >
     </div>
 
-    <card title="Compras por categorías" class="p-2 col-12">
-      <bar-chart
-        class="col-12"
-        style="height: 10%"
-        ref="categorias"
-        :chart-data="categoriasBars.chartData"
-        :gradient-stops="categoriasBars.gradientStops"
-        :extra-options="categoriasBars.extraOptions"
-      >
-      </bar-chart>
+    <card>
+ <div class="chart-area" style="height: 300px">
+            <highchart style="height: 100%"  v-if="isMounted" :options="comprasChart"/>
+        </div>
+          <div class="chart-area" style="height: 300px">
+            <highchart style="height: 100%"  v-if="isMounted" :options="metodosChart"/>
+        </div>
     </card>
+
+         
+
+
+
+
+
   </div>
+
 </template>
 
 
 
-
 <script>
-import LineChart from "@/components/Charts/LineChart";
-import BarChart from "@/components/Charts/BarChart";
-import * as chartConfigs from "@/components/Charts/config";
+import * as configPlot from "@/components/Charts/config_plots";
 import config from "@/config";
 
 export default {
   name: "dashboard",
   middleware: "authenticated",
-  components: {
-    LineChart,
-    BarChart,
-  },
+ 
   data() {
     return {
+      isMounted: false,
+
+comprasChart:{
+...configPlot.chartOptions,
+    title: {
+      text: 'Compras por  categorías'
+  },
+   series: [{
+      name: '',
+      data: [],
+      color: "#e14eca"
+  },],
+
+},
+
+metodosChart:{
+...configPlot.pieOptions,
+    title: {
+      text: 'Métodos de pago'
+  },
+   series: [{
+      data: [],
+       },],
+
+},
+
       ingresos: 1000,
       compras: 1000,
 
-      categoriasBars: {
-        extraOptions: chartConfigs.barChartOptions,
-        chartData: {
-          labels: ["USA", "GER", "AUS", "UK", "RO", "BR"],
-          datasets: [
-            {
-              label: "Countries",
-              fill: true,
-              borderColor: config.colors.info,
-              borderWidth: 2,
-              borderDash: [],
-              borderDashOffset: 0.0,
-              data: [530, 20, 10, 80, 100, 45],
-            },
-          ],
-        },
-        gradientColors: config.colors.primaryGradient,
-        gradientStops: [1, 0.4, 0],
-      },
     };
   },
 
-  methods: {
+ methods: {
     formatMoneda(dato) {
       var num = dato;
       if (!isNaN(num)) {
@@ -115,50 +121,74 @@ export default {
         .catch((e) => console.log(e));
     },
 
-    getResumenCategorias() {
+   async getResumenCategorias() {
       const axiosHeader = {
         headers: {
           token: this.$store.state.auth.token,
           filtro: this.$store.state.filtro.fechas,
         },
       };
-      this.$axios
+      await this.$axios
         .get("/resumen_categorias", axiosHeader)
         .then((res) => {
           let categorias = res.data.labels;
-          let valores = res.data.datos;
+          let valores = res.data.datos;           
 
-          let chartData = {
-            label: "Categorias",
-            datasets: [
-              {
-                label: "Total",
-                fill: true,
-                borderColor: config.colors.info,
-                borderWidth: 2,
-                borderDash: [],
-                data: valores,
-              },
-            ],
-            labels: categorias,
-          };
-          this.categoriasBars.labels = categorias;
-          this.categoriasBars.chartData.datasets.data = valores;
+           this.comprasChart.xAxis.categories =categorias;
+           this.comprasChart.series =[{name: '',
+                        data: valores,
+                        }]
 
-          this.$refs.categorias.renderChart(
-            chartData,
-            chartConfigs.barChartOptions
-          );
-          this.$refs.categorias.updateGradients(chartData);
+                        
+
+        
+           
+        })
+        .catch((e) => console.log(e));
+    },
+
+     async getResumenMetodos() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+          filtro: this.$store.state.filtro.fechas,
+        },
+      };
+      await this.$axios
+        .get("/resumen_metodos", axiosHeader)
+        .then((res) => {
+          let metodos = res.data.labels;
+          let valores = res.data.datos;           
+
+           //this.metodosChart.xAxis.categories =metodos;
+           var series =[];
+           for (var i=0;i< metodos.length;i++){
+             var serie={
+               name:metodos[i],
+               y:valores[i]
+             }
+             series.push(serie)
+           }
+           console.log(series)
+           this.metodosChart.series = [{name: '',
+                        data: series,
+                        }];
+
+                        
+
+        
+           
         })
         .catch((e) => console.log(e));
     },
   },
 
-  mounted() {
-    this.getCompras();
-    this.getIngresos();
-    this.getResumenCategorias();
+  async mounted() {
+   await this.getCompras();
+   await this.getIngresos();
+   await this.getResumenCategorias();
+   await this.getResumenMetodos();
+    this.isMounted = true;
   },
 };
 </script>