关于前端:echarts-一个div生成多个图

53次阅读

共计 1552 个字符,预计需要花费 4 分钟才能阅读完成。

先上图,准没错。

如图共用一条时间轴(在最下方)

option = {
  grid: [{ left: '38px', right: '33px', top: '0px', height: '25%'},
    {left: '38px', right: '33px', top: '33%', height: '25%'}
  ],
  tooltip: {trigger: 'axis'},
  axisPointer: {link: {xAxisIndex: 'all'}
   },
  legend: {data: ['Vain', 'Vbin'],
    // textStyle: {
    //   color: '#fff'
    // }
  },
  xAxis: [
    {
      gridIndex: 0,
      boundaryGap: false,
      type: 'category',
      data: [
        '2021-08-03 16:38:46 508',
        '2021-08-03 16:39:46 508',
        '2021-08-03 16:40:46 508',
        '2021-08-03 16:41:46 508',
        '2021-08-03 16:42:46 508',
        '2021-08-03 16:43:46 508',
        '2021-08-03 16:44:46 508',
        '2021-08-03 16:45:46 508',
        '2021-08-03 16:46:46 508',
        '2021-08-03 16:47:46 508',
        '2021-08-03 16:48:46 508',
        '2021-08-03 16:48:46 508'
      ]
    },
    {
      gridIndex: 1,
      boundaryGap: false,
      type: 'category',
      data: [
        '2021-08-03 16:38:46 508',
        '2021-08-03 16:39:46 508',
        '2021-08-03 16:40:46 508',
        '2021-08-03 16:41:46 508',
        '2021-08-03 16:42:46 508',
        '2021-08-03 16:43:46 508',
        '2021-08-03 16:44:46 508',
        '2021-08-03 16:45:46 508',
        '2021-08-03 16:46:46 508',
        '2021-08-03 16:47:46 508',
        '2021-08-03 16:48:46 508',
        '2021-08-03 16:48:46 508'
      ]
    }
  ],
  yAxis: [{gridIndex: 0, type: 'value'},{gridIndex: 1,type: 'value'}],
  dataZoom: {
    show: true,
    start: 0,
    //  id:ids,
    background: '#425c86'
  },
  series: [
    {
      xAxisIndex: 0,
       yAxisIndex: 0,
      name: 'Vain',
      type: 'line',
      data: [
        -170.3, -189.6, -207.4, -223.4, -238.9, -251.8, -263.3, -275.2, -282.2,
        -294.3, -300.9, -306.8, -311.7, -315.1, -115.3, -213.6
      ]
    },
    {
      xAxisIndex: 1,
       yAxisIndex: 1,
      name: 'Vbin',
      type: 'line',
      data: [
        -207.4, -223.4, -238.9, -251.8, -263.3, -275.2, -282.2, -294.3, -300.9,
        -306.8, -311.7, -315.1, -115.3, -213.6
      ]
    }
  ]
};

其实就是写好 grid,多组。本人大略晓得这个图放哪里。
而后在 yAxis 和 xAxis 外面写好 gridIndex(这个属性就是通知你,示意这组数据要用第几个 grid)。
最初就是在 series 外面设置好 xAxisIndex,yAxisIndex. 原理就跟下面 gridindex 一样

正文完
 0