Rumah > Soal Jawab > teks badan
Saya baru menggunakan carta vue dan apex, pada asasnya apa yang saya perlukan ialah memanggil kaedah daripada pilihan carta apex, saya mencipta fail yang menunjukkan masalah yang saya hadapi:
https://jsfiddle.net/wr3uo5va/
Saya perlukan dari chartOptions.dataLabels
调用方法 currencyValue
dataLabels: { enabled: true, offsetX: -25, formatter: function(val) { return val + " Reais"; <--- This works // return this.currencyValue(val) <--- This does not work }, },
Ada cadangan?
P粉6620895212024-03-28 15:58:45
Anda boleh meletakkan chartOptions
dalam kaedah dan bukannya data.
Di bawah ialah kod kerja
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
}
})
Kaedah tidak boleh dipanggil data
或 compulated
中调用,可以在 methods
Satu perkara yang perlu diubahsuai dalam html adalah seperti berikut
P粉0789451822024-03-28 14:22:20
Masalahnya ialah formatter
回调中的 this
ialah contoh carta (bukan contoh komponen) kerana ia diisytiharkan sebagai fungsi biasa.
Penyelesaian adalah menggunakan fungsi anak panah< /a> untuk mengikat contoh komponen sebagai konteks:
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) }, }, } } } }