Dark Horse] Background Management 183-

1. Add timeline components

The timeline component can only be found in the version of element2.6.0

The plug-ins used in the project were released earlier than the timeline plug-in, so you need to use timeline and timeline-item in the material

Copy to \code\shop-hou\src\plugins\

1. Import components such as timeline in element.js

import Timeline from './timeline/index.js'
import TimelineItem from './timeline-item/index.js'
Vue.use(Timeline)
Vue.use(TimelineItem)

But the error Can't resolve '../timeline/src/item is reported, just quote directly after searching, no need to import files.

import {Timeline,TimelineItem} from 'element-ui'

The format used for pasting the timeline

<!-- 展示物流进度的对话框 -->
        <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
            <!-- 时间线 -->
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
                    {
    
    { activity.context }}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>

2. Push to code cloud

git status view currently modified files

git add . Upload modified files

git status checked the status again and found that there were no red unmodified files, all of which turned green

git commit -m "Complete order development" uploaded to

git push Push to code cloud

merge branch

git checkout master switch to the main branch

git branch to view the current branch

git merge order will merge order into the current branch

git push push to code cloud

new branch

git checkout -b report Create a new report branch

git branch View the current branch

git push -u origin report pushes the new branch to the code cloud, followed by the remote branch name

3. Load data report

Install echarts runtime dependencies to realize entry instantiation

<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card>
            <!-- 2.为echarts准备一个具备大小的dom -->
            <div id="main" style="width:600px;height:400px;"></div>
        </el-card>
    </div>
</template>

<script>
// 1.导入echarts
// import echarts from 'echarts'运行会报错
import * as echarts from 'echarts'
export default {
    data() {
        return {}
    },
    created() { },
    // 此时页面上的元素已经被渲染完毕了
    mounted() {
        // 3.基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))
        //    4.准备数据和配置项
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        }

        // 5.展示数据
        myChart.setOption(option)
    },
    methods: {}
}
</script>
<style lang="less" scoped>
</style>

4. Timeline data table

    async mounted() {
        // 3.基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))

        const { data:res}= await this.$http.get('reports/type/1')
        if(res.meta.status !== 200){
            return this.$message.error('获取折线图数据失败！')
        }
        //    4.准备数据和配置项
        
        // 5.展示数据
        myChart.setOption(res.data)
    },

5. Realize the effect of mouse following

Import data, use lodash to merge data,

import _ from 'lodash'

    //    4.准备数据和配置项
        const result = _.merge(res.data,this.options)
        // 5.展示数据
        myChart.setOption(result)

You can achieve the mouse follow effect