echarts4.0 grid自定义多个tooltip无效的问题

[ghost]

One-line summary [问题简述]

一个echarts画布展示多张折线图时， 根据配置项配置把全局的tooltip移入到grid每个item中， 此时个个折线图的tooltip没有显示。 但是使用全局的tooltip时不配置任何是可以的，也就没有了自定义tooltip一说

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 4.1.0
• Browser version [浏览器类型和版本]: Google Chrome 69.0.3497.100（正式版本）（64 位）
• OS Version [操作系统类型和版本]: Windows10 专业版 1803

Expected behaviour [期望结果]

在一个echarts画布中可以实现多图表块配置多个tooltip

ECharts option [ECharts配置项]

option = {
  title: [
          {
            text: 'grid自定义多个tooltip无效的复现',
            subtext: '',
            left: 'center',
            top: '0',
            textStyle: {
              color: '#fff'
            }
          }
        ],
        legend: [
          {
            gridIndex: 0,
            top: '4%',
            left: '12%',
            data: ['图表1-1', '图表1-2'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#fff',
              fontWeight: 'bolder',
              fontSize: 12
            }
          },
          {
            gridIndex: 1,
            top: '4%',
            left: '62%',
            data: ['图表2-1', '图表2-2'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#fff',
              fontWeight: 'bolder',
              fontSize: 12
            }
          }
        ],
        grid: [
          {
            top: '80',
            left: '15',
            right: '60%',
            bottom: '2%',
            containLabel: true,
            // tooltip无效
            tooltip: {
              show: true,
              trigger: 'axis',
              formatter: function (params) {
                return '123'
              },
              axisPointer: {
                type: 'line',
                axis: 'y'
              },
              showContent: true
            }
          },
          {
            top: '80',
            left: '45%',
            right: '100',
            bottom: '2%',
            containLabel: true
          }
        ],
        xAxis: [
          {
            name: '',
            type: 'value',
            scale: true,
            splitLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#ccc'
              }
            }
          },
          {
            name: '',
            gridIndex: 1,
            type: 'value',
            scale: true,
            splitLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#ccc'
              }
            }
          }
        ],
        yAxis: [
          {
            name: 'pressure\n(hpa)',
            nameLocation: 'start',
            type: 'category',
            inverse: true,
            boundaryGap: false,
            data: ['10', '20', '30', '50', '70', '100', '150', '200', '250', '300', '400', '500', '700', '850', '925', '1000'],
            scale: true,
            splitLine: true,
            axisLabel: {
              // formatter: '{value}'
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#fff'
              }
            }
          },
          {
            name: 'pressure\n(hpa)',
            nameLocation: 'start',
            type: 'category',
            gridIndex: 1,
            inverse: true,
            boundaryGap: false,
            data: ['10', '20', '30', '50', '70', '100', '150', '200', '250', '300', '400', '500', '700', '850', '925', '1000'],
            scale: true,
            splitLine: true,
            axisLabel: {
              // formatter: '{value}'
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '图表1-1',
            type: 'line',
            // symbol: 'circle',
            symbolSize: 6,
            data: [10, 20, 50, 30, 20],
            itemStyle: {
              normal: {
                color: '#D23531'
              }
            }
          },
          {
            name: '图表1-2',
            type: 'line',
            // symbol: 'circle',
            symbolSize: 6,
            data: [20, 30, 60, 40, 30],
            itemStyle: {
              normal: {
                color: '#CFD131'
              }
            }
          },
          {
            name: '图表2-1',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 0,
            itemStyle: {
              normal: {
                color: '#d20000'
              }
            },
            data: [-0.5, 0, -0.2, 0.4, 0.2]
          },
          {
            name: '图表2-2',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 0,
            itemStyle: {
              normal: {
                color: '#00d200'
              }
            },
            data: [-1.5, 1, -1.2, 1.4, 1.2]
          }
        ]
}

Other comments [其他信息]

[sxmpasch]

使用“show：true”选项添加全局工具提示。然后，您可以自定义每个网格的工具提示。

It works, just add tooltip show:true to global settings. Then you can have custom tooltip for each grid:

option = {
  title: [
          {
            text: 'grid自定义多个tooltip无效的复现',
            subtext: '',
            left: 'center',
            top: '0',
            textStyle: {
              color: '#fff'
            }
          }
        ],
    tooltip : {
        show: true,
    },
   ...

[ghost]

嗯，使用“show：true”选项添加全局工具提示，这样是可以通过grid来配置tooltip开关 但是grid里面的tooltip不能使用formatter来对单独的图表进行数据格式化

[sxmpasch]

好。然后，您可以在全局设置中实现工具提示格式化程序。您可以使用params.seriesIndex来获取正确的 grid。

Ok. Then you could implement the tooltip formatter in global settings. You can use the params.seriesIndex to get the correct grid:

option = {
  title: [
          {
            text: 'grid自定义多个tooltip无效的复现',
            subtext: '',
            left: 'center',
            top: '0',
            textStyle: {
              color: '#fff'
            }
          }
        ],
        tooltip : {
            show: true,
            formatter: function(params) {
                if (params[0].seriesIndex<2) {
                    return '123'
                } else {
                    return '456'
                }
            }
        },        
...