el-table 表格中的echaets图表

该博客介绍了如何在Vue项目中利用ECharts组件展示雷达图,并结合HTML元素创建表格来显示数据。文章详细展示了HTML代码结构、获取列表数据的方法以及ECharts配置,展示了将后台数据转化为前端可视化的实现过程。

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

1.HTML代码

<el-table
      :ref="'table'"
      v-loading="loading"
      :data="tableDate"
      :border="true"
      tooltip-effect="dark"
      class="data-table"
    >
      <el-table-column align="center" type="index" label="序号" width="50" />
      <el-table-column
        align="center"
        prop="student.phone"
        label="手机号"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="evaluationGrade"
        label="测评等级"
        min-width="50"
      />
      <el-table-column
        align="center"
        prop="resultRadarUrl"
        label="测评结果雷达图"
        min-width="150"
      >
        <template slot-scope="{ row }">
          <div
            class="echartsClass"
            :ref="'echarts-radar' + row.id"
            style="text-align: center"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="结果详情" min-width="70" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-btnpermission="'stuanswer.details'"
            @click="updaterow(scope)"
            size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

2.获取列表数据方法(data中的变量声明此处忽略)

getanswerList() {
      if (this.daterange == null) {
        this.daterange = [];
      }
      let startTime = this.format(this.daterange[0], "yyyy-mm-dd");
      let endTime = this.format(this.daterange[1], "yyyy-mm-dd");
      reqanswerList( // 调用接口方法 
        this.form.assessmentName,
        this.form.stageName,
        this.form.phone,
        startTime,
        endTime,
        this.form.page,
        this.form.pageSize
      ).then((res) => { 
        this.tableDate = res.data.data.map((item) => {
          item.evaluationGrade = item.grade ? item.grade.gradeName : "";
          item.evaluationStage = item.stage ? item.stage.stageName : "";
          item.resultRadarUrl = item.resultRadarUrl? JSON.parse(item.resultRadarUrl) : [];
          // 重点在这 雷达图
          if (item.resultRadarUrl.length) {
            const options = {
              // 拐点颜色
              color: "rgba(150, 108, 172)",
              tooltip: {},
              legend: {},
              radar: {
                name: {},
                radius: 50,
                indicator: item.resultRadarUrl.map((val) => {
                  return {
                    name: val.knowledgeName,
                    max: val.totalScore,
                  };
                }),
              },
              series: [
                {
                  symbol: "none",
                  name: "",
                  type: "radar",
                  areaStyle: {
                    color: "rgba(150, 108, 172, 0.8)",
                  },
                  // 线条颜色
                  lineStyle: {
                    color: "rgba(150, 108, 172)",
                  },
                  data: [
                    {
                      value: item.resultRadarUrl.map((val) =>
                        val.score * 1 > 0 ? val.score * 1 : 1
                      ),
                      name: ""
                    }
                  ]
                }
              ]
            };
            this.$nextTick().then(() => {
              echarts
                .init(this.$refs["echarts-radar" + item.id])
                .setOption(options, true);
            });
          }
          return item;
        });
        this.form.total = res.data.total;
        this.loading = false;
      });
    },

3.效果图
在这里插入图片描述
因项目需求,通过多方查找资料与交流所得。如有侵权,请联系删除!

### 实现嵌套表头功能 在 Element UI 的 `el-table` 组件中,可以通过定义复杂的列结构来实现嵌套表头的功能。具体来说,可以利用 `columns` 属性的数组嵌套特性,通过子级字段指定更深层次的数据展示逻辑[^1]。 以下是具体的配置方式以及示例代码: #### 配置说明 - 使用 `el-table-column` 定义表格列。 - 如果某列为父列,则在其内部继续嵌套 `el-table-column` 子标签表示子列。 - 利用 `prop` 或者自定义渲染器(`scoped-slot`),绑定对应数据源中的字段路径。 #### 示例代码 以下是一个完整的嵌套表头实例代码: ```vue <template> <div> <el-table :data="tableData" border style="width: 100%"> <!-- 嵌套表头 --> <el-table-column label="基本信息"> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> </el-table-column> <el-table-column label="工作信息"> <el-table-column prop="jobTitle" label="职位" width="180"></el-table-column> <el-table-column prop="department" label="部门" width="180"></el-table-column> </el-table-column> <el-table-column label="联系方式"> <el-table-column prop="phone" label="电话号码" width="200"></el-table-column> <el-table-column prop="email" label="电子邮件地址" width="250"></el-table-column> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 28, jobTitle: '软件工程师', department: '研发部', phone: '12345678901', email: 'zhangsan@example.com' }, { name: '李四', age: 32, jobTitle: '产品经理', department: '产品部', phone: '23456789012', email: 'lisi@example.com' } ] }; } }; </script> ``` 上述代码展示了如何创建多层嵌套的表头,并分别设置了不同的子列及其对应的属性值。 如果遇到动态调整布局的情况,比如隐藏/显示某些部分或者窗口大小改变时,记得调用 `this.$refs['tableRef'].doLayout()` 方法以确保表格重新计算并正确呈现。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值