el-table 表格中的echaets图表

最新推荐文章于 2024-04-26 17:54:41 发布

李小若98

最新推荐文章于 2024-04-26 17:54:41 发布

阅读量473

点赞数 1

CC 4.0 BY-SA版权

文章标签： elementui vue echarts

本文链接：https://blog.youkuaiyun.com/taohuacsdn/article/details/113877111

该博客介绍了如何在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.效果图
在这里插入图片描述
因项目需求，通过多方查找资料与交流所得。如有侵权，请联系删除！