以下是代码示例,其中包含更改图表设置的选项:
var options = {
chart: {
type: 'donut',
height: 350,
width: '100%',
radius: '70%',
innerRadius: '50%',
startAngle: -90,
endAngle: 270
},
plotOptions: {
pie: {
size: '85%',
donut: {
labels: {
show: true,
name: {
show: true,
fontSize: '22px',
fontFamily: 'Helvetica, Arial, sans-serif',
color: undefined,
offsetY: -10
},
value: {
show: true,
fontSize: '20px',
fontFamily: 'Helvetica, Arial, sans-serif',
color: '#3e5569',
offsetY: 10,
formatter: function (val) {
return val
}
},
total: {
show: true,
showAlways: false,
label: 'Total',
fontSize: '22px',
fontFamily: 'Helvetica, Arial, sans-serif',
color: '#373d3f',
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b
}, 0)
}
}
}
}
}
},
series: [44, 55, 41, 17, 15],
labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'Pomegranate']
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
上一篇:APEX动态动作不复制值