vueadminpro+vue2+eacharts el-tabs获取后端数据显示饼图并且是父子组件的方式2.0-饼图在一个页面分区域显示

weixin_58412143

于 2024-04-17 17:56:57 发布

阅读量456

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_58412143/article/details/137875050

版权

文章描述了一个Vue应用中如何通过父组件引入并动态渲染两个饼状图组件，VabChartPie和VabChartSes，分别根据`pieData`和`sessionPieData`对象中的数据进行图表显示。子组件根据传入的`titleTab`参数调整图表内容和布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是引入了两个图表组件，大体和非2.0版本差不多，结论：根据变量显示图表数据，子组件2（1和2一样就是保存数据字段不一样以及多了图表居中）

看代码-父组件

<el-tab-pane label="饼状图" name="second">
        <el-row :gutter="1">
          <el-col :span="12">
            <vab-chart-pie title="来源渠道饼状图" :pieData="pieData" v-if="chartDataIsReady" :titleTab="tabName" />
          </el-col>
          <el-col :span="12">
            <vab-chart-ses title="会话次数饼状图" :sessionPieData="sessionPieData" v-if="chartDataIsReady" :titleTab="tabName" />
          </el-col>
        </el-row>
      </el-tab-pane>

import VabChartPie from '../compoents/VabChartPie.vue'
  import VabChartSes from '../compoents/VabChartSes.vue'
  export default {
    name: 'InlineEditTable',
    components: {
      selects,
      VabChartPie,
      VabChartSes
    },

data() {
      return {
        activeName: 'first',
        tabName: '', //子组件需监听切换
        chartDataIsReady: false, //确保有数据时渲染dom
  pieData: {
          //子组件中需要用到的数组
          lineData: [],
          SearData: [],
        },
        sessionPieData: {
          //子组件2中需要用到的数组
          lineData: [],
          SearData: [],
        },
async mounted() {
      await this.fetchDataPie()
    },

 //获取饼图数据
      fetchDataPie() {
        getListPieSource().then((res) => {
          // 将对象转换为数组对象
          const arr = Object.key

最低0.47元/天解锁文章