el-table，鼠标悬浮时显示数据的echarts饼图渲染异常

Question

需求：鼠标悬浮时显示该行某些数据的饼图
问题1. 鼠标每次悬浮时，会取得当前行的饼图数据传递给子组件，但子组件为什么会打印了5次数据呢
问题2. 页面刷新完后，鼠标第一次悬浮的图总是出不来，子组件内也打印数据了，饼图的标题倒是出来了

图1：鼠标悬浮“查看详情”，主组件打印出来之后只是一组数据，而子组件打印了5遍

图2：鼠标第一次悬浮，数据打印出来了，但是图形渲染不出来

表格数据
tableData: [{

    date: 'A05678',
    name: 'Z张三',
    address: 'Team Leader',
    chartdata: [
      { value: 15.5, name: '磁盘' },
      { value: 24.5, name: '驱动' },
      { value: 18.8, name: '显卡' },
      { value: 32.5, name: '显示器' },
      { value: 17.5, name: '软件随机' },
      { value: 16.8, name: '音箱' },
      { value: 17.5, name: '键盘' }
    ]
  }, {
    date: '10006',
    name: 'L李四',
    address: 'Tec Leader',
    chartdata: [
      { value: 10, name: '磁盘' },
      { value: 10, name: '驱动' },
      { value: 10, name: '显卡' },
      { value: 10, name: '显示器' },
      { value: 10, name: '软件随机' },
      { value: 10, name: '音箱' },
      { value: 40, name: '键盘' }
    ]
  }, {
    date: 'A05666',
    name: 'X小明',
    address: 'CSR',
    chartdata: [
      { value: 20, name: '磁盘' },
      { value: 20, name: '驱动' },
      { value: 20, name: '显卡' },
      { value: 10, name: '显示器' },
      { value: 10, name: '软件随机' },
      { value: 10, name: '音箱' },
      { value: 10, name: '键盘' }
    ]
  }, {
    date: '100088',
    name: 'W王小虎',
    address: 'Team Leader',
    chartdata: [
      { value: 5, name: '磁盘' },
      { value: 5, name: '驱动' },
      { value: 5, name: '显卡' },
      { value: 5, name: '显示器' },
      { value: 40, name: '软件随机' },
      { value: 20, name: '音箱' },
      { value: 20, name: '键盘' }
    ]
  }, {
    date: '100055',
    name: 'G工程师',
    address: 'Tec Leader',
    chartdata: [
      { value: 17.5, name: '磁盘' },
      { value: 24.5, name: '驱动' },
      { value: 18.8, name: '显卡' },
      { value: 32.5, name: '显示器' },
      { value: 17.5, name: '软件随机' },
      { value: 16.8, name: '音箱' },
      { value: 15.5, name: '键盘' }
    ]
  }],

父组件html

 <el-table-column  prop="date"  label="CASE分类"  sortable  width="140">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="bottom" 
                    @show="showCurrentChart(scope.row)" @hide="hideCurrentChart(scope.row)">
                      <tbchart :chart-data="chartData" :draw-chart="drawChart"></tbchart>
                      <div slot="reference" class="name-wrapper">
                        <span style="color:#3E8DDD">查看详情</span>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>

父组件方法：

    showCurrentChart(currentRow) {
      this.chartData = []
      this.drawChart = true
      this.chartData = currentRow.chartdata
      console.log('主组件', this.chartData)
    },
    hideCurrentChart(currentRow) {
      this.drawChart = false
      this.chartData = []
    }

子组件tbchart：

<template>
<!-- 表格内图表 -->
  <div class="wrapper">
    <div id="myChart" :style="{width: '450px', height: '300px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
export default {
  name: 'tbchart',
  props: {
    chartData: {
      type: Array
    },
    drawChart: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  //   components: {
  //     addSolutions
  //   },
  watch: {
    drawChart(newVal, oldVal) {
      console.log('是否绘图', newVal)
      if (newVal) {
        console.log('饼图组件内', JSON.stringify(this.chartData))
        this.drawLine(this.chartData)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('初始化', this.chartData)
      this.drawLine(this.chartData)
    })
  },
  destroyed() {
    console.log('销毁绘图')
  },
  methods: {
    drawLine(data) {
      const myChart = echarts.init(document.getElementById('myChart'), 'macarons')
      myChart.setOption({
        title: {
          text: 'CASE分类',
          subtext: '',
          textStyle: {// 标题字体风格
            color: '#303133',
            fontStyle: 'normal',
            fontWeight: 'bold',
            fontFamily: 'sans-serif',
            fontSize: 16
          },
          x: 'center'
        },
        center: ['55%', '60%'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}%'
        },
        // legend: {
        //   orient: 'vertical',
        //   x: 'left',
        //   data: ['1', '2', '3', '4', '5']
        // },
        series: [
          {
            name: 'CASE 分类',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['55%', '55%'],
            avoidLabelOverlap: false,
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            data: data,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c}%'
                },
                labelLine: { show: true }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
// @import "./common.scss";
.wrapper{
    padding:20px;
}
</style>

Answer 1

用jsfiddle提供个可以在线运行的示例

Answer 2

自己回答下吧，已解决，每个生成echarts饼图的组件应该携带一个唯一的ID值，然后绘图的时候寻找到的是唯一一个容器