JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

同一个echart上画多个折线图

2024. 04. 15    

同一个echart上画多个折线图

同一个echart上画多个折线图

option = {
  xAxis: [
    {
      type: 'category',
      gridIndex: 0,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      type: 'category',
      gridIndex: 1,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      type: 'category',
      gridIndex: 2,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }],
  grid: [
    {
      x: '5%',
      y: '25%',
      width: '25%',
      height: '75%',
      containLabel: true
    },
    {
      x: '32.5%',
      y: '25%',
      width: '30%',
      height: '75%',
      containLabel: true
    },
    {
      x2: '5.25%',
      y: '25%',
      width: '30%',
      height: '75%',
      containLabel: true
    }
  ],
  series: [
    {
      data: [150, 230, 24, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [10, 23, 22, 18, 15, 17, 20],
      type: 'line',
      xAxisIndex: 1, yAxisIndex: 1
    },
    {
      data: [1500, 2300, 2204, 2108, 1305, 1407, 2060],
      type: 'line',
      xAxisIndex: 2, yAxisIndex: 2
    }
    
  ]
};