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