A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

The address of the project: https://gitee.com/ykang2020/vue_shop

Today, I continue to use Vue and Element to do the project of background management system. This time, I realize the last module — data statistics module

1. Branch git operations

git checkout -b report
git push -u origin report
Copy the code

2. Mount the Report component and basic layout

As in the previous steps, put together the main frame

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>Data statistics</el-breadcrumb-item>
      <el-breadcrumb-item>Data report</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>

Copy the code

3. The installationechartsRun the dependency and renderdemoThe chart

Here we use Echarts to present the chart

Echarts.apache.org/zh/index.ht…

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>Data statistics</el-breadcrumb-item>
      <el-breadcrumb-item>Data report</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <! -- Prepare a DOM with size (width and height) for ECharts
      <div id="main" style="width: 600px; height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  // The elements on the page have been rendered
  mounted() {
    // Initializes the echarts instance based on the prepared DOM
    var myChart = echarts.init(document.getElementById('main'))
    // Specify the chart configuration items and data
    var option = {
      title: {
        text: 'Getting started with ECharts'
      },
      tooltip: {},
      legend: {
        data: ['sales']},xAxis: {
        data: ['shirt'.'Cardigan'.'Chiffon shirt'.'pants'.'High heels'.'socks']},yAxis: {},
      series: [{name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}}// Display the chart using the configuration items and data you just specified.
    myChart.setOption(option)
  },
}
</script>
Copy the code

You can see the effect.

4. Get the data and render the table

Next we’ll render our data into a chart

Get the interface documentation first

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>Data statistics</el-breadcrumb-item>
      <el-breadcrumb-item>Data report</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <! -- Prepare a DOM with size (width and height) for ECharts
      <div id="main" style="width: 750px; height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  data() {
    return {
      // The data to be merged
      options: {
        title: {
          text: 'User Origin'
        },
        tooltip: {
          trigger: 'axis'.axisPointer: {
            type: 'cross'.label: {
              backgroundColor: '#E9EEF3'}}},grid: {
          left: '3%'.right: '4%'.bottom: '3%'.containLabel: true
        },
        xAxis: [{boundaryGap: false}].yAxis: [{type: 'value'}]}}},created() {},
  // The elements on the page have been rendered
  async mounted() {
    // Initializes the echarts instance based on the prepared DOM
    var myChart = echarts.init(document.getElementById('main'))

    // Get data
    const { data: result } = await this.$http.get('reports/type/1')
    if(result.meta.status ! = =200) {
      return this.$message.error('Failed to get line chart data! ')}// Prepare data and configuration items
    const res = _.merge(result.data, this.options)
    // Display the chart using the configuration items and data you just specified.
    myChart.setOption(res)
  },
  methods: {}}</script>

<style scoped></style>

Copy the code

5. Show

Finally, let’s look at the effect of our data visualization

6. Branch git operations

git add .
git commit -m "Complete report function"
git push
git checkout master
git merge report
git push
Copy the code

The address of the project: https://gitee.com/ykang2020/vue_shop

Finally, welcome to my column and make friends with YK bacteria