Echarts在线免费图表

 
                var legendData = [
        ['一月', '二月1', '三月1', '四月1'],
        ['一月', '二月', '三月', '四月']
      ],
      colorList = [
        ['#853C2C', '#96532F', '#A86B30', '#BC852E'],
        ['#845D4B', '#9C7764', '#B49281', '#CDAF9E']
      ];
    var arrAy = [
        [
          { series_name: '项目1', name: '完成', val: '53' },
          { series_name: '项目2', name: '完成', val: '41' }
        ],
        [
          { series_name: '项目1', name: '实施', val: '23' },
          { series_name: '项目2', name: '实施', val: '53' }
        ],
        [
          { series_name: '项目1', name: '储备', val: '53' },
          { series_name: '项目2', name: '储备', val: '19' }
        ],
        [
          { series_name: '项目1', name: '申报', val: '18' },
          { series_name: '项目2', name: '申报', val: '39' }
        ]
      ],
      series = []; 
    arrAy.forEach(function (item, ind) {
      item.forEach(function (i, index) {
        //ToDo data的第二个数据需要处理
        series.push({
          name: legendData[index][ind],
          type: 'bar',
          data: [i.val, i.val - 10],
          stack: i.name,
          color: colorList[index][ind]
        });
      });
    });
    
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      title: [
        {
          text: '重大项目',
          left: '2%',
          bottom: '8%'
        },
        { text: '其他项目', left: '2%', bottom: '2%' }
      ],
      legend: [
        {
          icon: 'circle',
          right: 'center',
          bottom: '8%',
          data: legendData[0],
          align:'left',
          textStyle: {
            backgroundColor: 'none',
            width: 30,
            textAlign:'left',
            overflow: 'truncate',
            ellipsis: ''
          }
        },
        {
          icon: 'circle',
          right: 'center',
          bottom: '2%',
          data: legendData[1],
          textStyle: {
            backgroundColor: 'none',
            width: 30, 
            overflow: 'truncate',
            ellipsis: ''
          }
        }
      ],
      grid: {
        left: '2%',
        bottom: '13%',
        containLabel: true
      },
      yAxis: [
        {
          name: '单位（万元）',
          nameTextStyle: {
            color: '#b3b5bb',
            alighn: 'end',
            padding: [0, 0, 0, -15]
          },
          nameGap: 30,
          type: 'category',
          axisTick: { show: false },
          axisLabel: { color: '#b3b5bb' },
          data: ['2022', '2023']
        }
      ],
      xAxis: [
        {
          type: 'value',
          axisLine: { show: false },
          axisTick: {
            show: false
          },
          position: 'top',
          // 修改y轴分割线
          splitLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          }
        }
      ],
      series: series
    };