uniapp中使用echarts手机端不显示tooltip

Question

uniapp 中用echarts之后， 统计图可以正常显示，但是tooltip不显示，移动端不展示

<template>
  <div>
    <div id="echart-line" ref="echarts" class="myChart"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      channel: this.$store.state.userInfo.channel,
      xDataName: [],
      renderingData: []
    }
  },
  methods: {
    initChart(name, xData, yData, xDatawx, chart_type) {
      const getchart = echarts.init(this.$refs.echarts)
      this.xDataName = xData
      setTimeout(() => {
        var dataZoom = []
        var tooltip = {}
        if (chart_type !== 'tooltip') {
          tooltip = {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            }
          }
        }
        if (chart_type !== 'index') {
          dataZoom = [{
            orient: 'horizontal',
            show: false, // 控制滚动条显示隐藏
            realtime: true, // 拖动滚动条时是否动态的更新图表数据
            height: 15, // 滚动条高度
            start: 0, // 滚动条开始位置（共100等份）
            end: 100, // 滚动条结束位置
            bottom: '4%',
            zoomLock: false // 控制面板是否进行缩放
          }]
        }
        var option = {
          tooltip,
          legend: {
            data: name,
            top: '0%',
            right: '0%'
          },
          grid: { // 调整图表上下左右位置
            top: '10%',
            left: '8%',
            right: '5%',
            bottom: '15%'
          },
          dataZoom,
          xAxis: {
            data: this.xDataName
          },
          yAxis: {},
          series: yData,
          toolbox: {
            show: false,
            orient: 'horizontal',
            left: 'left',
            top: 'top',
            feature: {
              saveAsImage: { show: true } // 保存图表
            }
          }
        }
        console.log(option, 'optionoptionoption');
        getchart.setOption(option)
        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          getchart.resize()
        })
      }, 100)
    }
  }
}
</script>
<style lang="scss" scoped>
.myChart{
        width: 390px;
        height: 290px;
      position: absolute;
    }
</style>

以上是组件中的代码

  list.map((item) => {
          xData.push(item.name)
          a.push({
            tasksCount: item.tasksCount,
            exceedTaskCount: item.exceedTaskCount,
            inProgressTaskCount: item.inProgressTaskCount,
            completedTaskCount: item.completedTaskCount,
            completedRate: item.completedRate,
            createTaskCount: item.createTaskCount,
            value: item.tasksCount,
            itemStyle: {
              color: '#2868FF'
            },

            tooltip: {
              formatter: function(params) {
                let res = '' // 变量一个res
                res = params.data // res等于params下的数据
                return `
                      <div>
                        <p class="textTooltip">
                          <span style="width:10px;height:10px;border-radius:50%;background:#8FB9FF;display: inline-block;"></span>
                          <span>任务数：${res.tasksCount}</span>
                        </p>
                        <p class="textTooltip">
                          <span style="width:10px;height:10px;border-radius:50%;background: #74BF7A;;display: inline-block;"></span>
                          <span>进行中：${res.inProgressTaskCount}</span>
                        </p>
                        <p class="textTooltip">
                          <span style="width:10px;height:10px;border-radius:50%;background:#2868FF;display: inline-block;"></span>
                          <span>已完成：${res.completedTaskCount}</span>
                        </p>
                        <p class="textTooltip">
                          <span style="width:10px;height:10px;border-radius:50%;background:#FF685F;display: inline-block;"></span>
                          <span>已逾期：${res.exceedTaskCount}</span>
                        </p>
                        <p class="textTooltip">
                          <span style="width:10px;height:10px;border-radius:50%;background:#BCEE68;display: inline-block;"></span>
                          <span>已创建：${res.createTaskCount}</span>
                        </p>
                        <p class="textTooltip">
                          <span style="width:10px;height:10px;border-radius:50%;background:#E1BE00;display: inline-block;"></span>
                          <span>完成率：${res.completedRate}%</span>
                        </p>
                      </div>
                    `
              }
            }
          })
        })
        console.log(6);
        yData = [{
          name: '进行中任务',
          type: 'bar',
          barWidth: 20,
          data: a,
          show: true,
          label: {
            normal: {
              show: true, // 显示数字
              position: 'top' // 这里可以自己选择位置
            }
          }
        }]
   if (this.$refs.chart_user) {
          this.$refs.chart_user.initChart(name, xData, yData, 'peo', 'tooltip')
        }

以上是在父组件中调用之后的数据

Answer 1

引自免费微信小程序：皆我百晓生

针对您在uniapp中使用echarts时移动端不显示tooltip的问题，从您提供的代码片段来看，主要是在series的data配置里直接设置了tooltip属性，而在echarts的配置项中，tooltip通常应该设置在顶级配置项下，并非每个数据项单独配置。此外，在initChart方法内，当chart_type === 'tooltip'时，tooltip被设置为了空对象。

解决方案如下：

首先，请将全局的tooltip配置移动到顶级配置项下，并确保在所有情况下tooltip都有基本的触发器配置（例如axis）。同时，您在series.data内的自定义formatter可以保留，但需要将这部分内容整合到全局tooltip.formatter内。

修改后的initChart方法中的option配置部分应调整为：

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    },
    formatter: function(params) {
      let res = params[0].data; // 获取第一个系列的第一个数据项的数据
      return `
        <div>
          <p class="textTooltip">
            <span style="width:10px;height:10px;border-radius:50%;background:#8FB9FF;display: inline-block;"></span>
            <span>任务数：${res.tasksCount}</span>
          </p>
          <!-- 其他p标签内容... -->
        </div>
      `;
    }
  },
  legend: {...},
  grid: {...},
  dataZoom: dataZoom,
  xAxis: {...},
  yAxis: {...},
  series: yData,
  toolbox: {...}
};

然后，去掉series.data内的tooltip配置，仅保留必要的数据字段：

a.push({
  tasksCount: item.tasksCount,
  exceedTaskCount: item.exceedTaskCount,
  inProgressTaskCount: item.inProgressTaskCount,
  completedTaskCount: item.completedTaskCount,
  completedRate: item.completedRate,
  createTaskCount: item.createTaskCount,
  value: item.tasksCount,
  itemStyle: {
    color: '#2868FF'
  }
});

这样配置后，tooltip应该能在移动端正常显示了。同时，请注意检查CSS样式是否对tooltip显示造成了影响，特别是在移动端屏幕尺寸较小的情况下。如果还有问题，请确认ECharts版本以及移动端浏览器兼容性问题。