echarts中针对不同数据点单独设置tooltip提示框不生效具体解决办法

1.问题描述

项目开发过程中，echarts图中series内有不同类型的数据，想对不同类型数据单独设置tooltip，发现提示框不生效。

2.原因说明

• 原因1：单独设置不生效可能在主体部分没有先给出tooltip的设置，若下图中的位置没有先设定好tooltip，单独设置tooltip的时候也无法生效。
  

• 原因2：一般单独设置tooltip都是在series中对每个type的数据进行设置，但是设置过程中tooltip中需要注意trigger必须为’item’，否则不生效，官方文档有说明如下：
  
  series外的主体部分设置tooltip.show为false是因为主体的样式可能会影响后续单独样式的设置，因此我设置为false，后续series内的tooltip需要设置为serier.tooltip.show为true。
  

3.完整代码案例实现

<template>
    <div>
      <div ref="chart" id="lineChart" style="height: 400px; width: 800px"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'; // 引入echarts, * as echarts 表示引入所有的方法
  
  
  export default {
    data() {
      return {
        chart: null,
        dialogVisible: false,
        tipTitle: null
      }
    },
    mounted() {
      this.init()
  
    },
    methods: {
      init() {
        this.chart = echarts.init(this.$refs.chart);
  
        // 绘制图表
        const option = {
          tooltip: { // 在主体中定义 tooltip
            show: false, // 不显示tooltip
            trigger: 'none', // 去除默认的 'axis' 触发方式
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: 'scatter',
            type: 'scatter',
            tooltip: {
              show: true,  //此处由于前面定义了全局的tooltip,所以这里必须设置为true才能生效
              trigger: 'item', // 单独设置样式时必须为item才能生效
              backgroundColor: 'rgba(110, 112, 121, 0.9)', //对该系列数据单独设置tooltip背景颜色
              formatter: (params) => {
                console.log('params-->>',params);
                return  params.seriesName + '<br/>' + params.data[0] + ' : ' + params.data[1];
              },
              textStyle: {
                color: '#fff'
              }
            },
            data: [
              [0, 1],
              [1, 5],
              [2, 3],
              [3, 4],
              [4, 2],
              [5, 8],
              [6, 6]
            ]
          }, {
            name: 'line',
            type: 'line',
            tooltip: {
              show: true,
              trigger: 'item', 
            },
            data: [1, 3, 2, 5, 4, 6, 8]
          }]
        };
        this.chart.setOption(option);
      },
  
    }
  }
  </script>
  
  复制