merge wsw into master

feat: 柱状图组件封装

Created-by: yfzmpj
Commit-by: 汪少伟
Merged-by: yfzmpj
Description: feat: 柱状图组件封装

See merge request: hk_openRepo/OpenRepo_Portal!9
This commit is contained in:
yfzmpj
2025-03-15 15:43:48 +08:00
3 changed files with 118 additions and 99 deletions

View File

@@ -31,95 +31,15 @@
<Card simple class="jyh-card mb-4">
<div class="card-title">贡献者分布</div>
<p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
<d-row class="mt-3">
<d-col :span="12">
<d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
<p class="text-center mt-translate-y">国家/地球分布</p>
</d-col>
<d-col :span="12">
<d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
<p class="text-center mt-translate-y">组织/公司分布</p>
</d-col>
</d-row>
<div class="mt-3">
<chart-line />
</div>
</Card>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { DChart } from 'vue-devui/echarts';
const optionConChart = reactive({
tooltip: {
show: true,
trigger: 'item'
},
xAxis: {
type: 'category',
data: ['美国', '中国', '德国', '瑞士', '法国', '英国', '印度', '日本', '荷兰', '俄罗斯']
},
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: '#2070F3',
borderRadius: [5, 5, 0, 0]
}
}
]
});
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]
}
}
]
});
import ChartLine from '@/components/ChartLine/index.vue';
</script>
<style scoped lang="scss">
@@ -127,7 +47,4 @@ const optionOrgChart = reactive({
font-size: 12px;
color: #808080;
}
.mt-translate-y {
transform: translateY(-30px);
}
</style>