带有Vue的Apache ECharts不显示工具提示

时间:2020-11-04 19:22:59

标签: vue.js apache-echarts

我目前面临以下问题: 我创建了一个简单的折线图,并在其中填充了示例数据。 但是工具提示没有显示。

我已经尝试在ECharts网站上使用我的配置,并且工具提示在起作用。

import pytesseract

# Capture frame...

# If the frame requires cropping:
frame = frame[y:y + h, x:x + w] 

# Perform OCR
text = pytesseract.image_to_string(frame, lang="eng_fast" config="--psm 7")

# Process the result
health = int(text)

在Vue中,其实现方式如下:

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
          }
}

图中的数据正确显示。

谢谢。

1 个答案:

答案 0 :(得分:1)

我找到了解决方法。

tooltip模块的导入必须显式导入。

import 'echarts/lib/component/tooltip'

通过此导入即可正常工作。