Add combo chart demo
parent
2f811833a9
commit
0b674c25e7
|
@ -109,6 +109,7 @@
|
|||
<div>
|
||||
<router-link to="/chart">● ChartModel</router-link>
|
||||
<router-link to="/chart/pie">● Pie</router-link>
|
||||
<router-link to="/chart/combo">● Combo</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -31,6 +31,11 @@ export default new Router({
|
|||
name: 'chart',
|
||||
component: () => import('./views/chart/ChartDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/chart/combo',
|
||||
name: 'combochart',
|
||||
component: () => import('./views/chart/ComboChartDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/chart/pie',
|
||||
name: 'piechart',
|
||||
|
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ComboChart</h1>
|
||||
<p>Different chart types can be combined in the same graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="bar" :data="chartModel" :options="chartOptions"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartModel: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
type: 'line',
|
||||
label: 'Dataset 1',
|
||||
borderColor: '#AA5493',
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: [
|
||||
50,
|
||||
25,
|
||||
12,
|
||||
48,
|
||||
56,
|
||||
76,
|
||||
42
|
||||
]
|
||||
}, {
|
||||
type: 'bar',
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: '#2f4860',
|
||||
data: [
|
||||
21,
|
||||
84,
|
||||
24,
|
||||
75,
|
||||
37,
|
||||
65,
|
||||
34
|
||||
],
|
||||
borderColor: 'white',
|
||||
borderWidth: 2
|
||||
}, {
|
||||
type: 'bar',
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: '#00bb7e',
|
||||
data: [
|
||||
41,
|
||||
52,
|
||||
24,
|
||||
74,
|
||||
23,
|
||||
21,
|
||||
32
|
||||
]
|
||||
}]
|
||||
},
|
||||
chartOptions: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Combo Bar Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue