需求描述

如下图，在柱状图与折线图结合的图表，底部需要使用表格展示柱状图与折线图的数据。

具体代码实现

export function getAnalysisData(data) {
  const xa = (data && data.xAxisData) || [];
  const ya1 = (data && data.yAxisData) || [];
  const ya2 = (data && data.yAxisData2) || [];
  const ya3 = (data && data.yAxisData3) || [];
  const linelist = getTableLine(5); //表格要渲染几条横线则number写几
  linelist.push({
    type: 'line', //类型
    bottom: 0,
    left: 0,
    style: {
      fill: '#fff', //填充色
      stroke: '#366CB3', //笔画颜色
    },
    shape: {
      x1: 0, //开始点的 x 值
      y1: 0, //开始点的 y 值
      x2: 0, //结束点的 x 值
      y2: 75, //结束点的 y 值
    },
  });
  return {
    title: {
      text: '',
      textStyle: {
        fontWeight: 600,
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      feature: {
        restore: { show: true },
        saveAsImage: { show: true, backgroundColor: '#fff' },
      },
    },
    legend: [
      {
        data: ['入职人数', '离职人数', '离职率'],
        left: 30,
        bottom: 0,
        width: 35,
        orient: 'horizontal',
        itemGap: 13,
        textStyle: {
          width: 35,
          height: 25,
          overflow: 'truncate',
        },
      },
    ],
    grid: { left: '10%', right: 60, bottom: 100 },
    xAxis: {
      data: [],
      type: 'category',
      axisTick: {
        show: true,
        length: 150, //刻度竖线长度
        lineStyle: {
          color: '#366CB3', //刻度线样式
        },
      },
      axisLine: {
        lineStyle: {
          type: 'solid', // 线的类型
        },
      },
      axisPointer: {
        type: 'shadow', //阴影指示器
      },
      axisLabel: {
        margin: 0,
        integral: 0,
        rotate: 0,
        formatter(value, index) {
          //使用函数模板，显示表格每列的数据
          let indexNum = 0;
          for (let i = 0; i < xa.length; i++) {
            if (value === xa[i]) {
              indexNum = i;
            }
          }
          return `{table|${value}}\n{table|${ya1[indexNum]}}\n{table|${ya2[indexNum]}}\n{table|${ya3[indexNum]}%}\n{table|}`;
        },
        rich: {
          //富文本标签
          table: {
            //设置表格样式
            height: 25,
            align: 'center',
            verticalAlign: 'middle',
          },
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '人数',
      },
      {
        type: 'value',
        name: '离职率（%）',
      },
    ],
    graphic: linelist,
    series: [
      {
        name: '入职人数',
        type: 'bar',
        clickable: false,
        data: [200, 250, 180, 320, 160, 200],
      },
      {
        name: '离职人数',
        type: 'bar',
        clickable: false,
        data: [200, 250, 180, 320, 160, 200],
      },
      {
        name: '离职率',
        type: 'line',
        yAxisIndex: 1,
        clickable: false,
        data: [20, 25, 18, 32, 16, 20],
      },
    ],
  };
}

function getTableLine(num) {
  const [bottom, height, list] = [75, 25, []];
  for (let i = 0; i < num; i++) {
    list.push({
      type: 'line',
      bottom: bottom - i * height,
      right: 60,
      style: {
        fill: '#fff', //填充色
        stroke: '#366CB3', //笔画颜色
      },
      shape: {
        x1: 0, //开始点的 x 值
        y1: 0, //开始点的 y 值
        x2: 9999, //结束点的 x 值
        y2: 0, //结束点的 y 值
      },
    });
  }
  return list;
}