如何使用 vue.js 从 ApexChart 的选项中调用方法

Question

我是 vue 和 apex 图表的新手，基本上我需要的是从 apex 图表选项调用方法，我创建了一个显示我遇到的问题的文件：

https://jsfiddle.net/wr3uo5va/

我需要调用方法currencyValue chartOptions.dataLabels

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

有什么建议吗？

Answer 1

问题是 formatter 回调中的 this 是图表实例（而不是组件实例），因为它被声明为常规函数。

解决方案是使用箭头函数将组件实例绑定为上下文：

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)
          },
        },
      }
    }
  }
}

更新的 fiddle

Answer 2

您可以将ChartOptions放入方法而不是数据中。
以下是工作代码

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

无法在数据或计算中调用方法，可以在方法中调用

在HTML中要修改的一件事在下面

<vue-apex-charts
   type="donut"
   :options="chartOptions()"
   :series="series">
</vue-apex-charts>