1

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

图1:鼠标悬浮“查看详情”,主组件打印出来之后只是一组数据,而子组件打印了5遍
clipboard.png
图2:鼠标第一次悬浮,数据打印出来了,但是图形渲染不出来

clipboard.png

表格数据
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>
2019-01-11 提问

查看全部 2 个回答

1

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

推广链接