可信代码库-软件详情数据修改

src/components/ChartBar/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <d-row class="mt-3" v-if="inited">
+    <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>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+import { DChart } from 'vue-devui/echarts';
+
+const inited = ref(false);
+
+const props = withDefaults(
+  defineProps<{
+    companyGraph: Array<any>;
+    countryGraph: Array<any>;
+  }>(),
+  {
+    companyGraph: () => [],
+    countryGraph: () => []
+  }
+);
+
+const options = (x: any, y: any, color = '#2070F3') => {
+  return {
+    tooltip: {
+      show: true,
+      trigger: 'item'
+    },
+    xAxis: {
+      type: 'category',
+      data: x,
+      axisLabel: {
+        interval: 0, // 强制显示所有标签
+        // rotate: 45, // 如果标签过长，可以旋转标签
+        fontSize: 12 // 调整字体大小
+      }
+    },
+    yAxis: {
+      // 给y轴添加单位后缀
+      axisLabel: {
+        formatter: '{value}%'
+      },
+      name: '单位',
+      type: 'value'
+    },
+    series: [
+      {
+        data: y,
+        type: 'bar',
+        barWidth: '30',
+        // 给label添加单位后缀
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{c}%'
+        },
+        itemStyle: {
+          color,
+          borderRadius: [5, 5, 0, 0]
+        }
+      }
+    ]
+  };
+};
+
+const optionConChart = computed(() => {
+  return options(
+    props.countryGraph.map((d) => d.name),
+    props.countryGraph.map((d) => d.value),
+    '#2070F3'
+  );
+});
+const optionOrgChart = computed(() => {
+  return options(
+    props.companyGraph.map((d) => d.name),
+    props.companyGraph.map((d) => d.value),
+    '#2CB8C9'
+  );
+});
+
+const onInited = () => {
+  setTimeout(() => {
+    inited.value = true;
+  }, 100);
+};
+// 向外暴露onInited方法
+defineExpose({ onInited });
+</script>
+
+<style scoped lang="scss">
+.mt-translate-y {
+  transform: translateY(-30px);
+}
+</style>