项目仓库: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>
|
ECharts基本使用
- 安装ECharts的依赖包
- 在组件中导入
- 参照文档使用
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>
|