Comment appeler des méthodes à partir d'options dans ApexChart à l'aide de vue.js

Question

Je suis nouveau dans les graphiques vue et apex, en gros, ce dont j'ai besoin est d'appeler des méthodes à partir des options du graphique apex, j'ai créé un fichier montrant le problème que je rencontre :

https://jsfiddle.net/wr3uo5va/

J'ai besoin de chartOptions.dataLabels 调用方法 currencyValue

    dataLabels: {
      enabled: true,
      offsetX: -25,
      formatter: function(val) {
        return val + " Reais";  <--- This works
       // return this.currencyValue(val)  <--- This does not work
      },
    },

Des suggestions ?

Answer 1

Vous pouvez mettre chartOptions dans la méthode à la place des données. Ci-dessous le code de travail

const currencyValue = (val) => {
  return "R$" + val;
}

new Vue({
  el: "#app",
  data() {
    return {
      series: [450, 300, 500]
    }
  },
  methods: {
    chartOptions() {
      return {
        labels: ['Paid', 'Pending', 'Rejected'],
        plotOptions: {
            radialBar: {
                size: 165,
                offsetY: 30,
                hollow: {
                    size: '20%'
                },
                track: {
                    background: "#ebebeb",
                    strokeWidth: '100%',
                    margin: 15,
                },
                dataLabels: {
                    show: true,
                    name: {
                        fontSize: '18px',
                    },
                    value: {
                        fontSize: '16px',
                        color: "#636a71",
                        offsetY: 11
                    },
                    total: {
                        show: true,
                        label: 'Total',
                        formatter: function() {
                            return 42459
                        }
                    }
                }
            },
        },
        responsive: [{
            breakpoint: 576,
            options: {
                plotOptions: {
                    radialBar: {
                        size: 150,
                        hollow: {
                            size: '20%'
                        },
                        track: {
                            background: "#ebebeb",
                            strokeWidth: '100%',
                            margin: 15,
                        },
                    }
                }
            }
        }],
        colors: ['#7961F9', '#FF9F43', '#EA5455'],
        fill: {
            type: 'gradient',
            gradient: {
                // enabled: true,
                shade: 'dark',
                type: 'vertical',
                shadeIntensity: 0.5,
                gradientToColors: ['#9c8cfc', '#FFC085', '#f29292'],
                inverseColors: false,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100]
            },
        },
        stroke: {
            lineCap: 'round'
        },
        chart: {
            dropShadow: {
                enabled: true,
                blur: 3,
                left: 1,
                top: 1,
                opacity: 0.1
            },
        },
        tooltip: {
          x: {
            formatter: function (val) {
              return val;
            },
          },
          y: {
            formatter: function (val) {
              return currencyValue(val);
            },
          },
        },            
      }
    }
  },
  components: {
    VueApexCharts
  }
})

La méthode ne peut pas être appelée data 或 compulated 中调用，可以在 methods

Une chose qui doit être modifiée en HTML est la suivante

Answer 2

Le problème est que formatter 回调中的 this est une instance de graphique (pas une instance de composant) puisqu'elle est déclarée comme une fonction régulière.

La solution est d'utiliser des fonctions fléchées pour lier l'instance du composant comme contexte :

export default {
  methods: {
    currencyValue(value) {⋯},

    loadChartData() {
      ⋮
      this.chartOptions = {
        ⋮
        dataLabels: {
          ⋮
          // ❌ don't use regular function here
          //formatter: function(val) {
          //  return this.currencyValue(val)
          //},

          // ✅
          formatter: (val) => {
            return this.currencyValue(val)
          },
        },
      }
    }
  }
}

Violon mis à jour