echarts 一个div生成多个图

我只是一个渣渣

先上图,准没错。

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

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一样

阅读 215

人如其名,一个还徘徊在前端入门门前的一个切图仔

278 声望
3 粉丝
0 条评论
你知道吗?

人如其名,一个还徘徊在前端入门门前的一个切图仔

278 声望
3 粉丝
文章目录
宣传栏