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 |