项目仓库：https://github.com/changeclass/vue-shop

时间线

1
2
3
4
5
6
7
8
9
<el-timeline>
    <el-timeline-item
                      v-for="(activity, index) in progressInfo"
                      :key="index"
                      :timestamp="activity.time"
                      >
        {{ activity.context }}
    </el-timeline-item>
</el-timeline>

image-20201109105845267

ECharts基本使用

  1. 安装ECharts的依赖包
  2. 在组件中导入
  3. 参照文档使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
<div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
        <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>
        <!-- 图标区域的DOM -->
        <div id="main" style="width: 600px; height: 400px"></div>
    </el-card>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data () {
            return {}
        },
        mounted () {
            // DOM元素被初始化完毕
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'))
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
            myChart.setOption(option)
        }
    }
</script>

<style>
</style>

image-20201109110920148