echarts记录篇(四)：堆积图记录

(data) => {
    console.log("data:")
    console.log( data);
 if(data){
    var bw = 30;
    var itemGap = 10;
    var categories1 = [];
    var categories2 = [];
    var categories3 = [];
    var categories4 = [];
    var categories5 = [];
    var categories6 = []; 
    var name = [];
    var data1 = [];
    var data2 = [];
    var data3 = [];
    var data4 = [];
    var data5 = [];
    var data6 = []; 
    for (var i = 0; i < data.length; i++) {
      if (name.indexOf(data[i]["pur_yr"]) == -1) {
        name.push(data[i]["pur_yr"]);
      }
    }
    console.log(name);
    for (var i = 0; i < data.length; i++) {
      if (name[0] == data[i]["pur_yr"]) {
        categories1.push(data[i]["pur_org_no"]);
      } else if (name[1] == data[i]["pur_yr"]) {
        categories2.push(data[i]["pur_org_no"]);
      } else if (name[2] == data[i]["pur_yr"]) {
        categories3.push(data[i]["pur_org_no"]);
      } else if (name[3] == data[i]["pur_yr"]) {
        categories4.push(data[i]["pur_org_no"]);
      } else if (name[4] == data[i]["pur_yr"]) {
        categories5.push(data[i]["pur_org_no"]);
      } 
    }
    console.log(categories1)
  console.log(categories2) 
    console.log(categories3) 
    console.log(categories4) 
    console.log(categories5)
    console.log(categories6)

    for (var i = 0; i < data.length; i++) {
      if (name[0] == data[i]["pur_yr"]) {
        data1.push(data[i]["pur_mth_amt"]);
      } else if (name[1] == data[i]["pur_yr"]) {
        data2.push(data[i]["pur_mth_amt"]);
      } else if (name[2] == data[i]["pur_yr"]) {
        data3.push(data[i]["pur_mth_amt"]);
      } else if (name[3] == data[i]["pur_yr"]) {
        data4.push(data[i]["pur_mth_amt"]);
      } else if (name[4] == data[i]["pur_yr"]) {
        data5.push(data[i]["pur_mth_amt"]);
      } 


    }
 }
  
  
  console.log("data1:"+data1);
  console.log("data2:"+data2);
  console.log("data3:"+data3);
  console.log("data4:"+data4);
  console.log("data5:"+data5);
  console.log("data6:"+data6);
      if(data && data.length>0){
        return {
            grid: {
              top: "5%",
              right: "5%",
              left: "5%",
              bottom: "15%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
                label: {
                  show: false,
                  backgroundColor: "#6a7985",
                },
              },
              formatter: function (params) {
                //console.log(params,'另嘉园嘉园')
                 console.log(params, '另嘉园嘉园')
                 console.log("params[1].data:::"+params[1].data)
                    let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
      
                    if (params) {
                      if (params[1] && params[1].data == '0') {
                        var noData1 = ''
                        noData1 = `style='display:none'`
                      } if (params[2] && params[2].data == '0') {
                        var noData2 = ''
                        noData2 = `style='display:none'`
                      }
                      if (params[3] && params[3].data == '0') {
                        var noData3 = ''
                        noData3 = `style='display:none'`
                      }
                      if (params[4] && params[4].data == '0') {
                        var noData4 = ''
                        noData4 = `style='display:none'`
                      }
                      if (params[5] && params[5].data == '0') {
                        var noData5 = ''
                        noData5 = `style='display:none'`
                      } 
                      return `
                      <div>${params[0].name}</div>
                      <div>总数：${(params[0] ? (params[0].data * 1).toLocaleString() : '暂无数据')}</div>
                      <div class='data4' ${noData4}>${circle}#2382E9"></span>博士：${    (params[4]  &&  params[4].data != '0'? ( params[4].data * 1).toLocaleString() : '0')}</div>
                      <div class='data3' ${noData3}>${circle}#00CBB4"></span>硕士：${    (params[3]  &&  params[3].data != '0'? ( params[3].data * 1).toLocaleString() : '0')}</div>
                      <div class='data2' ${noData2}>${circle}#8CFFF0"></span>本科：${    (params[2]  &&  params[2].data != '0'? ( params[2].data * 1).toLocaleString() : '0')}</div> 
                      <div class='data1' ${noData1}>${circle}#CE769B"></span>本科以下：${(params[1] &&   params[1].data != '0' ? (params[1].data * 1).toLocaleString() : '0')}</div> 
                    `
                    } 
              },
            },
            legend: {
              itemGap: itemGap,
              data: [name[0], name[1], name[2], name[3] ],
              bottom: "bottom",
              textStyle: {
                fontWeight: "normal",
                color: "#fff",
              },
              itemWidth: 20, // 图例标记的图形宽度。
              itemHeight: 20,
            },
            xAxis: {
              data: categories1,
              axisLabel: {
                show: true,
                fontSize: 12,
                color: "#fff",
                rotate: 0, // 文本旋转角度
              },
              axisLine:{  
               show:true,
                      lineStyle:{
                          color:'#fff',
                          width:1,
                      }
                      
                  },
              axisTick: {
                show: true,
              },
              splitLine: {
                //修改背景线条样式
                show: false,
              },
            },
            yAxis: {
                            max: function (value) {
                if(value.max<=10){
                    return 10;
                }
              },
              minInterval:1,
              axisLabel: {
                fontSize: 12,
                color: "#fff",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                //修改背景线条样式
                show: false,
              },
            },
            series: [
              {
                name: name[4],
                type: "line",
                //stack: "y",
                data: data5,
                barWidth: bw,
                barGap: "-10%",
                symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
                label: {
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize:12,
                  formatter: (res) => {
                    return (res.value * 1).toLocaleString();
                  },
                },
                itemStyle: {
                  normal: {
                    color: "rgba(1,1,1,0)",
                    barBorderRadius: [0, 0, 0, 0],
                  },
                },
              },
              /*{
                name: name[5],
                // type: "bar",
                //stack: "total",
                data: data6,
                barWidth: bw,
                type: "line",
                symbol: 'none', 
                symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
                showSymbol: false, // 不显示symbol不显示
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    barBorderRadius: [0, 0, 0, 0],
                  },
                },
                lineStyle: {
                    width: 0, // 线宽是0不显示线
                    color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                },
                emphasis:{ // 鼠标经过时：
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)'
                    }
              },
              */
              {
                  name: name[3],
                  type: "bar",
                  stack: "total",
                  data: data4,
                  barWidth: bw,
                  itemStyle: {
                    normal: {
                      color: "#CE769B",
                      barBorderRadius: [0, 0, 0, 0],
                    },
                  },
                },
              {
                  name: name[2],
                  type: "bar",
                  stack: "total",
                  data: data3,
                  barWidth: bw,
                  itemStyle: {
                    normal: {
                      color: "#8CFFF0",
                      barBorderRadius: [0, 0, 0, 0],
                    },
                  },
                },
              {
                  name: name[1],
                  type: "bar",
                  stack: "total",
                  data: data2,
                  barWidth: bw,
                  itemStyle: {
                    normal: {
                      color: "#00CBB4",
                      barBorderRadius: [0, 0, 0, 0],
                    },
                  },
                },
              {
                name: name[0],
                type: "bar",
                stack: "total",
                data: data1,
                barWidth: bw,
                itemStyle: {
                  normal: {
                    color: "#2382E9",
                    barBorderRadius: [0, 0, 0, 0],
                  },
                },
              } 
            ],
          };
      }else{
        return {
            title: {
                text: '无相关数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 16,
                  fontWeight: 'normal',
                  color: "#fff"
                }
              },
              series: [
                {
                  data: null
                }
              ] 
        } 
      }
    };