Quickly create awesome looking statistics card.
Overview
Component Name: statistics-card-line
Use case: Quickly create statistics card
Path: src/components/statistics-cards/StatisticsCardLine.vue
Is Globally Registered: false
Creating Statistics Card
statistics-card-line component uses vue-apex-chart library to create charts. To create statistics card you have to pass chart data along with other required props.
statistics-card-line组件使用vue-apex-chart库创建图表。要创建统计卡,您必须将图表数据与其他必需的props一起传递。
Changing Color
You can change the color of chart using color prop.
Changing Options
You can change options like icon, statistics title, statistics, chart type etc. For exploring default values of prop please check component at /src/components/statistics-cards/StatisticsCardLine.vue.
TIP
If you want to learn more about what chart-data contains, you can always check their docs or for quick refrence you can always check our chart-data file.
如果您想进一步了解图表数据包含的内容,则可以随时查看其文档,或者为了快速阅读您可以随时查看我们的图表数据文件。/src/views/ui-elements/card/analyticsData.js
API
| Name | Type | Parameters | Description | default |
|---|---|---|---|---|
| icon | String | feather icon name | statistics card icon | |
| statistic | String, Number | statistics | Shows statistics of chart | |
| statisticTitle | String | statistics title | Shows statistics title of chart | |
| chartData | Object | chart data | ||
| color | String | theme colors | Change chart color | primary |
| type | String | line, area | You can choose between area chart or line chart | |
| iconRight | Boolean | true, false | add icon to statistics card |
