在ApexCharts中,可以使用图例选项来创建多行图例。以下是一个使用ApexCharts库创建多行图例的示例代码:
// 引入ApexCharts库
import ApexCharts from 'apexcharts';
// 数据示例
const data = {
series: [
{ name: '系列1', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] },
{ name: '系列2', data: [23, 12, 54, 61, 32, 56, 81, 19, 34] },
{ name: '系列3', data: [12, 23, 55, 32, 15, 26, 37, 82, 91] },
{ name: '系列4', data: [32, 43, 65, 75, 32, 12, 54, 23, 65] }
],
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
};
// 创建图表的函数
function createChart() {
// 创建图表配置
const options = {
chart: {
type: 'line',
height: 350
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560'],
series: data.series,
xaxis: {
categories: data.categories
},
legend: {
show: true,
offsetY: 60,
itemMargin: {
horizontal: 3,
vertical: 10
}
}
};
// 创建图表
const chart = new ApexCharts(document.querySelector('#chart'), options);
// 渲染图表
chart.render();
}
// 调用创建图表的函数
createChart();
在上述示例代码中,我们创建了一个图表配置对象options
,其中定义了图表的类型、高度、系列数据、x轴分类数据以及图例的显示和样式。legend
选项中的offsetY
属性用于设置图例的垂直偏移量,itemMargin
属性用于设置图例项之间的间隔。
最后,我们创建了一个ApexCharts
实例,并将图表渲染到具有id“chart”的HTML元素中。
你可以根据自己的需求,调整图表的样式和配置,以创建适合你的多行图例。