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