e-chart實現上下圖示使用一個tooltip移入事件

fanjiajia發表於2024-03-27
事件
有的需求需要一次移入事件展示多個圖示的tooltip方便使用者檢視，效果如下

連結如下 ： e-chart
主要配置是

 tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },

完整option程式碼

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  title: [],
  grid: [
    {
      top: 50,
      width: '100%',
      bottom: '45%',
      left: 10,
      containLabel: true
    },
    {
      top: '55%',
      width: '100%',
      bottom: 0,
      left: 10,
      containLabel: true
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      gridIndex: 1,
      splitLine: {
        show: false
      }
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'bar',
      stack: 'chart',
      z: 3,
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      type: 'bar',
      stack: 'component',
      xAxisIndex: 1,
      yAxisIndex: 1,
      z: 3,
      data: [80, 92, 91, 34, 120, 130, 130]
    }
  ]
};

相關文章