后端返回前端两个同类型的对象数组希望以其中的时间为横坐标countNum为纵坐标生成对比柱状图
可以使用类似于以下代码的方式来生成对比柱状图:
// 假设后端返回的数据为data1和data2
const data1 = [{time: '2022-01-01', countNum: 10}, {time: '2022-01-02', countNum: 20}, {time: '2022-01-03', countNum: 30}];
const data2 = [{time: '2022-01-01', countNum: 15}, {time: '2022-01-02', countNum: 25}, {time: '2022-01-03', countNum: 35}];
// 将时间解析为Date对象
const dates = data1.map(item => new Date(item.time));
// 获取纵坐标数据
const yData1 = data1.map(item => item.countNum);
const yData2 = data2.map(item => item.countNum);
// 使用echarts绘制柱状图
const chart = echarts.init(document.getElementById('chart-container'));
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['数据1', '数据2']
},
xAxis: {
type: 'category',
data: dates.map(date => date.toLocaleDateString()) // 将时间转换为字符串
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据1',
type: 'bar',
data: yData1
},
{
name: '数据2',
type: 'bar',
data: yData2
}
]
};
chart.setOption(option);
需要注意的是,echarts的x轴数据通常为字符串类型,因此需要将时间转换为字符串。另外,如果两个数组的时间顺序不同,需要先将它们按时间顺序排序。
原文地址: http://www.cveoy.top/t/topic/bwX5 著作权归作者所有。请勿转载和采集!