mirror of https://gitee.com/xiaonuobase/snowy
77 lines
1.1 KiB
Vue
77 lines
1.1 KiB
Vue
<template>
|
|
<div id="ZhuZhuangTu01"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { Column } from '@antv/g2plot'
|
|
|
|
const data = [
|
|
{
|
|
type: '家具家电',
|
|
sales: 38
|
|
},
|
|
{
|
|
type: '粮油副食',
|
|
sales: 52
|
|
},
|
|
{
|
|
type: '生鲜水果',
|
|
sales: 61
|
|
},
|
|
{
|
|
type: '美容洗护',
|
|
sales: 145
|
|
},
|
|
{
|
|
type: '母婴用品',
|
|
sales: 48
|
|
},
|
|
{
|
|
type: '进口食品',
|
|
sales: 38
|
|
},
|
|
{
|
|
type: '食品饮料',
|
|
sales: 38
|
|
},
|
|
{
|
|
type: '家庭清洁',
|
|
sales: 38
|
|
}
|
|
]
|
|
|
|
onMounted(() => {
|
|
const columnPlot = new Column('ZhuZhuangTu01', {
|
|
data,
|
|
xField: 'type',
|
|
yField: 'sales',
|
|
label: {
|
|
// 可手动配置 label 数据标签位置
|
|
position: 'middle', // 'top', 'bottom', 'middle',
|
|
// 配置样式
|
|
style: {
|
|
fill: '#FFFFFF',
|
|
opacity: 0.6
|
|
}
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoHide: true,
|
|
autoRotate: false
|
|
}
|
|
},
|
|
meta: {
|
|
type: {
|
|
alias: '类别'
|
|
},
|
|
sales: {
|
|
alias: '销售额'
|
|
}
|
|
}
|
|
})
|
|
|
|
columnPlot.render()
|
|
})
|
|
</script>
|