1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| <template>
| <div id="name" style="width: 100%; height: 100%">
| <!-- 渲染 ECharts 饼图 -->
| <Echart :options="options" style="width: 100%; height: 100%"></Echart>
| </div>
| </template>
|
| <script>
| import { currentGET } from "api/modules";
| import { GetCPLargeStockCount } from "@/api/http.js";
| import * as echarts from 'echarts';
|
| export default {
| data() {
| return {
| pageflag: true,
| options: {}, // 存储 ECharts 配置
| timer: null // 定时器标识
| };
| },
| created() {
| this.getData();
| },
| methods: {
| async getData() {
| const rep = await GetCPLargeStockCount();
| // 组装饼图数据：[{value: 数量, name: 产品编码}, ...]
| const pieData = rep.map(item => ({
| value: item.qtys,
| name: item.pCode
| }));
| // 计算总和，用于计算百分比
| const total = pieData.reduce((acc, cur) => acc + cur.value, 0);
| // 配置 ECharts 饼图
| this.options = {
| backgroundColor: '#000',
| tooltip: {
| trigger: 'item', // 鼠标悬浮提示，触发方式为“item”（针对饼图扇区）
| },
|
| series: [
| {
| name: '客户代码',
| type: 'pie',
| radius: ['40%', '70%'], // 饼图内外半径，实现环形/扇形效果
| center: ['50%', '50%'], // 饼图在容器中的中心位置
| color: [
| 'rgba(135,183,255, 1)', // 对应示例饼图颜色，可按需调整
| 'rgba(248,195,248, 1)',
| 'rgba(100,255,249, 1)',
| 'rgba(100,255,249, 1)',
| 'rgba(248,195,248, 1)'
| ],
| label: {
| show: true,
| position: 'outside',
| textStyle: {
| color: '#b3ccf8',
| fontSize: 14,
| fontFamily: 'PingFangSC-Regular'
| },
| // 格式化标签，显示名称和百分比
| formatter: (params) => {
| const percent = ((params.value / total) * 100).toFixed(2) + '%';
| return `${params.name}\n${percent}`;
| }
| },
| data: pieData,
| },
| ],
| };
| },
| // 轮询（每隔一天请求一次数据）
| switper() {
| if (this.timer) return;
| // 每隔一天（86400000 毫秒）执行一次 getData
| this.timer = setInterval(() => {
| this.getData();
| }, 86400000);
| },
| },
| beforeDestroy() {
| // 组件销毁时清除定时器
| if (this.timer) {
| clearInterval(this.timer);
| this.timer = null;
| }
| },
| mounted() {
| this.switper(); // 挂载后启动定时器
| }
| };
| </script>
|
| <style lang='scss' scoped>
| /* 若无需特殊样式，可简化或删除 */
| </style>
|
|
