echarts鼠標懸浮，tooptip展示新的圖表，點擊移除圖表，保留高亮選中的圖形並顯示 tooltip

結果：

 

 

 

 

 

 

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

有好的優化，歡迎留言