基于vue.js，echarts tooltip新增点击事件

echart完成的折现图，需要自定义tooltip浮层，并且增加点击事件。

以下代码是封装过的，自定义tooltip，增加点击事件，只看options中的tooltip就可以。

增加的transactionLineClick点击事件，一定要放到windows下 window.transactionLineClick = this.transactionLineClick

<template>
  <div class="lineChart">
    <div class="select">
      <p>
        {{ title }}
        <span class="total-num">（共{{ totalNum }}笔）</span>
      </p>
      <div class="sift">
        <template v-if="!isHiddenSelect">
          <span style="padding-left: 16px;">组别：</span>
          <el-select
            v-model="companyGroupList"
            size="small"
            multiple
            collapse-tags
            clearable
            placeholder="可选择组别"
          >
            <el-option
              v-for="item in companyGroups"
              :key="item.subEntry"
              :label="item.dictPrompt"
              :value="item.subEntry"
            />
          </el-select>
        </template>
        <ZoomInOut style="margin-left: 16px;" :is-full="!isFullScreen" @click="handleZoom" />
      </div>
    </div>
    <div :id="chartId" class="line" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ZoomInOut from '@/components/zoomInOut/index.vue'
import Moment from 'moment'

export default {
  components: { ZoomInOut },
  props: {
    chartId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    companyGroups: {
      type: Array,
      default: () => []
    },
    isHiddenSelect: {
      type: Boolean,
      default: false
    },
    totalNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      hookToolTip: {},
      isFullScreen: false,
      lineChart: null,
      lineOption: null,
      companyGroupList: [],
      timeRange: []
    }
  },
  created() {
    this.initTimeRange()
  },
  mounted() {
    this.drawEchart()
  },
  methods: {
    initTimeRange() {
      const startTime = Moment().subtract(30, 'm')
      const endTime = Moment()
      this.timeRange = [startTime, endTime]
    },
    handleZoom() {
      this.$emit('clickZoom', this.isFullScreen)
    },
    resetSize() {
      this.lineChart.resize()
    },
    addData(chartData, xAxisData, keyArr, notMerge = false) {
      const seriesArr = []
      chartData.forEach(item => {
        seriesArr.push({
          name: item.name,
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: item.data
        })
      })
      if (notMerge) {
        this.chartSetOption(keyArr, xAxisData, seriesArr, notMerge)
      } else {
        this.lineChart.setOption({
          legend: {
            data: keyArr
          },
          xAxis: {
            data: xAxisData
          },
          series: seriesArr
        })
      }
    },
    transactionLineClick(str) {
      const arr = str.split(';')
      this.$emit('clickToolTip', { componentIndex: arr[0], name: arr[1] })
    },
    drawEchart(val) {
      window.transactionLineClick = this.transactionLineClick
      this.lineChart = echarts.init(document.getElementById(this.chartId))
      if (val) {
        const { xAxis, dataArr, keyArr } = val
        const seriesArr = []
        dataArr.forEach(item => {
          seriesArr.push({
            name: item.name,
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: item.data
          })
        })
        this.chartSetOption(keyArr, xAxis, seriesArr, true)
      } else {
        this.chartSetOption()
      }
    },
    chartSetOption(legendArr = [], xAxisData = [], seriesData = [{
      name: '',
      type: 'line',
      emphasis: {
        focus: 'series'
      },
      data: []
    }], notMerge = false) {
      this.lineChart.setOption({
        title: {
          text: ''
        },
        color: ['#1E90FF', '#E6A23C', '#ee6666', '#73c0de', '#fc8452', '#9a60B4', '#ea7ccc', '#FFD700', '#FF8247', '#9370DB'],
        tooltip: {
          enterable: true,
          triggerOn: 'mousemove|click',
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], 10]
          },
          formatter: (arr, ticker) => {
            const time = arr[0]['axisValue']
            let content = ''
            arr.forEach((item) => {
              const str = item.componentIndex + ';' + item.name
              content = content + `
                <p style="display: flex; margin: 0;align-items: center;">
                  <span style='width: 10px; height: 10px; border-radius: 5px; background: ${item.color}'></span>
                  <span style="padding: 0 0 0 4px;">${item.seriesName}：</span>
                  <span onclick="transactionLineClick('${str}')" style="text-decoration: underline;cursor: pointer; color: #409EFF;font-weight: bold; padding: 0 4px;">${item.data[1]}</span>
                </p>
              `
            })
            return `
              <div style="display: flex;flex-direction: column;">
                <span style="padding-bottom: 4px;">${time}</span>
                ${content}
              </div>
            `
          }
        },
        legend: {
          data: legendArr,
          type: 'scroll'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameLocation: 'middle',
          data: xAxisData
        },
        yAxis: {
          minInterval: 1,
          type: 'value'
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            filterMode: 'none'
          },
          {
            start: 0,
            end: 100,
            filterMode: 'none'
          }
        ],
        series: seriesData
      }, notMerge)
    }
  }
}
</script>

<style lang="scss" scoped>
.lineChart {
  width: 100%;
  height: 100%;
  border: 2px solid #eeeeee;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.line {
  flex: 1;
}
.select {
  display: flex;
  padding: 8px;
  align-items: center;
  p{
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #303133;
  }
  .sift {
    display: flex;
    align-items: center;
  }
}
.tool-tip {
  font-size: 18px;
  padding-left: 4px;
  color: #c63136;
}
.total-num {
  font-size: 14px;
  font-weight: lighter;
}
</style>