vueadminpro+vue2+eacharts 获取后端数据显示饼图并且是父子组件的方式

由于pro框架有写好的echarts显示调用方法，所以跟平时我们所书写的方法，如，引入echarts创建实例。。。不太一样。本次使用tabs切换，显示不同的饼图，结论：监听变化！！

父组件———

1.调用子组件

<el-tabs v-model="activeName" @change="tabsChange">
      <el-tab-pane label="列表" name="first">
        <selects :needName="name" @setValue="valueFn"></selects>
        <el-table v-loading="listLoading" border :data="list" :tab-position="tabPosition">
          <el-table-column align="left" label="注册时间" prop="created_at" show-overflow-tooltip />
          <el-table-column align="left" label="来源渠道" prop="source" show-overflow-tooltip />
        </el-table>
        <el-pagination background :current-page="queryForm.page" :layout="layout" :page-size="queryForm.perPage"
          :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </el-tab-pane>
      <el-tab-pane label="来源渠道饼状图" name="second">
        <vab-chart-pie title="来源渠道饼状图" :pieData="pieData" v-if="chartDataIsReady" :title="tabName" />
      </el-tab-pane>
      <el-tab-pane label="会话次数饼状图" name="third">
        <vab-chart-pie title="会话次数饼状图" :sessionPieData="sessionPieData" v-if="chartDataIsReady" :title="tabName" />
      </el-tab-pane>
 </el-tabs>

2.引入子组件，声明传值参数

  import VabChartPie from '../compoents/VabChartPie.vue'
export default {
    name: 'InlineEditTable',
    components: {
      VabChartPie
    },
    data() {
      return {
          tabName:'',//子组件需监听切换
        chartDataIsReady: false,//确保有数据时渲染dom，另说明不加这个页面也生效
        pieData: {
          //子组件中需要用到的数组
          lineData: [],
          SearData: [],
        },
        sessionPieData: {
          //子组件2中需要用到的数组
          lineData: [],
          SearData: [],
        },
    }
}

3.获取数据，向子组件传递参数

async mounted() {
      await this.fetchDataPie()
    },
 methods: {
    
     //获取饼图数据
       fetchDataPie() {
           getListPieSource().then((res) => {
            // 将对象转换为数组对象
            const arr = Object.keys(res).map(key => ({
              name: key,
              value: res[key]
            }));
            this.pieData.SearData = arr
            // 使用 Object.keys() 方法获取对象的键
            this.pieData.lineData = Object.keys(res);
            this.tabName="second"
            // 如果 lineData 属性之前不存在，我使用下面的方法不显示数据
            // this.$set(this.pieData, 'SearData', arr); // 使用 Vue.set 或 this.$set 来添加响应式属性
            // this.$set(this.pieData, 'lineData', Object.keys(res)); // 使用 Vue.set 或 this.$set 来添加响应式属性
            console.log('父1---this.pieData')
            console.log(this.pieData)
          })
           getListPieCount().then((res) => {
            // 将对象转换为数组对象
            const arr = Object.keys(res).map(key => ({
              name: key,
              value: res[key]
            }));
            this.sessionPieData.SearData = arr
            this.sessionPieData.lineData = Object.keys(res);
            this.tabName="third"
            console.log('父2---this.sessionPieData')
            console.log(this.sessionPieData)
          })

        this.chartDataIsReady = true;
      },
}

子组件

<template>
  <!-- <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24"> -->
  <el-col :span="24">
    <el-card shadow="hover">
      <template #header>
        <!-- <span>{{ title }}</span> -->
      </template>
      <!-- -->
      <vab-chart ref="pieChart" theme="vab-echarts-theme" :init-options="initOptions" :option="option" />
    </el-card>
  </el-col>
</template>

<script>
  import VabChart from '@/extra/VabChart'//pro框架自带
  // import Echarts from 'echarts';//如果是普通调用需要这个或者在全局里引入并挂载

  export default {
    name: 'VabChartPie',
    components: {
      VabChart,
    },
    props: {
      title: {
        type: String,
        default: '',
      },
      pieData: {
        type: Object,
        // required: true, // 这个prop是必须的，我现在不用这个也没啥
        // default: () => ({}) // 提供一个默认值，如果父组件没有传递Data
      },
      sessionPieData: {
        type: Object,
      },
    },
    data() {
      return {
        newData: {},
        //框架留好的必须要这样传参
        initOptions: {
          renderer: 'svg',
        },
        option: {}
      }
    },
    created() {

    },
    mounted() {},
    watch: {
    //关键作用！！！！监听父组件传值的变化给饼图不同的数据
      title(newActiveName) {
        if (newActiveName === 'third') {
          this.newData = this.sessionPieData
          this.initPieChart();
        } else {
          this.newData = this.pieData
          this.initPieChart();
        }
      }
    },
    methods: {
      initPieChart() {
        console.log('子1——');
        console.log(this.pieData);
        console.log('子2——');
        console.log(this.sessionPieData);
        this.option = {
          tooltip: {
            trigger: 'item'
          },
          //图例
          legend: {
            bottom: '20%',
            icon: 'circle',
            orient: 'vertical',
            left: '85%',
            textStyle: {
              color: '#333',
              fontSize: 20
            },
            data:this.newData.lineData,
          },
          series: [{
            // name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: this.newData.SearData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
      }
    }
  }
</script>