Add combo chart demo
parent
2f811833a9
commit
0b674c25e7
|
@ -109,6 +109,7 @@
|
||||||
<div>
|
<div>
|
||||||
<router-link to="/chart">● ChartModel</router-link>
|
<router-link to="/chart">● ChartModel</router-link>
|
||||||
<router-link to="/chart/pie">● Pie</router-link>
|
<router-link to="/chart/pie">● Pie</router-link>
|
||||||
|
<router-link to="/chart/combo">● Combo</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -31,6 +31,11 @@ export default new Router({
|
||||||
name: 'chart',
|
name: 'chart',
|
||||||
component: () => import('./views/chart/ChartDemo.vue')
|
component: () => import('./views/chart/ChartDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/chart/combo',
|
||||||
|
name: 'combochart',
|
||||||
|
component: () => import('./views/chart/ComboChartDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/chart/pie',
|
path: '/chart/pie',
|
||||||
name: 'piechart',
|
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