85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
|
<d-modal
|
|
title="贡献者分布"
|
|
v-model="visible"
|
|
class="file-search-modal"
|
|
:style="{ width: '800px' }"
|
|
@close="handleClose"
|
|
>
|
|
<Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
|
|
<d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
|
|
<p class="text-center mt-translate-y">组织/公司分布</p>
|
|
</Card>
|
|
<template #footer>
|
|
<d-modal-footer style="text-align: center;">
|
|
<d-button variant="solid" color="primary" @click="handleClose">确认</d-button>
|
|
<d-button @click="handleClose">取消</d-button>
|
|
</d-modal-footer>
|
|
</template>
|
|
</d-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, defineExpose, reactive } from 'vue';
|
|
import { DChart } from 'vue-devui/echarts';
|
|
|
|
const optionOrgChart = reactive({
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
|
|
},
|
|
yAxis: {
|
|
// 给y轴添加单位后缀
|
|
axisLabel: {
|
|
formatter: '{value}%'
|
|
},
|
|
name: '单位',
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
|
|
type: 'bar',
|
|
barWidth: '40%',
|
|
// 给label添加单位后缀
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}%'
|
|
},
|
|
itemStyle: {
|
|
color: '#2CB8C9',
|
|
borderRadius: [5, 5, 0, 0]
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 控制模态框显示/隐藏
|
|
const visible = ref(false);
|
|
|
|
// 打开模态框
|
|
const openModal = () => {
|
|
visible.value = true;
|
|
};
|
|
|
|
// 关闭模态框
|
|
const handleClose = () => {
|
|
visible.value = false;
|
|
};
|
|
|
|
// 暴露方法，供父组件调用
|
|
defineExpose({
|
|
openModal,
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'devui-theme/styles-var/devui-var.scss';
|
|
|
|
</style>
|