mirror of https://gitee.com/xiaonuobase/snowy
127 lines
1.7 KiB
Vue
127 lines
1.7 KiB
Vue
<template>
|
|
<div id="TiaoXingTu02"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { Bar } from '@antv/g2plot'
|
|
|
|
const data = [
|
|
{
|
|
year: '1991',
|
|
value: 3,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1992',
|
|
value: 4,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1993',
|
|
value: 3.5,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1994',
|
|
value: 5,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1995',
|
|
value: 4.9,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1996',
|
|
value: 6,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1997',
|
|
value: 7,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1998',
|
|
value: 9,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1999',
|
|
value: 13,
|
|
type: 'Lon'
|
|
},
|
|
{
|
|
year: '1991',
|
|
value: 3,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1992',
|
|
value: 4,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1993',
|
|
value: 3.5,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1994',
|
|
value: 5,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1995',
|
|
value: 4.9,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1996',
|
|
value: 6,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1997',
|
|
value: 7,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1998',
|
|
value: 9,
|
|
type: 'Bor'
|
|
},
|
|
{
|
|
year: '1999',
|
|
value: 13,
|
|
type: 'Bor'
|
|
}
|
|
]
|
|
|
|
onMounted(() => {
|
|
const stackedBarPlot = new Bar('TiaoXingTu02', {
|
|
data: data.reverse(),
|
|
isStack: true,
|
|
xField: 'value',
|
|
yField: 'year',
|
|
seriesField: 'type',
|
|
label: {
|
|
// 可手动配置 label 数据标签位置
|
|
position: 'middle', // 'left', 'middle', 'right'
|
|
// 可配置附加的布局方法
|
|
layout: [
|
|
// 柱形图数据标签位置自动调整
|
|
{ type: 'interval-adjust-position' },
|
|
// 数据标签防遮挡
|
|
{ type: 'interval-hide-overlap' },
|
|
// 数据标签文颜色自动调整
|
|
{ type: 'adjust-color' }
|
|
]
|
|
}
|
|
})
|
|
|
|
stackedBarPlot.render()
|
|
})
|
|
</script>
|