仪表盘卡片使用组件渲染

仪表盘卡片已支持了多种卡片类型，如果这些卡片类型还无法实现您的需求，您需要高定制化的卡片，可以通过组件设计器来实现自定义的仪表盘卡片。

下面的例子我们将讲解如何用ElementUI实现分片器卡片的功能。

效果图

自定义控件定义

组件设计器中创建组件，并将下方的定义粘贴到对应的版块，完成组件定义。卡片内的所有上下文都可以作为参数传到组件中，根据业务需要进行交互。

组件库依赖

该组件需要依赖ElementUI组件库

模板

<div style="display:flex">
    <el-table :data="sub" :stripe="false" style="width:202px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-style:solid;border-left-color:#FFC107;border-bottom-color:#FFC107;border-right-color:#FFC107;border-top-color:#FFC107" v-on:row-click="getSubject">
        <el-table-column prop="sub" label="科目" width="200"></el-table-column>
    </el-table>
    <el-table :data="tableData" border :summary-method="getSummaries" show-summary stripe style="display:inline;top:-20px;flex-grow:4;margin-top:20px">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="subject" label="科目" width="180"></el-table-column>
        <el-table-column prop="score" label="成绩"></el-table-column>
    </el-table>
</div>

脚本

export default {
  data() {
    return {
      // 平均分
      avg: 100,
      // 科目列表
      sub: [
        {
          sub: "全部",
        },
        {
          sub: "语文",
        },
        {
          sub: "数学",
        },
        {
          sub: "英语",
        },
      ],
      activeSub: null,
      // 数据表源数据
      tableDataOrigin: [
        {
          subject: "语文",
          name: "张三",
          score: 88,
        },
        {
          subject: "数学",
          name: "张三",
          score: 90,
        },
        {
          subject: "英语",
          name: "张三",
          score: 67,
        },
        {
          subject: "数学",
          name: "李四",
          score: 95,
        },
        {
          subject: "语文",
          name: "李四",
          score: 92,
        },
        {
          subject: "英语",
          name: "李四",
          score: 94,
        },
      ],
    };
  },
  computed: {
    // 表格中展示过滤后的数据
    tableData() {
      if (this.activeSub === "全部") {
        return this.tableDataOrigin;
      }
      return this.tableDataOrigin.filter((item) =>
        this.activeSub ? item.subject === this.activeSub : true
      );
    },
  },
  methods: {
    // 汇总函数，计算平均分
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "平均分";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = (sums[index] / values.length).toFixed(2);
          sums[index] += " 分";
        } else {
          sums[index] = " ";
        }
      });

      return sums;
    }
  },
};

添加仪表盘卡片

创建一个仪表盘模块或在任意的仪表盘模块添加自定义组件卡片，选择刚创建的组件即可