可以使用类似于以下代码的方式来生成对比柱状图:

// 假设后端返回的数据为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轴数据通常为字符串类型,因此需要将时间转换为字符串。另外,如果两个数组的时间顺序不同,需要先将它们按时间顺序排序。

后端返回前端两个同类型的对象数组希望以其中的时间为横坐标countNum为纵坐标生成对比柱状图

原文地址: http://www.cveoy.top/t/topic/bwX5 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录