Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/CommunityInfo.vue

<template>
  <div class="version-info">
    <Card simple class="jyh-card mb-4">
      <div class="card-title">基本信息</div>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-90">社区名称</span>
          <span class="card-val">开发者社区</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">官网地址</span>
          <span class="card-val">https://www.huaweicloud.com</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">联系方式</span>
          <span class="card-val">950808-1</span>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <div class="flex">
            <span class="card-key width-90 flex-shrink-0">社区描述</span>
            <span class="card-val flex-grow-1"
              >华为开发者社区致力于打造华为开发者专属的官方技术交流平台，帮助开发者探索开发实践、交流心得经验、获悉业界动态、解决开发问题。汇聚华为云社区“华为云”领域博
              客、问答、视频等精彩内容，形成开发者和技术爱好者交流与分享主阵地。</span
            >
          </div>
        </d-col>
      </d-row>
    </Card>
    <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>
    </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]
      }
    }
  ]
});
</script>

<style scoped lang="scss">
.card-desc {
  font-size: 12px;
  color: #808080;
}
.mt-translate-y {
  transform: translateY(-30px);
}
</style>