echarts-图表上下方展示数据(表格视觉)

需求：在echarts图表上下方需要展示数据，如效果图。一开始打算拆分两个表格在echarts图表上下方展示，但是找到了一个更绝妙的办法，就是利用echarts图表的多Y轴和多X轴，再加个左侧表格列，形成表格的视觉呈现。

效果：

要形成表格的效果，图表需要留有一定得距离

        grid: {
          left: '16%',
          bottom: DEVICES_SIZE == 'normal' ? '28.5%' : '29.8%',
          top: DEVICES_SIZE == 'normal' ? '20.8%' : '22.3%',
          // top: '17.5%',
          right: '1%'
        },复制

代码：

option：

const COLORS = ['#FF0000', '#00A5DB', '#4AC285'];
const CHART_STYLE = {
  textStyle: { color: '#333' },
  lineStyle: { color: '#2FB0B6' }
};     
 
 option: {
        //图表离容器的距离
        grid: {
          left: '16%',
          bottom: '28.5%',
          top: '17.5%',
          right: '1%'
        },
        // legend: {data: ['体温', '脉搏', '呼吸']}, //图例，此处不用
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        //x轴需要动态渲染数据，所以此处不配置
        xAxis: [],
        yAxis: [
          {
            type: 'value',
            // 空格为了单位与y轴对齐，暂时没有找到其他更好的方法
            name: '体温        \n(℃)       ',
            nameTextStyle: {
              //y轴上方单位的颜色
              color: '#000'
            },
            min: 34,
            max: 41,
            splitNumber: 9,
            offset: 5,
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false,
              lineStyle: { color: COLORS[0] }
            }
          },
          {
            type: 'value',
            // 空格为了单位与y轴对齐，暂时没有找到其他更好的方法
            name: '脉搏          \n(次/分)         ',
            nameTextStyle: {
              color: '#000'
            },
            min: 40,
            max: 180,
            splitNumber: 9,
            position: 'left',
            alignTicks: true,
            offset: 60,
            axisLine: {
              show: false,
              lineStyle: { color: COLORS[1] }
            }
          },
          {
            type: 'value',
            name: '呼吸        \n(次/分)       ',
            nameTextStyle: {
              color: '#000'
            },
            min: 10,
            splitNumber: 9,
            max: 80,
            position: 'left',
            alignTicks: true,
            offset: 120,
            splitLine: {
              show: true,
              lineStyle: CHART_STYLE.lineStyle
            },
            axisLine: {
              show: false,
              lineStyle: { color: COLORS[2] }
            }
          }
        ],
        series: []
      },复制

获取x轴数据

    getxAxisChart() {
      let xAxis = [];
 
      let offset =  [134, 105, 74, 0, 30, 60, 90, 120, 150, 180] 
      let vitalSignsTypeKey = [2, 18, 15, 22, 25, 13];
      let dateArr = this.chartArr.dateArr;
      this.leftColumn.map((item, index) => {
        let obj = {
          type: 'category',
           //前三个置于echarts图表上方
          position: [0, 1, 2].includes(index) ? 'top' : 'bottom',
          offset: offset[index],
          axisTick: { show: false },
          axisLabel: {
            inside: true,
            textStyle: CHART_STYLE.textStyle
          },
          axisLine: {
            lineStyle: CHART_STYLE.lineStyle
          },
          splitLine: {}
        };
        if (index == 0) {
          // 增加刻度线做分组
          let obj1 = {
            axisTick: {
              length: DEVICES_SIZE == 'normal' ? -134 : -108,
              // length: -160,
              show: true
            },
            axisLabel: {
              show: true,
              inside: true,
              fontWeight: 'bold',
              align: 'center',
              textStyle: CHART_STYLE.textStyle,
              interval: function(index, value) {
                return dateArr[index] != dateArr[index - 1] ? true : false;
              }
            },
            data: this.chartArr.dateArr
          };
          obj = { ...obj, ...obj1 };
        } else if (index == 1) {
          obj.data = this.chartArr.inpatientTimeArr;
        } else if (index == 2) {
          obj.data = this.chartArr.timeArr.map(item => {
            let str = item.split('/');
            return str[1] == 'AM' ? '上午\n' + str[2] : '下午\n' + str[2];
          });
          // 增加网格线
          obj.splitLine.show = true;
          obj.splitLine.lineStyle = CHART_STYLE.lineStyle;
        } else if (index == 3) {
          let obj1 = {
            axisTick: {
              length: DEVICES_SIZE == 'normal' ? 180 : 147, // 延长刻度线做分组线
              // length: 250, // 延长刻度线做分组线
              lineStyle: CHART_STYLE.lineStyle
            },
            axisLine: { show: true, lineStyle: CHART_STYLE.lineStyle },
            axisLabel: {
              show: false,
              align: 'center',
              interval: function(index, value) {
                if (dateArr[index] != dateArr[index - 1]) return true;
                else return false;
              }
            },
            data: this.chartArr.dateArr
          };
          obj = { ...obj, ...obj1 };
        } else {
          obj.data = this.getChartValues(vitalSignsTypeKey[index - 4]);
        }
        // xAxis第一个为图表默认基准轴
        index == 2 ? xAxis.unshift(obj) : xAxis.push(obj);
      });
      return xAxis;
    },复制