Echarts的tooltip自定义内容使用Vue组件渲染，使其支持轮播图 / 表格 / Echarts图表等...，更灵活地定制 tooltip 的内容_echartstooltip 自定义

1 创建基础折线图，并使用自定义tooltip内容

<template>
 <div>
   <div class="echarts-demo" id="echarts-demo"></div>
 </div>
</template>

<script>
export default {

 name: '',

 props: {},

 components: {},

 data () {
   return {}
 },

 computed: {},

 watch: {},
 created () { },

 mounted () {
   this.init()
 },

 methods: {
   init () {
     let myChart = this.$echarts.init(document.querySelector('#echarts-demo'));
     myChart.setOption({
       tooltip: {
         position: `top`,
         // padding: 0,,
         enterable: true,
         formatter (res) {
           const dom = '<div>'+ `数量：${res.data}` + '</div>'
           return dom
         }
       },
       xAxis: {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: {
         type: 'value'
       },
       series: [
         {
           data: [150, 230, 224, 218, 135, 147, 260],
           type: 'line'
         }
       ]
     })
   },
 },
}
</script> 

<style scoped lang="less">
.echarts-demo {
 width: 100%;
 height: 500px;
 margin-top: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

2 使tooltip渲染Vue组件的内容

• 上面可以看到，tooltip虽然也是自定义内容，但随着内容的复杂度提升，想完美展示出来还是存在难度的，并且如果展示内容过于复杂，还需要写很多代码才能实现，那么将其写成Vue的一个组件就可以完美解决以上的所有问题，并且还可以无限套娃，支持更丰富的展示与交互

2.1 创建Vue组件写入想展示的内容

• 此处就不想写那么麻烦了，直接把上边的基础折线图给写到了组件内
• 组件内想写什么都可以，自定义程度更高，也可以写一些交互等等

<template>
  <!-- echartsTooltip.vue -->
  <!-- id 不能跟父组件一致 -->
  <div class="echarts-demo" id="echarts-demo-">{{tooltipData}}</div>
</template>

<script>
export default {

  name: 'echartsTooltip',

  props: {
    tooltipData: {},
  },

  components: {},

  data () {
    return {}
  },

  computed: {},

  watch: {},

  created () { },

  mounted () {
    // 必须等 DOM 更新之后，不然会找不到 Dom 元素
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    init () {
      let myChart = this.$echarts.init(document.querySelector('#echarts-demo-'));
      myChart.setOption({
		tooltip:{},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      })
    },
  },
}
</script> 

<style scoped lang="less">
.echarts-demo {
  width: 300px;
  height: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2.2 改造折线图，使tooltip展示子组件内容

<template>
 <div>
   <div class="echarts-demo" id="echarts-demo"></div>
 </div>
</template>

<script>
import Vue from 'vue';
import router from '@/router';
import echartsTooltip from './echartsTooltip.vue';
export default {

 name: '',

 props: {},

 components: {},

 data () {
   return {}
 },

 computed: {},

 watch: {},
 created () { },

 mounted () {
   this.init()
 },

 methods: {
   init () {
     let myChart = this.$echarts.init(document.querySelector('#echarts-demo'));
     myChart.setOption({
       tooltip: {
         position: `top`, // 展示位置
         padding: 0,
         enterable: true, // 鼠标是否可移入tooltip
         formatter (res) {
           // const dom = '<div>'+ `${res.data}` + '</div>'
           // return dom
           const div = document.createElement('div');
           let mapTooltip = new Vue({ router, render: (h) => h(echartsTooltip, { props: { info: res.data } }) });
           mapTooltip.$mount(div);
           return mapTooltip.$el;
         }
       },
       xAxis: {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: {
         type: 'value'
       },
       series: [
         {
           data: [150, 230, 224, 218, 135, 147, 260],
           type: 'line'
         }
       ]
     })
   },
 },
}
</script> 

<style scoped lang="less">
.echarts-demo {
 width: 100%;
 height: 500px;
 margin-top: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74