创新项目实训——图表管理前端

任务

小组已经完成了图表管理后端接口的开发。

现在需要完成图表管理前端，对用户的图表以合适的方式进行呈现与展示。

具体流程

完善首页

1. 在用户首页，应该展示出其最近期的图表，即在created时调用后端接口。

  created(){
    this.chartLoading=true //图表加载
    getLastChart({data:{userAccount:this.name}}).then(response=>{
      this.chartLoading=false
      let rawData=response.data.chartData
      let cleanedData = rawData.replace(/^\s*\n*\"|\"\n*\s*$/g, '');
      cleanedData = cleanedData.replace(/\s+/g, ' ');
      this.decoration=JSON.parse(cleanedData)
      if (!this.chartInstance) {
          this.chartInstance = echarts.init(this.$refs.chartContainer);
      }
      //绘制出最近的图表
      this.chartInstance.setOption(this.decoration);
      this.analyse=response.data.genResult
      this.chartName=response.data.name
    })
  },

2. 每当用户上传数据进行分析的时候，后端给前端返回数据的同时，应该对本次图表信息进行保存到数据库中。

    // 提交表单
    submitForm() {
      analyseData(param).then(response=>{
          //创建新的图表逻辑
        return createChart({data:{userAccount:this.name,chartName:this.form.name,goal:this.form.necessary,genResult:this.analyse,chartData:rawData,isDelete:0}})
      })
    },

用户图表管理界面

1. 由于用户的图表可能会比较多，所以采用分页展示，每页展示四个。

  data() {
    return {
      list: null,
      listLoading: true,//图表加载
      displayedCharts:[],//当前页要展示的图表信息
      decoration:null,
      currentPage:1,//当前页数
      totalNum:10//图表总数
    }
  },  

2. Vue模板代码实现了一个展示图表管理页面的组件，主要由两部分构成：图表展示区域和分页导航区域。

<template>
  <div class="app-container">
  <div class="chart-management">
    <el-row :gutter="20"> <!-- 添加gutter可以设置卡片之间的间隔 -->
      <el-col :span="6" v-for="(chartData, index) in displayedCharts" :key="index"> <!-- 每个卡片占6列，共4列 -->
        <el-card
          :body-style="{ padding: '10px',height:'580px'}"
          shadow="hover"
          class="chart-card"
        >
        <div ref="chartContainer" :id="`chart-${index}`" style="width: 100%; height: 300px;"></div>
        <p>{{ chartData.genResult }}</p>
        </el-card>
     </el-col>
   </el-row>
  </div>
  <div class="pagination-text-center">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="4"
      layout="total, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </div>
    </div>
</template>

3. 调用后端接口进行渲染。（具体参考可视化）

  created() {
      //初始化时渲染第一页
    getChartPagination({data:{userAccount:this.name,page:1}}).then(response=>{
      this.displayedCharts=response.data
      console.log(response)
      return this.initCharts()
    })
      //修改用户总图表数
    getUserChartNum({data:{userAccount:this.name}}).then(response=>{
      this.totalNum=response.data.totalCount
    })
  },
      
  methods: {
    initCharts() {
      this.displayedCharts.forEach((chartData, index) => {
        this.renderChart(chartData, index);
      });
    },
        //异步挂载图表
   async renderChart(chartData, index) {
      await this.$nextTick(); // 确保DOM已更新
      const chartDom = document.getElementById(`chart-${index}`);
      const chartInstance = echarts.init(chartDom);
      let rawData=chartData.chartData
      let cleanedData = rawData.replace(/^\s*\n*\"|\"\n*\s*$/g, '');
      cleanedData = cleanedData.replace(/\s+/g, ' ');
      this.decoration=JSON.parse(cleanedData)
      chartInstance.setOption(this.decoration);
    },
        //改变页数时要重新对图表进行渲染
    handleCurrentChange(newPage){
      getChartPagination({data:{userAccount:this.name,page:newPage}}).then(response=>{
      this.displayedCharts=response.data
      console.log(response)
      return this.initCharts()
    })
    }
  }

效果展示

总结

通过前端图表管理的开发，对组件生命周期管理、异步数据处理、数据驱动视图、DOM域与Echarts集成、事件处理等有了更好的掌握。