feature: search pie

src/components/Charts/MiniSmoothArea.vue

+<template>
+  <div :class="prefixCls">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="100" :data="dataSource" :scale="scale" :padding="[36, 0, 18, 0]">
+        <v-tooltip />
+        <v-smooth-line position="x*y" :size="2" />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniSmoothArea',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-smooth-area'
+    },
+    scale: {
+      type: [Object, Array],
+      required: true
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "smooth.area.less";
+</style>

src/components/Charts/smooth.area.less

+@import "../index";
+
+@smoothArea-prefix-cls: ~"@{ant-pro-prefix}-smooth-area";
+
+.@{smoothArea-prefix-cls} {
+    position: relative;
+    width: 100%;
+
+    .chart-wrapper {
+        position: absolute;
+        bottom: -28px;
+        width: 100%;
+    }
+}
\ No newline at end of file

src/components/index.js

@@ -3,6 +3,7 @@ import Bar from '@/components/Charts/Bar'
 import ChartCard from '@/components/Charts/ChartCard'
 import Liquid from '@/components/Charts/Liquid'
 import MiniArea from '@/components/Charts/MiniArea'
+import MiniSmoothArea from '@/components/Charts/MiniSmoothArea'
 import MiniBar from '@/components/Charts/MiniBar'
 import MiniProgress from '@/components/Charts/MiniProgress'
 import Radar from '@/components/Charts/Radar'
@@ -30,6 +31,7 @@ export {
   ChartCard,
   Liquid,
   MiniArea,
+  MiniSmoothArea,
   MiniBar,
   MiniProgress,
   Radar,

src/core/icons.js

+/**
+ * Custom icon list
+ * All icons are loaded here for easy management
+ * @see https://vue.ant.design/components/icon/#Custom-Font-Icon
+ *
+ * 自定义图标加载表
+ * 所有图标均从这里加载，方便管理
+ */
 import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline' // path to your '*.svg?inline' file.
 
 export { bxAnaalyse }

src/views/dashboard/Analysis.vue

@@ -101,7 +101,7 @@
 
     <a-row :gutter="12">
       <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px' }">
+        <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', height: '500px' }">
           <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
             <a class="ant-dropdown-link" href="#">
               <a-icon type="ellipsis" />
@@ -115,29 +115,81 @@
               </a-menu-item>
             </a-menu>
           </a-dropdown>
-          <p>card content</p>
-          <p>card content</p>
-          <p>card content</p>
+          <a-row :gutter="68">
+            <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
+              <number-info :total="12321" :sub-total="17.1">
+                <span slot="subtitle">
+                  <span>搜索用户数</span>
+                  <a-tooltip title="指标说明" slot="action">
+                    <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
+                  </a-tooltip>
+                </span>
+              </number-info>
+              <!-- miniChart -->
+              <div>
+                <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
+              </div>
+            </a-col>
+            <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
+              <number-info :total="2.7" :sub-total="26.2" status="down">
+                <span slot="subtitle">
+                  <span>人均搜索次数</span>
+                  <a-tooltip title="指标说明" slot="action">
+                    <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
+                  </a-tooltip>
+                </span>
+              </number-info>
+              <!-- miniChart -->
+              <div>
+                <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
+              </div>
+            </a-col>
+          </a-row>
+          <div class="ant-table-wrapper">
+            <a-table
+              row-key="index"
+              size="small"
+              :columns="searchTableColumns"
+              :dataSource="searchData"
+              :pagination="{ pageSize: 5 }"
+            />
+          </div>
         </a-card>
       </a-col>
       <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px' }">
-          <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
-            <a class="ant-dropdown-link" href="#">
-              <a-icon type="ellipsis" />
-            </a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a href="javascript:;">操作一</a>
-              </a-menu-item>
-              <a-menu-item>
-                <a href="javascript:;">操作二</a>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-          <p>card content</p>
-          <p>card content</p>
-          <p>card content</p>
+        <a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px', height: '500px' }">
+          <div slot="extra" style="height: inherit;">
+            <div style="bottom: 12px;display: inline-block;">
+              <a-radio-group defaultValue="a">
+                <a-radio-button value="a">全部渠道</a-radio-button>
+                <a-radio-button value="b">线上</a-radio-button>
+                <a-radio-button value="c">门店</a-radio-button>
+              </a-radio-group>
+            </div>
+            <span class="dashboard-analysis-iconGroup">
+              <a-dropdown :trigger="['click']" placement="bottomLeft">
+                <a-icon type="ellipsis" class="ant-dropdown-link" />
+                <a-menu slot="overlay">
+                  <a-menu-item>
+                    <a href="javascript:;">操作一</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">操作二</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </span>
+          </div>
+          <h4>销售额</h4>
+          <div>
+            <v-chart :force-fit="true" :height="350" :data="pieData" :scale="pieScale">
+              <v-tooltip :showTitle="false" dataKey="item*percent" />
+              <v-axis />
+              <v-legend dataKey="item" />
+              <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
+              <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
+            </v-chart>
+          </div>
         </a-card>
       </a-col>
     </a-row>
@@ -145,9 +197,8 @@
 </template>
 
 <script>
-import ACol from 'ant-design-vue/es/grid/Col'
-import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
-import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend } from '@/components'
+import moment from 'moment'
+import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
 
 const rankList = []
 for (let i = 0; i < 7; i++) {
@@ -157,23 +208,122 @@ for (let i = 0; i < 7; i++) {
   })
 }
 
+const searchUserData = []
+for (let i = 0; i < 7; i++) {
+  searchUserData.push({
+    x: moment().add(i, 'days').format('YYYY-MM-DD'),
+    y: Math.ceil(Math.random() * 10)
+  })
+}
+const searchUserScale = [
+  {
+    dataKey: 'x',
+    alias: '时间'
+  },
+  {
+    dataKey: 'y',
+    alias: '用户数',
+    min: 0,
+    max: 10
+  }]
+
+const searchTableColumns = [
+  {
+    dataIndex: 'index',
+    title: '排名',
+    width: 90
+  },
+  {
+    dataIndex: 'keyword',
+    title: '搜索关键词'
+  },
+  {
+    dataIndex: 'count',
+    title: '用户数',
+    width: 164
+  },
+  {
+    dataIndex: 'range',
+    title: '周涨幅',
+    align: 'right',
+    sorter: (a, b) => a.range - b.range,
+    width: 164
+  }
+]
+const searchData = []
+for (let i = 0; i < 50; i += 1) {
+  searchData.push({
+    index: i + 1,
+    keyword: `搜索关键词-${i}`,
+    count: Math.floor(Math.random() * 1000),
+    range: Math.floor(Math.random() * 100),
+    status: Math.floor((Math.random() * 10) % 2)
+  })
+}
+
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '家用电器', count: 32.2 },
+  { item: '食用酒水', count: 21 },
+  { item: '个护健康', count: 17 },
+  { item: '服饰箱包', count: 13 },
+  { item: '母婴产品', count: 9 },
+  { item: '其他', count: 7.8 }
+]
+
+const pieScale = [{
+  dataKey: 'percent',
+  min: 0,
+  formatter: '.0%'
+}]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'percent',
+  field: 'count',
+  dimension: 'item',
+  as: 'percent'
+})
+const pieData = dv.rows
+
 export default {
   name: 'Analysis',
   components: {
-    ATooltip,
-    ACol,
     ChartCard,
     MiniArea,
     MiniBar,
     MiniProgress,
     RankList,
     Bar,
-    Trend
+    Trend,
+    NumberInfo,
+    MiniSmoothArea
   },
   data () {
     return {
       loading: true,
-      rankList
+      rankList,
+
+      // 搜索用户数
+      searchUserData,
+      searchUserScale,
+      searchTableColumns,
+      searchData,
+
+      //
+      pieScale,
+      pieData,
+      sourceData,
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      },
+      labelConfig: ['percent', {
+        formatter: (val, item) => {
+          return item.point.item + ': ' + val
+        }
+      }]
     }
   },
   created () {
@@ -198,4 +348,14 @@ export default {
       }
     }
   }
+
+  .dashboard-analysis-iconGroup {
+    i {
+      margin-left: 16px;
+      color: rgba(0,0,0,.45);
+      cursor: pointer;
+      transition: color .32s;
+      color: black;
+    }
+  }
 </style>