yos_web/src/views/mediaStatistics/modules/salesfunnel.vue

// 各模块文件存储占比
<template>
  <div class="container normal-panel">
    <div >
      <p class="title">销售漏斗图</p>
      <div id="containerFunnel"></div>
    </div>
    <div>
    <p class="title">表格数据</p>
    <el-table
      :data="tableData"
      style="width: 100%"
      size="small"
      border>
      <el-table-column
        prop="stagename"
        label="阶段"
        width="180">
      </el-table-column>
      <el-table-column
        prop="projectqty"
        label="项目数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="signamount_due"
        label="签约金额(万元)">
      </el-table-column>
      <el-table-column
        prop="totalinvestment"
        label="总计预计投资金额(万元)">
      </el-table-column>
      <el-table-column
        prop="budgetary"
        label="项目预算(万元)">
      </el-table-column>
    </el-table>
    </div> 
  </div>
</template>

<script>
import { Funnel } from '@antv/g2plot';
export default {
  data () {
    return {
      chartPie:null,
      tableData:[]
    }
  },
  methods:{
    renderPie() {
      this.chartPie = new Funnel('containerFunnel', {
        data: [],
        width:500,
        xField: 'stagename',
        yField: 'sequence1',
        legend: false,
        label: {
          formatter: (datum) => {
            return `${datum.stagename}:${datum.projectqty}`;
          },
        },
        tooltip:{
          customContent: (title, items) => {
            // 构建自定义内容
            const content = `<div>
              <ul style="padding:20px">
                ${items.map((item) => `<li>${title}: ${item.data.projectqty}</li>`).join('')}
              </ul>
            </div>`;

            return content;
          },
        },
        conversionTag: {
          formatter: (datum) => {
            return `${((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)}%`;
          },
        },
        // 关闭 conversionTag 转化率 展示
        // conversionTag: false,
      });
      this.chartPie.render();
      this.getProportionOfFileModel()
    },
    async getProportionOfFileModel () {
      let param = {
        "id": 20230630151504,
        "content": {
            "where": {
              "begindate": "",
              "enddate":"",
              "departmentid":""
            }
        }
      }
      const res = await this.$api.requested(param)
      this.tableData = res.data
      this.chartPie.changeData(res.data)
    }
  },
  mounted () {
    this.renderPie()
  }
}

</script>
<style>
</style>
<style scoped>
.title{
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-indent: 7px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
  border-left: .3rem solid #3874F6;
}
.container{
  height:calc(100vh - 200px)
}
</style>