echarts 堆叠柱形图 js vue 数据组装

如图所示：

2.js 代码：

  let data1 = [];
        let dataTitle = [];
        let ser1 = [];
        
        res.data.data.sort(this.sortId).splice(0, 1);
        res.data.data = [
          {
            showTime: "2021-08-21 01:00:00",
            showname: "微博1",
            todayComments: 0,
            totalComments: 12,
          },
           {
            showTime: "2021-08-21 02:00:00",
            showname: "微博2",
            todayComments: 0,
            totalComments: 4,
          },
           {
            showTime: "2021-08-21 03:00:00",
            showname: "微博3",
            todayComments: 0,
            totalComments: 3,
          }, {
            showTime: "2021-08-21 02:00:00",
            showname: "微博1",
            todayComments: 0,
            totalComments: 2,
          },
           {
            showTime: "2021-08-21 03:00:00",
            showname: "微博2",
            todayComments: 0,
            totalComments: 6,
          },
           {
            showTime: "2021-08-21 08:00:00",
            showname: "微博4",
            todayComments: 0,
            totalComments: 14,
          }
        ];

        res.data.data.forEach((item) => {
          if (data1.indexOf(item.showTime.split(" ")[1].split(":")[0]) < 0) {
            data1.push(item.showTime.split(" ")[1].split(":")[0]);
          }
          dataTitle.push(item.showname);
          let serB = {
            name: item.showname,
            type: "bar",
            symbol: "none",
            stack: "正",
            itemStyle: {
              //color: this.myColor[Math.random()*this.myColor.length-1],
            },
            barWidth: 6,
            data: [],
          };
          serB.data[data1.indexOf(item.showTime.split(" ")[1].split(":")[0])] =
            item.totalComments;
          if (ser1.find((v) => v.name == item.showname) == undefined) {
            ser1.push(serB);
          }else{
            ser1.find(v=>v.name == item.showname).data[data1.indexOf(item.showTime.split(" ")[1].split(":")[0])] =item.totalComments
          }
        });


        this.data1 = data1;
        this.dataTitle = dataTitle;
        this.series1 = ser1;
        // this.topicProgressList = res.data.data
        // for(let i in this.topicProgressList){
        //   this.topicProgressTime.push(this.topicProgressList[i].showTime)
        //   this.topicProgressName.push(this.topicProgressList[i].showname)
        // }
        this.topicProgressEcharts();

3.echarts 代码：

//事件进展曲线
    topicProgressEcharts() {
      let myChart = echarts.init(
        document.getElementById("topicProgressEcharts")
      );
      let option = {
        grid: {
          left: 16,
          right: "1%",
          bottom: 10,
          containLabel: true,
        },
        legend: [
          {
            icon: "circle",
            left: "25%",
            align: "left",
            top: "1%",
            itemWidth: 7, // 设置宽度class
            itemHeight: 7, // 设置高度im
            itemGap: 40, // 设置间距im
            textStyle: {
              color: "#AAAAAA",
            },
            data: this.dataTitle,
          },
        ],
        xAxis: {
          type: "category",
          data: this.data1,
          borderColor: "#D8D8D8",
          axisLine: {
            lineStyle: {
              color: "#D8D8D8",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#CCCCCC",
              fontSize: 12,
            },
          },
          splitLine: {
            lineStyle: {
              color: "#E5E5E5",
              type: "dashed",
            },
          },
        },
        series: this.series1,
      };
      myChart.setOption(option);
    }

vue数据返回：
在vue 的data方法中 新增属性 data1 dataTitle ser1;