echarts鼠标悬浮，tooptip展示新的图表，点击移出图表，保留高亮选中的图形并显示 tooltip

这篇博客详细介绍了如何使用Echarts配置一个带有自定义tooltip、点击高亮和数据缩放功能的柱状图。内容包括图表的背景色、网格、坐标轴、数据区域缩放及点击事件处理，实现了在鼠标点击图表时高亮显示选中项，并保持高亮状态，同时展示详细的tooltip信息。此外，还展示了当鼠标移出图表时如何保留高亮效果和显示tooltip。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

options配置：

{
        tooltip: {
          padding: 3,
          backgroundColor: '#ffffff',
          enterable: true,
          formatter: function(params, ticket, callback) {
            var htmlStr = `<div id="tooltipChart" ref='tooltipEchart' style='width:400px;height:300px'></div>`
           // 记得重新渲染的时候要进行防抖处理，避免性能影响
            callback(that.setTooltipEchart())
           //setTimeout(() => {
            // that.setTooltipEchart()
            // }, 500)
            return htmlStr
          },
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0 // x坐标位置
            var y = 0 // y坐标位置
            // 当前鼠标位置
            var pointX = point[0]
            var pointY = point[1]
            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];
            // 提示框大小
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5
            } else { // 左边放的下
              x = pointX - boxWidth
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5
            } else { // 上边放得下
              y = pointY - boxHeight
            }
            return [x, y]
          }
        },
        backgroundColor: '#eff9f7',
        color: ['#16c7de'],
        grid: {
          left: '3%',
          top: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5],
          splitLine: {
            lineStyle: {
              color: '#ade4d3'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#16c7de'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#16c7de',
            formatter: function(params) {
              var val = ''
              if (params.length > 4) {
                val = params.substr(0, 4) + '\n' + params.substr(4)
                return val
              } else {
                return params
              }
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 100
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barMaxWidth: '50',
            itemStyle: {
              emphasis: {
                // 普通图表的高亮颜色
                'color': '#ed6d43'
              }
            },
            data: [12, 32, 14, 23, 12]
          }
        ]
      }

解释：

//初始化echarts
const that = this
that.syqkhzEchart = that.$echarts.init(
that.$refs.syqkhzEchart
)
window.onresize = function() {
that.syqkhzEchart.resize()
}
//设置echarts的点击事件，点击高亮，移出图表后保留高亮样式
that.setClickFn(that.syqkhzEchart, 'syqkhzIndex')

setClickFn代码：//type，项目中有多个图表，type为当前图表的类型，用来区分；indexObj用来保存项目中某一个图表中高亮图形的dataIndex，用来移出图表后，保留高亮样式并显示 tooltip

setClickFn(echart, type) {
      const that = this
      echart.on('click', function(params) {
        // console.log(params)
        // 取消之前高亮的图形
        that.indexObj[type] !== '' && echart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: params.currentIndex
        })
        if (that.indexObj[type] === params.dataIndex) {
          that.indexObj[type] = ''
        } else {
          that.indexObj[type] = params.dataIndex
        }
        // 高亮当前图形
        echart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
        // 显示 tooltip
        echart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
        that.getEchartData()
      })
      // 移出当前整个图表
      echart.on('globalout', function(params) {
        // 高亮当前图形
        that.indexObj[type] !== '' && echart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: that.indexObj[type]
        })
        // 显示 tooltip
        that.indexObj[type] !== '' && echart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: that.indexObj[type]
        })
      })
    },

setTooltipEchart() {
      const that = this
      that.$nextTick(() => {
        that.tooltipEchart = that.$echarts.init(document.getElementById('tooltipChart'))
        that.tooltipEchart.setOption(that.syzbOption)
      })
    },