Apache ECharts with Vue does not show Tooltip

Question

I'm currently facing the following problem: I've created a simple line chart and filled it with example data. But the tooltip doesn't show up.

I've tried using my config on the ECharts Website and there the tooltip is working.

option = {
            title: {
              text: 'Baum'
            },
            tooltip: {
              trigger: 'item',
              show: true,
              showContent: true,
              alwaysShowContent: true,
              triggerOn: 'mousemove',
              axisPointer:
                  {
                    label: {
                      show: true,
                    }
                  }
            },
            legend: {
              data: ['lain', 'lain2']
            },
            xAxis:{
              type: 'category',
              data: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9', '10'],
              boundaryGap: false,
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'lain',
                type: 'line',
                showSymbol: true,
                data: [100,199,200,287,345,456,567,600,700,800],
                smooth: true
              },
              {
                name: 'lain2',
                type: 'line',
                showSymbol: true,
                data: [111,158,231,296,374,495,596, 650,750,879],
                smooth: true
              }
            ],
            animationDuration: 2000
          }
}

In vue it's implemented like this:

<v-chart :options="option"></v-chart>

The data in the diagram itself is shown properly.

Thanks ahead.

Answer 1

I found a solution.

The import for the tooltip module has to imported explicitly.

import 'echarts/lib/component/tooltip'

With this import it's working.