vue3 Echarts图报错，求大佬指导？

Question

报错：series not exists. Legend data should be same with series name or data name

Echart图原地址：https://www.makeapie.cn/echarts_content/xBynm26qeZ.html

我的代码：
<div ref="chartRef" style="height: 600px; width: 100%; margin-top: 10px"></div>
//获取当前时间-24小时
let nows = new Date();
const hourArr = getLastDayHour(nows, 24);
function getLastDayHour(d, s) {

let result = [];
d.setHours(d.getHours()); // 获取到当前小时
for (var i = 0; i < s; i++) {
  d.setHours(d.getHours() - 1); // 每次循环一次 月份值减1
  var h: string = d.getHours();
  result.push(h < 10 ? '0' + h + ':00' : h + ':00');
}
return result.reverse();

}
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {

setOptions({
  title: {
    text: '时间段',
  },
  xAxis: {
    type: 'category',
    data: hourArr,
  },
  yAxis: {
    data: [1, 2, 3, 4, 5, 6, 7, 8],
  },
  tooltip: {
    show: true,
  },
  grid: {
    left: '12%',
    right: '10%',
  },
  series: [
    {
      name: '开始时间',
      type: 'bar',
      stack: '总量',
      barWidth: '20%',
      itemStyle: {
        normal: {
          color: 'rgba(0,0,0,0)',
        },
      },
      data: ['20:00', '08:00'],
    },
    {
      name: '结束时间',
      type: 'bar',
      stack: '总量',
      barWidth: '20%',
      itemStyle: {
        normal: {
          color: '#25B59E',
          borderRadius: 0, //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径
          shadowColor: 'rgba(0, 0, 0, 0)', //阴影颜色。支持的格式同color
          shadowBlur: 0, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
        },
      },
      data: ['22:00', '12:00'],
    },
  ],
});

});

Answer 1

差不多是这种？

option = {
  title: {
    text: '时间段',
  },
  xAxis: {
    type: 'time',
    interval:3600000,
    min: new Date("2016/01/01 12:00"),
    max: new Date("2016/01/02 12:00"),
    axisLabel:{
        formatter:(param)=>{
            const date0=new Date(param);
            return (date0.getHours() < 10 ? '0' : '') + date0.getHours()+":"+
                (date0.getMinutes() < 10 ? '0' : '') + date0.getMinutes()
        }
    }
  },
 
  yAxis: {
        data: ['1', '2','3','4','5'],
        
  },
  tooltip: {
        show :true,
        trigger: 'axis',
        formatter: function(params) {
             let res=params[0].name+"</br>"
             let date0=params[0].data;
             let date1=params[1].data;
             date0=(date0.getHours() < 10 ? '0' : '') + date0.getHours()+":"+
                (date0.getMinutes() < 10 ? '0' : '') + date0.getMinutes()
            date1=(date1.getHours() < 10 ? '0' : '') + date1.getHours()+":"+ 

            (date1.getMinutes() < 10 ? '0' : '') + date1.getMinutes()
             res+=params[0].seriesName+":"+date0+"</br>"
             res+=params[1].seriesName+":"+date1+"</br>"
            return res;
        }
    },
  grid: {
    left: '12%',
    right: '10%',
  },
  series: [
    {
        name: '开始时间',
        type: 'bar',
        stack: '总量',
        barWidth: '20%',
        itemStyle: {
            normal: {
                color: 'rgba(0,0,0,0)'
            }
        },
        data: [
            new Date("2016/01/01 20:00"),
            new Date("2016/01/02 8:00"),
        ]
    },
    {
        name: '结束时间',
        type: 'bar',
        stack: '总量',
        barWidth: '20%',
        data: [
            new Date("2016/01/01 22:00"),
            new Date("2016/01/02 12:00"),
         ]
    }
  ],
}