Skip to content

Commit 2f939dc

Browse files
sendyasendya
committed
feature: search pie
1 parent ea9404d commit 2f939dc

File tree

5 files changed

+252
-28
lines changed

5 files changed

+252
-28
lines changed

‎src/components/Charts/MiniSmoothArea.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div :class="prefixCls">
3+
<div class="chart-wrapper" :style="{ height: 46 }">
4+
<v-chart :force-fit="true" :height="100" :data="dataSource" :scale="scale" :padding="[36, 0, 18, 0]">
5+
<v-tooltip />
6+
<v-smooth-line position="x*y" :size="2" />
7+
<v-smooth-area position="x*y" />
8+
</v-chart>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'MiniSmoothArea',
16+
props: {
17+
prefixCls: {
18+
type: String,
19+
default: 'ant-pro-smooth-area'
20+
},
21+
scale: {
22+
type: [Object, Array],
23+
required: true
24+
},
25+
dataSource: {
26+
type: Array,
27+
required: true
28+
}
29+
},
30+
data () {
31+
return {
32+
height: 100
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style lang="less" scoped>
39+
@import "smooth.area.less";
40+
</style>

‎src/components/Charts/smooth.area.less‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import "../index";
2+
3+
@smoothArea-prefix-cls: ~"@{ant-pro-prefix}-smooth-area";
4+
5+
.@{smoothArea-prefix-cls} {
6+
position: relative;
7+
width: 100%;
8+
9+
.chart-wrapper {
10+
position: absolute;
11+
bottom: -28px;
12+
width: 100%;
13+
}
14+
}

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Bar from '@/components/Charts/Bar'
33
import ChartCard from '@/components/Charts/ChartCard'
44
import Liquid from '@/components/Charts/Liquid'
55
import MiniArea from '@/components/Charts/MiniArea'
6+
import MiniSmoothArea from '@/components/Charts/MiniSmoothArea'
67
import MiniBar from '@/components/Charts/MiniBar'
78
import MiniProgress from '@/components/Charts/MiniProgress'
89
import Radar from '@/components/Charts/Radar'
@@ -30,6 +31,7 @@ export {
3031
ChartCard,
3132
Liquid,
3233
MiniArea,
34+
MiniSmoothArea,
3335
MiniBar,
3436
MiniProgress,
3537
Radar,

‎src/core/icons.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/**
2+
* Custom icon list
3+
* All icons are loaded here for easy management
4+
* @see https://vue.ant.design/components/icon/#Custom-Font-Icon
5+
*
6+
* 自定义图标加载表
7+
* 所有图标均从这里加载，方便管理
8+
*/
19
import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline' // path to your '*.svg?inline' file.
210

311
export { bxAnaalyse }

‎src/views/dashboard/Analysis.vue‎

Lines changed: 188 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101

102102
<a-row :gutter="12">
103103
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
104-
<a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px' }">
104+
<a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', height: '500px' }">
105105
<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
106106
<a class="ant-dropdown-link" href="#">
107107
<a-icon type="ellipsis" />
@@ -115,39 +115,90 @@
115115
</a-menu-item>
116116
</a-menu>
117117
</a-dropdown>
118-
<p>card content</p>
119-
<p>card content</p>
120-
<p>card content</p>
118+
<a-row :gutter="68">
119+
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
120+
<number-info :total="12321" :sub-total="17.1">
121+
<span slot="subtitle">
122+
<span>搜索用户数</span>
123+
<a-tooltip title="指标说明" slot="action">
124+
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
125+
</a-tooltip>
126+
</span>
127+
</number-info>
128+
<!-- miniChart -->
129+
<div>
130+
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
131+
</div>
132+
</a-col>
133+
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
134+
<number-info :total="2.7" :sub-total="26.2" status="down">
135+
<span slot="subtitle">
136+
<span>人均搜索次数</span>
137+
<a-tooltip title="指标说明" slot="action">
138+
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
139+
</a-tooltip>
140+
</span>
141+
</number-info>
142+
<!-- miniChart -->
143+
<div>
144+
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
145+
</div>
146+
</a-col>
147+
</a-row>
148+
<div class="ant-table-wrapper">
149+
<a-table
150+
row-key="index"
151+
size="small"
152+
:columns="searchTableColumns"
153+
:dataSource="searchData"
154+
:pagination="{ pageSize: 5 }"
155+
/>
156+
</div>
121157
</a-card>
122158
</a-col>
123159
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
124-
<a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px' }">
125-
<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
126-
<a class="ant-dropdown-link" href="#">
127-
<a-icon type="ellipsis" />
128-
</a>
129-
<a-menu slot="overlay">
130-
<a-menu-item>
131-
<a href="javascript:;">操作一</a>
132-
</a-menu-item>
133-
<a-menu-item>
134-
<a href="javascript:;">操作二</a>
135-
</a-menu-item>
136-
</a-menu>
137-
</a-dropdown>
138-
<p>card content</p>
139-
<p>card content</p>
140-
<p>card content</p>
160+
<a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px', height: '500px' }">
161+
<div slot="extra" style="height: inherit;">
162+
<div style="bottom: 12px;display: inline-block;">
163+
<a-radio-group defaultValue="a">
164+
<a-radio-button value="a">全部渠道</a-radio-button>
165+
<a-radio-button value="b">线上</a-radio-button>
166+
<a-radio-button value="c">门店</a-radio-button>
167+
</a-radio-group>
168+
</div>
169+
<span class="dashboard-analysis-iconGroup">
170+
<a-dropdown :trigger="['click']" placement="bottomLeft">
171+
<a-icon type="ellipsis" class="ant-dropdown-link" />
172+
<a-menu slot="overlay">
173+
<a-menu-item>
174+
<a href="javascript:;">操作一</a>
175+
</a-menu-item>
176+
<a-menu-item>
177+
<a href="javascript:;">操作二</a>
178+
</a-menu-item>
179+
</a-menu>
180+
</a-dropdown>
181+
</span>
182+
</div>
183+
<h4>销售额</h4>
184+
<div>
185+
<v-chart :force-fit="true" :height="350" :data="pieData" :scale="pieScale">
186+
<v-tooltip :showTitle="false" dataKey="item*percent" />
187+
<v-axis />
188+
<v-legend dataKey="item" />
189+
<v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
190+
<v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
191+
</v-chart>
192+
</div>
141193
</a-card>
142194
</a-col>
143195
</a-row>
144196
</div>
145197
</template>
146198

147199
<script>
148-
import ACol from 'ant-design-vue/es/grid/Col'
149-
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
150-
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend } from '@/components'
200+
import moment from 'moment'
201+
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
151202
152203
const rankList = []
153204
for (let i = 0; i < 7; i++) {
@@ -157,23 +208,122 @@ for (let i = 0; i < 7; i++) {
157208
})
158209
}
159210
211+
const searchUserData = []
212+
for (let i = 0; i < 7; i++) {
213+
searchUserData.push({
214+
x: moment().add(i, 'days').format('YYYY-MM-DD'),
215+
y: Math.ceil(Math.random() * 10)
216+
})
217+
}
218+
const searchUserScale = [
219+
{
220+
dataKey: 'x',
221+
alias: '时间'
222+
},
223+
{
224+
dataKey: 'y',
225+
alias: '用户数',
226+
min: 0,
227+
max: 10
228+
}]
229+
230+
const searchTableColumns = [
231+
{
232+
dataIndex: 'index',
233+
title: '排名',
234+
width: 90
235+
},
236+
{
237+
dataIndex: 'keyword',
238+
title: '搜索关键词'
239+
},
240+
{
241+
dataIndex: 'count',
242+
title: '用户数',
243+
width: 164
244+
},
245+
{
246+
dataIndex: 'range',
247+
title: '周涨幅',
248+
align: 'right',
249+
sorter: (a, b) => a.range - b.range,
250+
width: 164
251+
}
252+
]
253+
const searchData = []
254+
for (let i = 0; i < 50; i += 1) {
255+
searchData.push({
256+
index: i + 1,
257+
keyword: `搜索关键词-${i}`,
258+
count: Math.floor(Math.random() * 1000),
259+
range: Math.floor(Math.random() * 100),
260+
status: Math.floor((Math.random() * 10) % 2)
261+
})
262+
}
263+
264+
const DataSet = require('@antv/data-set')
265+
266+
const sourceData = [
267+
{ item: '家用电器', count: 32.2 },
268+
{ item: '食用酒水', count: 21 },
269+
{ item: '个护健康', count: 17 },
270+
{ item: '服饰箱包', count: 13 },
271+
{ item: '母婴产品', count: 9 },
272+
{ item: '其他', count: 7.8 }
273+
]
274+
275+
const pieScale = [{
276+
dataKey: 'percent',
277+
min: 0,
278+
formatter: '.0%'
279+
}]
280+
281+
const dv = new DataSet.View().source(sourceData)
282+
dv.transform({
283+
type: 'percent',
284+
field: 'count',
285+
dimension: 'item',
286+
as: 'percent'
287+
})
288+
const pieData = dv.rows
289+
160290
export default {
161291
name: 'Analysis',
162292
components: {
163-
ATooltip,
164-
ACol,
165293
ChartCard,
166294
MiniArea,
167295
MiniBar,
168296
MiniProgress,
169297
RankList,
170298
Bar,
171-
Trend
299+
Trend,
300+
NumberInfo,
301+
MiniSmoothArea
172302
},
173303
data () {
174304
return {
175305
loading: true,
176-
rankList
306+
rankList,
307+
308+
// 搜索用户数
309+
searchUserData,
310+
searchUserScale,
311+
searchTableColumns,
312+
searchData,
313+
314+
//
315+
pieScale,
316+
pieData,
317+
sourceData,
318+
pieStyle: {
319+
stroke: '#fff',
320+
lineWidth: 1
321+
},
322+
labelConfig: ['percent', {
323+
formatter: (val, item) => {
324+
return item.point.item + ': ' + val
325+
}
326+
}]
177327
}
178328
},
179329
created () {
@@ -198,4 +348,14 @@ export default {
198348
}
199349
}
200350
}
351+
352+
.dashboard-analysis-iconGroup {
353+
i {
354+
margin-left: 16px;
355+
color: rgba(0,0,0,.45);
356+
cursor: pointer;
357+
transition: color .32s;
358+
color: black;
359+
}
360+
}
201361
</style>

0 commit comments

Comments
 (0)