woothu
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<CCardGroup columns class="c-card-columns c-cols-2">
|
|
<CCard>
|
|
<CCardHeader>
|
|
Line Chart
|
|
<div class="c-card-header-actions">
|
|
<a
|
|
href="https://coreui.io/vue/docs/3.0/components/Charts"
|
|
class="card-header-action"
|
|
rel="noreferrer noopener"
|
|
target="_blank"
|
|
>
|
|
<small class="text-muted">docs</small>
|
|
</a>
|
|
</div>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CChartLineExample/>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard header-html="Bar Chart" body-wrapper>
|
|
<CChartBarExample/>
|
|
</CCard>
|
|
<CCard header-html="Doughnut Chart" body-wrapper>
|
|
<CChartDoughnutExample/>
|
|
</CCard>
|
|
<CCard header-html="Radar Chart" body-wrapper>
|
|
<CChartRadarExample/>
|
|
</CCard>
|
|
<CCard header-html="Pie Chart" body-wrapper>
|
|
<CChartPieExample/>
|
|
</CCard>
|
|
<CCard header-html="Polar Area Chart" body-wrapper>
|
|
<CChartPolarAreaExample/>
|
|
</CCard>
|
|
<CCard header-html="Simple line chart" body-wrapper>
|
|
<CChartLineSimple border-color="success" labels="months"/>
|
|
</CCard>
|
|
<CCard header-html="Simple pointed chart" body-wrapper>
|
|
<CChartLineSimple pointed border-color="warning"/>
|
|
</CCard>
|
|
<CCard header-html="Simple bar chart" body-wrapper>
|
|
<CChartBarSimple background-color="danger"/>
|
|
</CCard>
|
|
</CCardGroup>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as Charts from './charts/index.js'
|
|
|
|
export default {
|
|
name: 'Charts',
|
|
components: {
|
|
...Charts
|
|
}
|
|
}
|
|
</script>
|