# DataPanel 数据展示
<template>
<avue-data-panel :option="option"></avue-data-panel>
</template>
<script>
export default {
data () {
return {
option: {
span: 8,
data: [
{
click: function (item) {
alert(JSON.stringify(item));
},
title: 'New Visits',
count: '102,400',
icon: 'el-icon-message',
color: '#00a7d0',
},
{
click: function (item) {
alert(JSON.stringify(item));
},
title: 'Messages',
count: '81,212',
icon: 'el-icon-edit',
color: 'rgb(27, 201, 142)',
},
{
click: function (item) {
alert(JSON.stringify(item));
},
title: 'Purchases',
count: '9,280',
icon: 'el-icon-delete',
color: 'rgb(230, 71, 88)',
}
]
}
}
}
}
</script>
显示代码复制代码复制代码