echarts 自定义柱状图下添加表格

 需求：统计数据，页面实现图+表的样式，方便做汇报时直接截图页面，放到PPT中

实现效果图：

实现代码：

var data = [
  { Name: 'aa', value1: 15, value2: 30, value3: 10 },
  { Name: 'bb', value1: 77, value2: 55, value3: 22 },
  { Name: 'cc', value1: 69, value2: 10, value3: 60 },
  { Name: 'dd', value1: 20, value2: 20, value3: 90 },
  { Name: 'ee', value1: 68, value2: 34, value3: 45 },
  { Name: 'ff', value1: 10, value2: 30, value3: 50 },
  { Name: 'gg', value1: 30, value2: 40, value3: 40 },
 
];

function getTableLine(num) {
  var list = [];
  var bottom = 75; 
  var height = 25;
  for (var i = 0; i < num; i++) {
    list.push({
      type: 'line',
      bottom: bottom - i * height,
      right: 60,
      style: {
        fill: '#fff',
        stroke: 'red'
      },
      shape: {
        x1: 0,
        y1: 0,
        x2: 9999,
        y2: 0
      }
    });
  }
  return list;
}
var lineList = getTableLine(5); //计算渲染条线数
lineList.push({
  type: 'line',
  bottom: 0,
  left: 0,
  style: {
    fill: '#fff',
    stroke: 'red'
  },
  shape: {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 75
  }
});

var names = [],
  ya = [],
  item1 = [],
  item2 = [];
if (data == null) data = [];
for (var i = 0; i < data.length; i++) {
  names.push(data[i].Name);
  ya.push(data[i].value1);
  item1.push(data[i].value2);
  item2.push(data[i].value3);
}

var option = {
  legend: [{},{
    left:10,
    bottom:2,
    orient:'vertical',
    formatter: function (name) {
        return '' ;
    }
  }],

  backgroundColor: 'transparent',
  grid: { left: 60, right: 60, bottom: 100 },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      type: 'category',
      data: names,
      axisTick: {
        length: 190 
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
        }
      },
      axisLabel: {
        margin: 0,
        interval: 0,
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (value, index) {
          var indexNum = 0;
          for (var i = 0; i < names.length; i++) {
            if (value === names[i]) {
              indexNum = i;
            }
          }
          return (
            '{table|' +
            value +
            '}\n{table|' +
            ya[indexNum] +
            '}\n{table|' +
            item1[indexNum] +
            '}\n{table|' +
            item2[indexNum] +
            '%}\n{table|' +
            '}'
          );
        },
        rich: {
          table: {
            height: 25,
            align: 'center',
            verticalAlign: 'middle'
          }
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      boundaryGap: ['0%', '50%'],
      axisLine: {
        lineStyle: {
          type: 'solid',
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    {
      type: 'value',
      min: 0,
      max: 100,
      boundaryGap: ['0%', '20%'],
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: 'blue', //左边线的颜色
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  graphic: lineList, //table
  series: [
    {
      data: ya,
      name: 'A计划',
      type: 'bar',
      yAxisIndex: 0,
      label: {
        show: true,
        position: 'top',
        formatter: function (params) {
          if (params.value > 0) {
            return params.value;
          } else {
            return '';
          }
        }
      },
      barMaxWidth: 40, // 最大宽度
      itemStyle: {
        emphasis: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    },
    {
      data: item1,
      name: 'B计划',
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        formatter: function (params) {
          if (params.value > 0) {
            return params.value;
          } else {
            return '';
          }
        }
      }
    },
    {
      data: item2,
      name: 'C计划',
      type: 'line',
      yAxisIndex: 1,
      label: { normal: { show: true, position: 'top', formatter: '{c}%' } }
    }
  ]
};