Enhance data visualization and sorting options across multiple components. Added sorting functionality to BuyerList, DestinationCountryAnalysis, OriginCountryAnalysis, SupplierList, and HsCodeAnalysis components, allowing users to sort by transaction count, weight, and amount. Introduced a percentage column in OriginCountryAnalysis and DestinationCountryAnalysis for better data insights. Improved layout and structure for better user experience.

src/views/adweb/data/components/BuyerList.vue

@@ -1,5 +1,12 @@
 <template>
     <a-card title="采购商">
+        <template #extra>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+                <a-radio-button value="count">交易次数</a-radio-button>
+                <a-radio-button value="sum_weight">交易重量</a-radio-button>
+                <a-radio-button value="sum_amount">交易金额</a-radio-button>
+            </a-radio-group>
+        </template>
         <div>
         <a-table
             :columns="columns"
@@ -22,6 +29,7 @@ const props = defineProps({
     }
 });
 const loading = ref(false);
+const sortMode = ref('count');
 
 const columns = [
     {

src/views/adweb/data/components/DestinationCountryAnalysis.vue

@@ -1,13 +1,20 @@
 <!-- src/views/adweb/data/components/DestinationCountryAnalysis.vue -->
 <template>
     <a-card title="目的国" :loading="loading">
-        <!-- 添加切换按钮组 -->
         <template #extra>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+            <a-radio-button value="count">交易次数</a-radio-button>
+            <a-radio-button value="sum_weight">交易重量</a-radio-button>
+            <a-radio-button value="sum_amount">交易金额</a-radio-button>
+        </a-radio-group>
+        </template>
+        <!-- 添加切换按钮组 -->
+        <div>
             <a-radio-group v-model:value="viewMode" button-style="solid">
                 <a-radio-button value="chart">图表</a-radio-button>
                 <a-radio-button value="table">列表</a-radio-button>
             </a-radio-group>
-        </template>
+        </div>
 
         <!-- 图表视图 -->
         <div v-show="viewMode === 'chart'" ref="chartRef" style="height: 400px"></div>
@@ -46,6 +53,7 @@ const props = defineProps({
 const chartRef = ref(null);
 const loading = ref(false);
 const viewMode = ref('chart');
+const sortMode = ref('count');
 let chart = null;
 
 // 定义表格列
@@ -59,25 +67,31 @@ const columns = [
         title: '交易次数',
         dataIndex: 'count',
         key: 'count',
-        sorter: (a, b) => Number(a.count) - Number(b.count),
     },
     {
         title: '采购商数量',
         dataIndex: 'num_buyer',
         key: 'num_buyer',
-        sorter: (a, b) => Number(a.num_buyer) - Number(b.num_buyer),
     },
     {
         title: '重量(KG)',
         dataIndex: 'sum_weight',
         key: 'sum_weight',
-        sorter: (a, b) => Number(a.sum_weight) - Number(b.sum_weight),
     },
     {
         title: '金额($)',
         dataIndex: 'sum_amount',
         key: 'sum_amount',
-        sorter: (a, b) => Number(a.sum_amount) - Number(b.sum_amount),
+    },
+    {
+        title: '百分比',  // 新增百分比列
+        dataIndex: 'percentage',
+        key: 'percentage',
+        customRender: ({ record }) => {
+            const total = props.destinationCountryData.allBuckets.count; // 计算总数
+            const percent = total > 0 ? ((record.count / total) * 100).toFixed(2) : 0; // 计算百分比
+            return `${percent}%`;
+        }
     }
 ];
 
@@ -104,7 +118,8 @@ const tableData = computed(() => {
         count: item.count,
         num_buyer: item.num_buyer,
         sum_weight: item.sum_weight,
-        sum_amount: item.sum_amount
+        sum_amount: item.sum_amount,
+        percentage: 0 // 初始化百分比字段
     }));
 });
 
@@ -123,7 +138,8 @@ const updateChart = () => {
         .sort((a, b) => Number(b.count) - Number(a.count))
         .slice(0, 10);
     
-    const total = data.reduce((sum, item) => sum + Number(item.count), 0);
+    const total = props.destinationCountryData.allBuckets.count;
+    const otherCount =  total - data.reduce((sum, item) => sum + Number(item.count), 0);  // 计算剩余的总数
 
     const option = {
         tooltip: {
@@ -164,10 +180,16 @@ const updateChart = () => {
                         fontWeight: 'bold'
                     }
                 },
-                data: data.map(item => ({
-                    name: item.val_cn || item.val,
-                    value: Number(item.count)
-                }))
+                data: [
+                    ...data.map(item => ({
+                        name: item.val_cn || item.val,
+                        value: Number(item.count)
+                    })),
+                    {
+                        name: '其他',
+                        value: otherCount  // 添加"其他"部分
+                    }
+                ]
             }
         ]
     };

src/views/adweb/data/components/HsCodeAnalysis.vue

@@ -1,186 +1,194 @@
 <!-- src/views/adweb/data/components/HsCodeAnalysis.vue -->
 <template>
-    <a-card title="产品">
-      <div>
-        <div class="switch-view">
-          <a-radio-group v-model:value="viewType" button-style="solid">
-            <a-radio-button value="chart">图表</a-radio-button>
-            <a-radio-button value="table">列表</a-radio-button>
-          </a-radio-group>
-        </div>
-        
-        <!-- 图表视图 -->
-        <div v-show="viewType === 'chart'" ref="chartRef" :style="{ height, width }"></div>
-        
-        <!-- 列表视图 -->
-        <div v-show="viewType === 'table'">
-          <a-table :columns="columns" :data-source="tableData" :pagination="false">
-            <template #bodyCell="{ column, record }">
-              <template v-if="column.dataIndex === 'val'">
-                {{ record.val }}
-              </template>
+  <a-card title="产品">
+    <template #extra>
+      <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+        <a-radio-button value="count">交易次数</a-radio-button>
+        <a-radio-button value="sum_weight">交易重量</a-radio-button>
+        <a-radio-button value="sum_amount">交易金额</a-radio-button>
+      </a-radio-group>
+    </template>
+    <div>
+      <div class="switch-view">
+        <a-radio-group v-model:value="viewType" button-style="solid">
+          <a-radio-button value="chart">图表</a-radio-button>
+          <a-radio-button value="table">列表</a-radio-button>
+        </a-radio-group>
+      </div>
+
+      <!-- 图表视图 -->
+      <div v-show="viewType === 'chart'" ref="chartRef" :style="{ height, width }"></div>
+
+      <!-- 列表视图 -->
+      <div v-show="viewType === 'table'">
+        <a-table :columns="columns" :data-source="tableData" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'val'">
+              {{ record.val }}
             </template>
-          </a-table>
-        </div>
+          </template>
+        </a-table>
       </div>
-    </a-card>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted, watch, computed } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref, onMounted, watch, computed } from 'vue';
+import { useECharts } from '/@/hooks/web/useECharts';
+
+export default defineComponent({
+  props: {
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '350px',
+    },
+    hsCodeData: {
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const chartRef = ref<HTMLDivElement | null>(null);
+    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    const viewType = ref<'chart' | 'table'>('chart');
+    const sortMode = ref('count');
+
+    // 格式化函数
+    const formatNumber = (value: string | number) => {
+      if (!value) return '0.00';
+      return Number(value).toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+    };
+
+    // 表格列定义
+    const columns = [
+      {
+        title: 'HS编码',
+        dataIndex: 'val',
+        key: 'val',
       },
-      height: {
-        type: String as PropType<string>,
-        default: '350px',
+      {
+        title: '重量（KG）',
+        dataIndex: 'sum_weight',
+        key: 'sum_weight',
+        customRender: ({ text }) => formatNumber(text),
       },
-      hsCodeData: {
-        default: () => ({}),
+      {
+        title: '金额（$）',
+        dataIndex: 'sum_amount',
+        key: 'sum_amount',
+        customRender: ({ text }) => formatNumber(text),
       },
-    },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const viewType = ref<'chart' | 'table'>('chart');
-  
-      // 格式化函数
-      const formatNumber = (value: string | number) => {
-        if (!value) return '0.00';
-        return Number(value).toLocaleString('en-US', {
-          minimumFractionDigits: 2,
-          maximumFractionDigits: 2,
-        });
-      };
-  
-      // 表格列定义
-      const columns = [
-        {
-          title: 'HS编码',
-          dataIndex: 'val',
-          key: 'val',
+      {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+        customRender: ({ text }) => {
+          return text ? Number(text).toLocaleString('en-US') : '0';
         },
-        {
-          title: '重量（KG）',
-          dataIndex: 'sum_weight',
-          key: 'sum_weight',
-          customRender: ({ text }) => formatNumber(text),
+      },
+    ];
+
+    // 计算表格数据
+    const tableData = computed(() => {
+      return props.hsCodeData?.buckets || [];
+    });
+
+    const updateChart = () => {
+      const chartData = tableData.value;
+      if (!chartData.length) return;
+
+      // 取前10条数据展示
+      const top10Data = chartData.slice(0, 10);
+
+      const colors = ['#53A2D3', '#FF6B6B', '#4ECDC4', '#45B7AF', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B59B6', '#3498DB', '#E67E22'];
+
+      setOptions({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
         },
-        {
-          title: '金额（$）',
-          dataIndex: 'sum_amount',
-          key: 'sum_amount',
-          customRender: ({ text }) => formatNumber(text),
+
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
         },
-        {
-          title: '交易次数',
-          dataIndex: 'count',
-          key: 'count',
-          customRender: ({ text }) => {
-            return text ? Number(text).toLocaleString('en-US') : '0';
+        xAxis: {
+          type: 'category',
+          data: top10Data.map(item => item.val),
+          axisLabel: {
+            rotate: 45,
           },
-        },
-      ];
-  
-      // 计算表格数据
-      const tableData = computed(() => {
-        return props.hsCodeData?.buckets || [];
-      });
-  
-      const updateChart = () => {
-        const chartData = tableData.value;
-        if (!chartData.length) return;
-        
-        // 取前10条数据展示
-        const top10Data = chartData.slice(0, 10);
-        
-        const colors = ['#53A2D3', '#FF6B6B', '#4ECDC4', '#45B7AF', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B59B6', '#3498DB', '#E67E22'];
-        
-        setOptions({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow',
+          axisLine: {
+            lineStyle: {
+              color: '#ccc',
             },
           },
-          
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          },
-          xAxis: {
-            type: 'category',
-            data: top10Data.map(item => item.val),
-            axisLabel: {
-              rotate: 45,
-            },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '交易次数',
+            position: 'left',
             axisLine: {
               lineStyle: {
-                color: '#ccc',
+                color: '#53A2D3',
               },
             },
-          },
-          yAxis: [
-            {
-              type: 'value',
-              name: '交易次数',
-              position: 'left',
-              axisLine: {
-                lineStyle: {
-                  color: '#53A2D3',
-                },
-              },
-            }
-          ],
-          series: [
-            {
-              name: '交易次数',
-              type: 'bar',
-              yAxisIndex: 0,
-              data: top10Data.map((item, index) => ({
-                value: Number(item.count),
-                itemStyle: {
-                  color: colors[index]
-                }
-              })),
-            }
-          ],
-        });
-      };
-  
-      watch(
-        () => props.hsCodeData,
-        () => {
-          updateChart();
-        },
-        { deep: true }
-      );
-  
-      onMounted(() => {
-        updateChart();
+          }
+        ],
+        series: [
+          {
+            name: '交易次数',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: top10Data.map((item, index) => ({
+              value: Number(item.count),
+              itemStyle: {
+                color: colors[index]
+              }
+            })),
+          }
+        ],
       });
-  
-      return {
-        chartRef,
-        viewType,
-        columns,
-        tableData,
-        formatNumber,
-      };
-    },
-  });
-  </script>
-  
-  <style scoped>
-  .switch-view {
-    text-align: right;
-    margin-bottom: 16px;
-  }
-  </style>
+    };
+
+    watch(
+      () => props.hsCodeData,
+      () => {
+        updateChart();
+      },
+      { deep: true }
+    );
+
+    onMounted(() => {
+      updateChart();
+    });
+
+    return {
+      chartRef,
+      viewType,
+      sortMode,
+      columns,
+      tableData,
+      formatNumber,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.switch-view {
+  margin-bottom: 16px;
+}
+</style>

src/views/adweb/data/components/OriginCountryAnalysis.vue

@@ -1,24 +1,26 @@
 <template>
     <a-card title="原产国" :loading="loading">
-        <!-- 添加切换按钮组 -->
         <template #extra>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+                <a-radio-button value="count">交易次数</a-radio-button>
+                <a-radio-button value="sum_weight">交易重量</a-radio-button>
+                <a-radio-button value="sum_amount">交易金额</a-radio-button>
+            </a-radio-group>
+        </template>
+        <!-- 添加切换按钮组 -->
+        <div>
             <a-radio-group v-model:value="viewMode" button-style="solid">
                 <a-radio-button value="chart">图表</a-radio-button>
                 <a-radio-button value="table">列表</a-radio-button>
             </a-radio-group>
-        </template>
+        </div>
 
         <!-- 图表视图 -->
         <div v-show="viewMode === 'chart'" ref="chartRef" style="height: 400px"></div>
 
         <!-- 表格视图 -->
-        <a-table
-            v-show="viewMode === 'table'"
-            :columns="columns"
-            :data-source="tableData"
-            :pagination="false"
-            size="middle"
-        >
+        <a-table v-show="viewMode === 'table'" :columns="columns" :data-source="tableData" :pagination="false"
+            size="middle">
             <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'count' || column.dataIndex === 'num_supplier'">
                     {{ formatNumber(record[column.dataIndex]) }}
@@ -45,6 +47,7 @@ const props = defineProps({
 const chartRef = ref(null);
 const loading = ref(false);
 const viewMode = ref('chart');
+const sortMode = ref('count');
 let chart = null;
 
 // 定义表格列
@@ -58,25 +61,31 @@ const columns = [
         title: '交易次数',
         dataIndex: 'count',
         key: 'count',
-        sorter: (a, b) => Number(a.count) - Number(b.count),
     },
     {
         title: '供应商数量',
         dataIndex: 'num_supplier',
         key: 'num_supplier',
-        sorter: (a, b) => Number(a.num_supplier) - Number(b.num_supplier),
     },
     {
         title: '重量(KG)',
         dataIndex: 'sum_weight',
         key: 'sum_weight',
-        sorter: (a, b) => Number(a.sum_weight) - Number(b.sum_weight),
     },
     {
         title: '金额($)',
         dataIndex: 'sum_amount',
         key: 'sum_amount',
-        sorter: (a, b) => Number(a.sum_amount) - Number(b.sum_amount),
+    },
+    {
+        title: '百分比',  // 新增百分比列
+        dataIndex: 'percentage',
+        key: 'percentage',
+        customRender: ({ record }) => {
+            const total = props.originCountryData.allBuckets.count; // 计算总数
+            const percent = total > 0 ? ((record.count / total) * 100).toFixed(2) : 0; // 计算百分比
+            return `${percent}%`;
+        }
     }
 ];
 
@@ -96,20 +105,21 @@ const formatDecimal = (num: string | number) => {
 // 计算表格数据
 const tableData = computed(() => {
     if (!props.originCountryData?.buckets) return [];
-    
+
     return props.originCountryData.buckets.map((item, index) => ({
         key: index,
         country: item.val_cn || item.val,
         count: item.count,
         num_supplier: item.num_supplier,
         sum_weight: item.sum_weight,
-        sum_amount: item.sum_amount
+        sum_amount: item.sum_amount,
+        percentage: 0
     }));
 });
 
 const initChart = () => {
     if (!chartRef.value) return;
-    
+
     chart = echarts.init(chartRef.value);
     updateChart();
 };
@@ -121,8 +131,9 @@ const updateChart = () => {
     const data = props.originCountryData.buckets
         .sort((a, b) => Number(b.count) - Number(a.count))
         .slice(0, 10);
-    
-    const total = data.reduce((sum, item) => sum + Number(item.count), 0);
+
+    const total = props.originCountryData.allBuckets.count;
+    const otherCount = total - data.reduce((sum, item) => sum + Number(item.count), 0);  // 计算剩余的总数
 
     const option = {
         tooltip: {
@@ -163,10 +174,16 @@ const updateChart = () => {
                         fontWeight: 'bold'
                     }
                 },
-                data: data.map(item => ({
-                    name: item.val_cn || item.val,
-                    value: Number(item.count)
-                }))
+                data: [
+                    ...data.map(item => ({
+                        name: item.val_cn || item.val,
+                        value: Number(item.count)
+                    })),
+                    {
+                        name: '其他',
+                        value: otherCount  // 添加“其他”部分
+                    }
+                ]
             }
         ]
     };

src/views/adweb/data/components/SupplierList.vue

@@ -1,16 +1,17 @@
 <template>
     <a-card title="供应商">
+        <template #extra>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+                <a-radio-button value="count">交易次数</a-radio-button>
+                <a-radio-button value="sum_weight">交易重量</a-radio-button>
+                <a-radio-button value="sum_amount">交易金额</a-radio-button>
+            </a-radio-group>
+        </template>
         <div>
-        <a-table
-            :columns="columns"
-            :data-source="tableData"
-            :loading="loading"
-            row-key="fk"
-            :pagination="false"
-        />
-    </div>
+            <a-table :columns="columns" :data-source="tableData" :loading="loading" row-key="fk" :pagination="false" />
+        </div>
     </a-card>
-   
+
 </template>
 
 <script lang="ts" setup>
@@ -24,6 +25,8 @@ const props = defineProps({
 });
 const loading = ref(false);
 
+const sortMode = ref('count');
+
 const columns = [
     {
         title: '供应商名称',
@@ -35,7 +38,7 @@ const columns = [
         dataIndex: 'num_buyer',
         key: 'num_buyer',
         customRender: ({ text }) => {
-          return text ? text.toLocaleString('en-US') : '0';
+            return text ? text.toLocaleString('en-US') : '0';
         },
     },
     {
@@ -55,27 +58,27 @@ const columns = [
         dataIndex: 'count',
         key: 'count',
         customRender: ({ text }) => {
-          return text ? text.toLocaleString('en-US') : '0';
+            return text ? text.toLocaleString('en-US') : '0';
         },
     },
 ];
 // 计算表格数据
 const tableData = computed(() => {
     if (!props.supplierData?.buckets) return [];  // 修改属性名
-    
+
     return props.supplierData.buckets;
 });
 // 格式化函数
 const formatNumber = (value: number | string) => {
-      if (!value) return '0.00';
-      return Number(value).toLocaleString('en-US', {
+    if (!value) return '0.00';
+    return Number(value).toLocaleString('en-US', {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2,
-      });
-    };
+    });
+};
 
 onMounted(async () => {
-   
+
 });
 // 监听数据变化
 watch(

src/views/adweb/data/customsData.vue

@@ -416,7 +416,6 @@ import FreightHistory from './components/FreightHistory.vue';
 import TradePartners from './components/TradePartners.vue';
 import RegionDistribution from './components/RegionDistribution.vue';
 import CompanyProduct from './components/CompanyProduct.vue';
-import { index } from 'd3';
 
 const supplier = ref<{ name: string; address: string; postal_code: string } | null>(null);