数据统计-商品分类排行榜

src/plugins/echarts.js

@@ -1,7 +1,12 @@
 import * as echarts from "echarts/core";
-import { GridComponent, TooltipComponent } from "echarts/components";
-import { LineChart } from "echarts/charts";
-import { UniversalTransition } from "echarts/features";
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from "echarts/components";
+import { LineChart, PieChart } from "echarts/charts";
+import { UniversalTransition, LabelLayout } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([
   GridComponent,
@@ -9,5 +14,9 @@ echarts.use([
   LineChart,
   CanvasRenderer,
   UniversalTransition,
+  TitleComponent,
+  LegendComponent,
+  PieChart,
+  LabelLayout,
 ]);
 export default echarts;

src/views/platform/data_statistics/category_ranking.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="app-container">
+        <el-row>
+            <el-col :span="14">
+                <el-form>
+                    <el-form-item>
+                        <el-autocomplete class="inline-input" v-model="queryParams.storeName"
+                            :fetch-suggestions="querySearch" placeholder="全部店铺"></el-autocomplete>
+                    </el-form-item>
+                    <el-form-item prop="dateRange">
+                        <el-date-picker v-model="queryParams.dateRange" value-format="yyyy-MM-dd" type="daterange"
+                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                    </el-form-item>
+                </el-form>
+
+                <el-table :data="dataList">
+                    <el-table-column label="分类名称" align="center">生鲜水果</el-table-column>
+                    <el-table-column label="支付商品数量" align="center">53221</el-table-column>
+                    <el-table-column label="支付商品金额" align="center">￥78615.54</el-table-column>
+                    <el-table-column label="退款商品数量" align="center">235</el-table-column>
+                    <el-table-column label="退款商品金额" align="center">￥574.36</el-table-column>
+                    <el-table-column label="退款率" align="center">0.9%</el-table-column>
+                </el-table>
+            </el-col>
+            <el-col :span="10">
+                <div ref="chart" class="chart"></div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import echarts from "@/plugins/echarts"
+export default {
+    name: 'CategoryRanking',
+    data() {
+        return {
+            queryParams: {
+                storeName: undefined,
+                dateRange: undefined
+            },
+            dataList: [{}]
+        }
+    },
+    mounted() {
+        this.initCharts()
+    },
+    methods: {
+        querySearch() {
+
+        },
+        initCharts() {
+            let myChart = echarts.init(this.$refs.chart);
+            let option;
+
+            option = {
+                title: {
+                    text: '商品交易金额占比',
+                    bottom: '0',
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    left: 'center',
+                    textStyle: {
+                        fontSize: 16
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: '60%',
+                        data: Array.from(new Array(5).keys()).map(item => { return { value: Math.round(Math.random() * 1000), name: `分类名称${item}` } }),
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        label: {
+                            fontSize: 16,
+                            formatter: '{b}\n{c}'
+                        }
+                    }
+                ]
+            };
+
+            option && myChart.setOption(option);
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.chart {
+    height: 500px;
+}
+</style>