Echarts在线免费图表

 
            option = {
  color: ['#afabab', '#93beff', '#ffc63a', '#1d4edf', '#383b96'],
  legend: {
    data: ['1年内', '1-3年', '3-5年', '5-10年', '10年以上'],
    itemGap: 15,
    itemWidth: 10, // 设置宽度
    itemHeight: 10,
    top: '40',
    right: '30',
    textStyle: {
      color: '#595959'
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '5%',
    top: '12%',
    containLabel: true
  },
  xAxis: [
    {
      name: '月份',
      type: 'category',
      axisTick: {
        alignWithLabel: false
      },
      axisLabel: {
        padding: [25, 0, 0, 0]
      },
      data:['1年内', '1-3年', '3-5年', '5-10年', '10年以上']
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: function (params) {
          return params + '%';
        }
      }
    }
  ],
  series: []
};

var datas = [
  [
    [1, 1, 1, 2, 3],
    [2, 5, 7, 1, 1],
    [5, 7, 5, 1, 1],
    [7, 5, 6, 1, 1],
    [5, 6, 5, 1, 1],
  ],
  [
    [1, 1, 1, 2, 3],
    [2, 5, 7, 1, 1],
    [5, 7, 5, 1, 1],
    [7, 5, 6, 1, 1],
    [5, 6, 5, 1, 1],
  ],
  [
    [1, 1, 1, 2, 3],
    [2, 5, 7, 1, 1],
    [5, 7, 5, 1, 1],
    [7, 5, 6, 1, 1],
    [5, 6, 5, 1, 1],
  ]
];

// 变量和循环处理
var categories = ['1年内', '1-3年', '3-5年', '5-10年', '10年以上'];
var years = ['2020', '2021'];
for (var i = 0; i < years.length; i++) {
  var year = years[i];
  var yearData = datas[i]; // 获取对应年份的数据
  var seriesData = []; // 用于存储每个年份对应的系列数据
  for (var j = 0; j < categories.length; j++) {
    var itemData = [];
    for (var k = 0; k < yearData[j].length; k++) {
      itemData.push(yearData[j][k]);
    }
    seriesData.push({
      type: 'bar',
      stack: 'stack' + (i + 1),
         barGap:0.5,
      barWidth:25,
      label:{
        show:true,
         position:'insideTop',
         align:'center',
        formatter:function(param){
          
          return param.value+'%'
        }
      },
      data: itemData,
      name: categories[j]
    });
  }
  option.series.push({
    type: 'bar',
    stack: 'stack' + (i + 1),
    data: [0, 0, 0, 0, 0],
    label: {
      show: true,
      formatter: year,
      position: 'bottom'
    }
  });
  Array.prototype.push.apply(option.series, seriesData);
}