echarts饼图添加鼠标hover、移出事件，解决中间显示百分比，旁边指示线问题

需求：鼠标移入后展示指示线信息和中间百分比信息，鼠标移出后，隐藏所有信息

由于echats series内嵌套2个label，会导致互相影响覆盖样式，查询相关资料
参考了文章
Echarts设置环形图中心文字

3种解决方案都不满足要求。前2种是不符合鼠标移入移出的动态需求，第3种就是之前一直卡住的，series内嵌套2个label，会导致互相影响覆盖样式的问题。

解决思路：
1、把中间百分比抽出来，单独作为一个div，添加鼠标移入手动触发的移入移出事件，显示隐藏的div，百分比信息
2、指示线为用echarts的series内label完成

以下代码为，给echarts添加鼠标hover和out事件
给percent变量赋值，当前鼠标hover的饼图数据

    this.chart = echarts.init(document.getElementById(this.id))

    this.$nextTick(() => {
      // 赋值鼠标hover事件
      this.chart.on('mouseover', (params) => {
      // 百分比
        this.percent = params.percent ? params.percent + '%' : ''
      })
      // 鼠标移出
      this.chart.on('mouseout', (params) => {
      // 百分比
        this.percent = ''
      })
    })

效果：
鼠标移入前或移出后，全隐藏

鼠标移入显示，中间百分比和旁边指示线

该方案缺点：该方案适合，饼图在中间的模式，因为百分比的div需要手动定位top和left，如果不在中间位置，需要考虑利用媒介查询动态适配left的多种样式