mirror of
https://github.com/iczer/vue-antd-admin.git
synced 2025-04-27 20:29:03 +08:00
62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<template>
|
|
<div style="">
|
|
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
|
<v-tooltip :showTitle="false" dataKey="item*percent" />
|
|
<v-axis />
|
|
<v-legend dataKey="item" position="right" :offsetX="-140"/>
|
|
<v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
|
|
<v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
|
|
</v-chart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const DataSet = require('@antv/data-set')
|
|
|
|
const sourceData = [
|
|
{ item: '事例一', count: 40 },
|
|
{ item: '事例二', count: 21 },
|
|
{ item: '事例三', count: 17 },
|
|
{ item: '事例四', count: 13 },
|
|
{ item: '事例五', count: 9 }
|
|
]
|
|
|
|
const scale = [{
|
|
dataKey: 'percent',
|
|
min: 0,
|
|
formatter: '.0%'
|
|
}]
|
|
|
|
const dv = new DataSet.View().source(sourceData)
|
|
dv.transform({
|
|
type: 'percent',
|
|
field: 'count',
|
|
dimension: 'item',
|
|
as: 'percent'
|
|
})
|
|
const data = dv.rows
|
|
export default {
|
|
name: 'SalesData',
|
|
data () {
|
|
return {
|
|
data,
|
|
scale,
|
|
height: 385,
|
|
pieStyle: {
|
|
stroke: '#fff',
|
|
lineWidth: 1
|
|
},
|
|
labelConfig: ['percent', {
|
|
formatter: (val, item) => {
|
|
return item.point.item + ': ' + val
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|