feat: 开发者社区信息api

src/components/ChartLine/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <d-row class="mt-3">
+  <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>
@@ -11,80 +11,83 @@
   </d-row>
 </template>
 
-<script setup>
-import { ref, reactive } from 'vue';
+<script setup lang="ts">
+import { ref, reactive, computed } 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}%'
+
+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'
     },
-    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}%'
+    xAxis: {
+      type: 'category',
+      data: x
+    },
+    yAxis: {
+      // 给y轴添加单位后缀
+      axisLabel: {
+        formatter: '{value}%'
       },
-      itemStyle: {
-        color: '#2070F3',
-        borderRadius: [5, 5, 0, 0]
+      name: '单位',
+      type: 'value'
+    },
+    series: [
+      {
+        data: y,
+        type: 'bar',
+        barWidth: '40%',
+        // 给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 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 onInited = () => {
+  setTimeout(() => {
+    inited.value = true;
+  }, 100);
+};
+// 向外暴露onInited方法
+defineExpose({ onInited });
 </script>
 
 <style scoped lang="scss">