<!-- -->
<template>
<div class="staff-archives-charts">
<div class="staff-archives-title">性别分布</div>
<div>
<ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-ring>
</div>
</div>
</template>
<script>
export default {
data () {
this.chartExtend = {
legend: {
orient: 'vertical', //分类的类型
x: 'center', //分类头的位置
y: '80%', //分类头的y轴位置
show: true // 是否显示分类头
}, // 隐藏legend
color: ['#09f', '#eeeeee', '#468251', '#666666'], //分类的颜色
series: {
center: ['50%', '40%'] // 图的位置
}
}
return {
chartData: {
columns: ['分类', '数量'], //分类的数量
rows: [
{ '分类': '0-3年', '数量': '50' },
{ '分类': '3-5年', '数量': '80' },
{ '分类': '5-8年', '数量': '58' },
{ '分类': '8-10年', '数量': '58' }
]
},
chartSettings: {
radius: ['60px', '80px'], //echart设置
itemStyle: {
textAlign: 'center' // itemstyle位置
},
label: {
formatter: params => { // 返回显示的值(箭头指向的)
console.log(params)
return `{a|${params.data.name}\n${params.data.value}人}`
},
rich: {
a: {
color: '#ccc',
textAlign: 'center' // 为每一个显示的简值添加颜色
}
}
}
}
}
},
computed: {},
beforeMount () { },
mounted () { },
methods: {},
watch: {}
}
</script>
<style lang='scss' scoped>
.staff-archives-charts {
// width: 50%;
}
</style>