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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| import type * as echarts from 'echarts';
| import { buildProps } from 'element-plus/es/utils/vue/props/runtime';
| import _ from 'lodash';
| import type { ExtractPropTypes, PropType } from 'vue';
| import { axisLabelFormatter } from '/@/utils/chart';
|
| export const timeDataOptionToContent = (opt) => {
| const headerList = [opt.xAxis[0]]
| .concat(opt.yAxis)
| .map((item) => `<td>${item.name}</td>`)
| .join('');
| const title = opt.title?.[0]?.text ?? '';
| let table =
| '<div style="border:1px solid black"><h3>' +
| title +
| '</h3><table style="width:100%;text-align:center"><tbody><tr>' +
| headerList +
| '</tr>';
| const timeData = new Set();
| const dataMap = opt.series.map((item) => {
| for (const subItem of item.data) {
| timeData.add(subItem[0]);
| }
| return new Map(item.data);
| });
| const bodyList = Array.from(timeData)
| .toSorted((a, b) => {
| return (a as any).localeCompare(b);
| })
| .map((item) => {
| return `<tr><td>${item}</td>${dataMap.map((itemMap) => `<td>${itemMap.get(item) ?? ''}</td>`)}</tr>`;
| })
| .join('');
| table += bodyList;
|
| table += '</tbody></table></div>';
| return table;
| };
|
| export const PATH_ICON = {
| scatter:
| 'path://M445.7 609.8c0 19.4 10.3 37.3 27.1 46.9 16.8 9.7 37.4 9.7 54.2 0 16.8-9.7 27.1-27.6 27.1-46.9 0-29.9-24.3-54.2-54.2-54.2s-54.2 24.3-54.2 54.2z m0 0M179.2 613.8c-42.2 0-76.5 34.3-76.5 76.5s34.3 76.5 76.5 76.5 76.5-34.3 76.5-76.5-34.3-76.5-76.5-76.5z m0 0M144.9 401.1c0 29 23.5 52.5 52.5 52.5s52.5-23.5 52.5-52.5-23.5-52.5-52.5-52.5-52.5 23.5-52.5 52.5z m0 0M598.7 404c0 42.2 34.3 76.5 76.5 76.5 42.3 0 76.5-34.3 76.5-76.5 0-42.3-34.3-76.5-76.5-76.5-42.3 0-76.5 34.3-76.5 76.5z m0 0M849.3 169.2c-42.2 0-76.5 34.3-76.5 76.5s34.3 76.5 76.5 76.5 76.5-34.3 76.5-76.5-34.3-76.5-76.5-76.5z m0 0M261.6 583.1c0 13.2 7.1 25.5 18.5 32.1 11.5 6.6 25.6 6.6 37.1 0s18.5-18.9 18.5-32.1c0-20.5-16.6-37.1-37.1-37.1-20.4 0.1-37 16.7-37 37.1z m0 0M276.8 425.1c0 42.3 34.3 76.5 76.5 76.5 42.3 0 76.5-34.3 76.5-76.5s-34.3-76.5-76.5-76.5-76.5 34.3-76.5 76.5z m0 0M445.7 421.4c0 18.5 9.9 35.5 25.8 44.8 16 9.2 35.7 9.2 51.7 0s25.8-26.3 25.8-44.8c0-28.5-23.1-51.7-51.7-51.7-28.5 0-51.6 23.2-51.6 51.7z m0 0M398.2 208.8c0 42.3 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-42.3-34.3-76.5-76.5-76.5s-76.5 34.3-76.5 76.5z m0 0M693.7 599.2c0 42.3 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5-34.3-76.5-76.5-76.5c-42.3 0-76.5 34.3-76.5 76.5z m0 0M62.1 828.9H959v60.7H62.1z',
| bar: 'path://M580.8 228.8h-136v500.8h136V228.8z m-40 460.8h-56V268.8h56v420.8zM788.8 420.8h-136v308.8h136V420.8z m-40 268.8h-56V460.8h56v228.8zM372.8 326.4h-136v401.6h136V326.4z m-40 363.2h-56V366.4h56v323.2zM208 788.8h608v40H208z',
|
| line: 'path://M664.1 783c-3.8 0-7.6-0.2-11.3-0.5-36.3-3.1-68.9-20.6-96.9-52.1-28.4-32-52.5-79.4-71.4-140.8-32.4-105-66.1-182.6-100.3-230.6-25.5-35.8-50.2-54-73.4-54h-0.4c-38.8 0.4-84.8 51-129.3 142.7-37 76.2-59.4 153-59.7 153.8L64 582.6c1-3.4 24.3-83.1 63.7-164.3 56.8-117 118.1-176.6 182.1-177.3h1c43 0 83.8 26.7 121.2 79.3 38.2 53.7 75.1 137.5 109.5 249.3 29.3 94.9 68.3 145.1 116 149.1 21.3 1.8 45.6-5.2 72.2-20.9 24.5-14.4 50.3-35.8 76.8-63.5 49.6-51.9 87.7-111.9 100.1-137.6L960 526c-14.6 30.4-56.4 96.4-111.4 154-30.4 31.8-60.6 56.6-89.9 73.9-32.8 19.3-64.6 29.1-94.6 29.1z',
| };
|
| export const SCATTER_SYMBOL_SIZE = 4;
|
| export const chatComProps = buildProps({
| data: {
| type: Object as PropType<any>,
| },
| originData: {
| type: Object as PropType<any>,
| },
| } as const);
| export type ChatComPropsType = ExtractPropTypes<typeof chatComProps>;
|
| export const getChatChartOption = () => {
| const option = {
| grid: {
| // bottom: 120,
| // right: '15%',
| top: 65,
| left: 65,
| right: 45,
| },
| tooltip: {
| show: true,
| trigger: 'axis',
|
| },
| toolbox: {
| show: true,
| feature: {
| dataZoom: {
| yAxisIndex: 'none',
| },
|
| myBar: {
| title: '转化为柱状图',
| show: true,
| icon: PATH_ICON.bar,
| },
|
| myScatter: {
| title: '转化为散点图',
| show: true,
| icon: PATH_ICON.scatter,
| },
| myLine: {
| title: '转化为曲线图',
| show: true,
| icon: PATH_ICON.line,
| },
| // dataView: {
| // readOnly: true,
| // optionToContent: timeDataOptionToContent,
| // },
| saveAsImage: {},
| },
| },
|
| title: {
| left: 'center',
| textStyle: {
| fontSize: 14,
| },
| },
| xAxis: {
| type: 'time',
| },
| yAxis: {
| type: 'value',
| axisLabel: {
| formatter: axisLabelFormatter,
| },
| },
| dataZoom: {
| type: 'inside',
| },
| } as echarts.EChartsOption;
|
| return _.cloneDeep(option);
| };
|
|
