实现插入一个echarts图表来分析用户投递简历的情况,需要进行以下步骤:

  1. 安装echarts插件

在Vue项目中,可以通过npm安装echarts插件:

npm install echarts --save
  1. 编写echarts图表组件

在Vue项目中,可以通过自定义一个echarts图表组件来实现图表的显示和数据的绑定。

在组件中,需要导入echarts插件,并在mounted生命周期中进行图表的初始化和数据的绑定。

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption(this.chartData)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}
</script>

<style>
</style>
  1. 获取数据并生成图表

在SpringBoot项目中,需要编写后端接口来获取数据并返回给前端。

后端接口可以使用SpringBoot框架提供的@RestController注解来实现RESTful风格的接口。

具体实现代码如下:

@RestController
@RequestMapping("/api")
public class ResumeController {

    @Autowired
    private ResumeService resumeService;

    @GetMapping("/resume")
    public List<Resume> getResumeList() {
        return resumeService.getResumeList();
    }
}

在前端中,可以通过Vue的生命周期函数created来调用后端接口,并将获取到的数据传递给echarts图表组件进行显示。

<template>
  <div>
    <my-chart :chartData="chartData"></my-chart>
  </div>
</template>

<script>
import MyChart from '@/components/MyChart.vue'
import axios from 'axios'

export default {
  components: {
    MyChart
  },
  data() {
    return {
      chartData: {}
    }
  },
  created() {
    axios.get('/api/resume').then(res => {
      const data = res.data
      const option = {
        title: {
          text: '用户投递简历情况'
        },
        tooltip: {},
        legend: {
          data: ['投递数量']
        },
        xAxis: {
          data: data.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '投递数量',
          type: 'bar',
          data: data.map(item => item.count)
        }]
      }
      this.chartData = option
    })
  }
}
</script>

<style>
</style>

以上代码实现了一个简单的echarts图表展示,并通过后端接口获取数据进行绑定。具体实现中,可以根据实际情况进行调整和扩展


原文地址: https://www.cveoy.top/t/topic/e3jV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录