要在ApexCharts的简单环形图中添加一个数字,你可以使用ApexCharts的dataLabels
选项。下面是一个代码示例:
// 导入ApexCharts库
import ApexCharts from 'apexcharts';
// 创建一个简单环形图的实例
const chart = new ApexCharts(document.querySelector("#chart"), {
series: [44, 55, 41, 17, 15],
labels: ['A', 'B', 'C', 'D', 'E'],
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'],
chart: {
type: 'donut'
},
// 在环形图中添加数字的配置
dataLabels: {
enabled: true,
formatter: function (val) {
return val;
},
style: {
fontSize: '14px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
colors: ['#000000']
}
}
});
// 渲染图表
chart.render();
在上面的代码示例中,我们通过dataLabels
选项启用了数据标签,并使用formatter
函数来将值直接返回作为标签。我们还设置了标签的样式,包括字体大小、字体家族、字体粗细和颜色。
你可以根据自己的需求自定义formatter
函数来对值进行格式化,例如添加百分号或其他符号。
希望这个代码示例对你有帮助!