让崩塌的echarts图像变得好看

让崩塌的echarts图像变得好看

主要是改变了传入series的数据

var actualHeight = [
    [['2023-04-02',143],['2023-04-07',136],['2023-04-08',139],['2023-04-11',141],['2023-04-12',149],['2023-04-14',150]],
    [['2023-04-04',351],['2023-04-07',325],['2023-04-08',327],['2023-04-09',318],['2023-04-12',314]],
    [['2023-04-01',214],['2023-04-02',221],['2023-04-03',244],['2023-04-04',271],['2023-04-05',264],['2023-04-08',283],['2023-04-09',281],['2023-04-10',266],['2023-04-11',264],['2023-04-12',269],['2023-04-13',285],['2023-04-15',290]],
    
]
var a = ['2023-04-01','2023-04-02','2023-04-03','2023-04-04','2023-04-05','2023-04-06','2023-04-07','2023-04-08','2023-04-09','2023-04-10','2023-04-11','2023-04-12','2023-04-13','2023-04-14','2023-04-15']
var nName = ['香蕉', '牛奶', '蜜桃']
// var iName = 0
/**
 * 获取两个日期之间的所有日期
 */
var tQuantum = []; // 给日期创建容器
Date.prototype.format = function() {
  var s = '';
  var mouth = (this.getMonth() + 1)>=10?(this.getMonth() + 1):('0'+(this.getMonth() + 1));
  var day = this.getDate()>=10?this.getDate():('0'+this.getDate());
  s += this.getFullYear() + '-'; // 获取年份。
  s += mouth + "-"; // 获取月份。
  s += day; // 获取日。
  return (s); // 返回日期。
};

function getAll(start, end) {
  var ab = start.split("-");
  var ae = end.split("-");
  var db = new Date();
  db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
  var de = new Date();
  de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
  var unixDb = db.getTime();
  var unixDe = de.getTime();
  for (var k = unixDb; k <= unixDe;) { 
    var nDate = (new Date(parseInt(k))).format()
    // 把日期传入准备好的容器中
    tQuantum.push(nDate);      
    k = k + 24 * 60 * 60 * 1000;
  }
}

// 把时间戳转换为日期格式
function getdateNoTime(date) {
  var now = new Date(date),
    y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate();
  return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
}

var chartData = [] // 给echarts数据准备的容器
// 补全一段数组
for(var u = 0; u < actualHeight.length; u++) {
    var start = actualHeight[u][0][0]
    var end = actualHeight[u][actualHeight[u].length-1][0]
    tQuantum = [] // 避免产生重复值
    getAll(start, end) // 产生完整日期数组
    var b = [] // 残缺日期的数组
    actualHeight[u].forEach(function(iItem) {
      b.push(iItem[0])
    })    
    // 补上空缺日期，并设置日期为0
    for(let i = 0; i < tQuantum.length; i++) {
      if(tQuantum[i] !== b[i]) {
        b.splice(i,0,tQuantum[i])
        actualHeight[u].splice(i,0,[tQuantum[i], 0])
      }
    }
    // 补上数据为0的数据
    for(var i = 0; i < actualHeight[u].length; i++) {
        for(let j = i+1; j < actualHeight[u].length; j++){
            if(actualHeight[u][j][1] !== 0 && actualHeight[u][i][1] == 0) {
                actualHeight[u][i][1] = actualHeight[u][j][1]
            }
        }
        for(let k = actualHeight[u].length-1; k > 1; k--){
            // console.log(a[k][1]);
            if(actualHeight[u][k][1] !== 0 && actualHeight[u][i][1] == 0) {
                actualHeight[u][i][1] = actualHeight[u][k][1]
            }
        }
    }
    // console.log(actualHeight);
    
}
// 设置显示格式
/**
 * 思路（瞎编个思路【狗头🐶】）：
 * 1. 如果下层没有数据就补下层每层第一个数据
 * 2. 如果上层没数据下层有数据就补上层最后一个数据
*/
// 真正的实现过程
// 从上往下检测
for(var u = actualHeight.length-1; u >= 0; u--) {
  // 从前往后，检测所有下层比这一层日期大就加上大的这层数据
  for(var j = 0; j < actualHeight[u].length; j++) {
    for(var k = 1; k <= u; k++) {
      if(actualHeight[u-k] !== undefined) {
        if(actualHeight[u-k][0][0] > actualHeight[u][j][0]) {
          actualHeight[u][j][1] += actualHeight[u-k][0][1];
        } else {
          break
        }
      }      
    }
  }
}

// 后面的
for(var u = 0; u < actualHeight.length; u++) {
  // 补上相对于下层，上层后边缺失的日期
  if(actualHeight[u+1] !== undefined && actualHeight[u][actualHeight[u].length-1][0] > actualHeight[u+1][actualHeight[u+1].length-1][0]) {
    var  dStart = Date.parse(actualHeight[u+1][actualHeight[u+1].length-1][0]);
    var  dEnd = Date.parse(actualHeight[u][actualHeight[u].length-1][0]);
    var days = (dEnd - dStart)/(1*24*60*60*1000);
    var tStamp = new Date(actualHeight[u+1][actualHeight[u+1].length-1][0])
    
    for(var j = 0; j < days; j++) {
      tStamp = tStamp.setDate(tStamp.getDate()+1);
      tStamp = new Date(tStamp);
      console.log(tStamp);
      actualHeight[u+1].push([getdateNoTime(tStamp), actualHeight[u+1][actualHeight[u+1].length-1][1]])
    }  
  }
}

for(var u = actualHeight.length-1; u >= 0; u--) {
  // 基于执行顺序，不能和上面代码合并
  // 从后往前，检测所有下层比这一层日期小就加上小的这层数据
  for(var j = actualHeight[u].length-1; j >= 0; j--) {
    for(var k = 1; k <= u; k++) {
      if(actualHeight[u-k] !== undefined) {
        if(actualHeight[u][j][0] > actualHeight[u-k][actualHeight[u-k].length-1][0]) {
          actualHeight[u][j][1] += actualHeight[u-k][actualHeight[u-k].length-1][1]
        } else {
          break
        }
      }
    }
  }  
}
console.log(actualHeight);

// 传进echarts图表
for(var u = 0; u < actualHeight.length; u++) {
  chartData.push({
    name: nName[u],
    type: 'line',
    stack: 'Total',
    smooth: 0,
    showSymbol: true,
    areaStyle: {},
    emphasis: {
        focus: 'series'
    },
    data: actualHeight[u]
  })  
}

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['0', '1', '2']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: a
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: chartData
};
option && myChart.setOption(option);

成品图如下：