|
@@ -1,6 +1,6 @@
|
1
|
|
-import React, { useEffect, useState } from 'react'
|
|
1
|
+import React, { useEffect, useRef, useState, useMemo } from 'react'
|
2
|
2
|
import Taro from '@tarojs/taro'
|
3
|
|
-import * as echarts from '@/components/ec-canvas/echarts';
|
|
3
|
+import * as echarts from '@/native/ec-canvas/echarts';
|
4
|
4
|
import { getChannelLineChat } from '@/services/agent'
|
5
|
5
|
|
6
|
6
|
function initChart(canvas, width, height, dpr) {
|
|
@@ -11,87 +11,99 @@ function initChart(canvas, width, height, dpr) {
|
11
|
11
|
});
|
12
|
12
|
canvas.setChart(chart);
|
13
|
13
|
|
14
|
|
- var option = {
|
15
|
|
- title: {
|
16
|
|
- text: '测试下面legend的红色区域不应被裁剪',
|
17
|
|
- left: 'center'
|
18
|
|
- },
|
19
|
|
- legend: {
|
20
|
|
- data: ['A', 'B', 'C'],
|
21
|
|
- top: 50,
|
22
|
|
- left: 'center',
|
23
|
|
- backgroundColor: 'red',
|
24
|
|
- z: 100
|
25
|
|
- },
|
26
|
|
- grid: {
|
27
|
|
- containLabel: true
|
28
|
|
- },
|
29
|
|
- tooltip: {
|
30
|
|
- show: true,
|
31
|
|
- trigger: 'axis'
|
32
|
|
- },
|
33
|
|
- xAxis: {
|
34
|
|
- type: 'category',
|
35
|
|
- boundaryGap: false,
|
36
|
|
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
37
|
|
- // show: false
|
38
|
|
- },
|
39
|
|
- yAxis: {
|
40
|
|
- x: 'center',
|
41
|
|
- type: 'value',
|
42
|
|
- splitLine: {
|
43
|
|
- lineStyle: {
|
44
|
|
- type: 'dashed'
|
45
|
|
- }
|
46
|
|
- }
|
47
|
|
- // show: false
|
48
|
|
- },
|
49
|
|
- series: [{
|
50
|
|
- name: 'A',
|
51
|
|
- type: 'line',
|
52
|
|
- smooth: true,
|
53
|
|
- data: [18, 36, 65, 30, 78, 40, 33]
|
54
|
|
- }, {
|
55
|
|
- name: 'B',
|
56
|
|
- type: 'line',
|
57
|
|
- smooth: true,
|
58
|
|
- data: [12, 50, 51, 35, 70, 30, 20]
|
59
|
|
- }, {
|
60
|
|
- name: 'C',
|
61
|
|
- type: 'line',
|
62
|
|
- smooth: true,
|
63
|
|
- data: [10, 30, 31, 50, 40, 20, 10]
|
64
|
|
- }]
|
65
|
|
- };
|
|
14
|
+ // var option = {
|
|
15
|
+ // xAxis: {
|
|
16
|
+ // type: 'category',
|
|
17
|
+ // boundaryGap: false,
|
|
18
|
+ // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
19
|
+ // // show: false
|
|
20
|
+ // },
|
|
21
|
+ // yAxis: {
|
|
22
|
+ // x: 'center',
|
|
23
|
+ // type: 'value',
|
|
24
|
+ // splitLine: {
|
|
25
|
+ // lineStyle: {
|
|
26
|
+ // type: 'dashed'
|
|
27
|
+ // }
|
|
28
|
+ // }
|
|
29
|
+ // // show: false
|
|
30
|
+ // },
|
|
31
|
+ // series: [{
|
|
32
|
+ // name: 'A',
|
|
33
|
+ // type: 'line',
|
|
34
|
+ // smooth: true,
|
|
35
|
+ // data: [18, 36, 65, 30, 78, 40, 33]
|
|
36
|
+ // }, {
|
|
37
|
+ // name: 'B',
|
|
38
|
+ // type: 'line',
|
|
39
|
+ // smooth: true,
|
|
40
|
+ // data: [12, 50, 51, 35, 70, 30, 20]
|
|
41
|
+ // }, {
|
|
42
|
+ // name: 'C',
|
|
43
|
+ // type: 'line',
|
|
44
|
+ // smooth: true,
|
|
45
|
+ // data: [10, 30, 31, 50, 40, 20, 10]
|
|
46
|
+ // }]
|
|
47
|
+ // };
|
66
|
48
|
|
67
|
|
- chart.setOption(option);
|
|
49
|
+ // chart.setOption(option);
|
68
|
50
|
return chart;
|
69
|
51
|
}
|
70
|
52
|
|
71
|
53
|
export default (props) => {
|
72
|
54
|
const { buildingId, xType, dateRange } = props
|
73
|
55
|
|
74
|
|
- const [ec, setEc] = useState()
|
|
56
|
+ const [options, setOptions] = useState()
|
|
57
|
+ const chartRef = useRef()
|
|
58
|
+ const ec = useMemo(() => {
|
|
59
|
+ const onInit = (...args) => {
|
|
60
|
+ const chart = initChart(...args)
|
|
61
|
+ chartRef.current = chart
|
|
62
|
+ return chart
|
|
63
|
+ }
|
75
|
64
|
|
76
|
|
- useEffect(() => {
|
77
|
|
- Taro.nextTick(() => {
|
78
|
|
- setEc({
|
79
|
|
- onInit: initChart
|
80
|
|
- })
|
81
|
|
- })
|
|
65
|
+ return { onInit }
|
82
|
66
|
}, [])
|
83
|
67
|
|
84
|
68
|
useEffect(() => {
|
85
|
|
- if (ec) {
|
|
69
|
+ if (buildingId) {
|
86
|
70
|
const [startDate, endDate] = dateRange
|
87
|
71
|
getChannelLineChat({
|
88
|
72
|
buildingId,
|
89
|
73
|
type: xType,
|
90
|
74
|
startDate: `${startDate}T00:00:00.000Z`,
|
91
|
75
|
endDate: `${endDate}T23:59:59.999Z`,
|
92
|
|
- }).then((res) => {})
|
|
76
|
+ }).then((res) => {
|
|
77
|
+ const { newCustomerDetail } = res
|
|
78
|
+ const data = [[],[]];
|
|
79
|
+ (newCustomerDetail || []).forEach((it) => {
|
|
80
|
+ data[0].push(it.coordinate.substring(5))
|
|
81
|
+ data[1].push(it.customerNum)
|
|
82
|
+ })
|
|
83
|
+ setOptions({
|
|
84
|
+ xAxis: {
|
|
85
|
+ type: 'category',
|
|
86
|
+ data: data[0],
|
|
87
|
+ },
|
|
88
|
+ yAxis: {
|
|
89
|
+ type: 'value',
|
|
90
|
+ },
|
|
91
|
+ series: [{
|
|
92
|
+ type: 'line',
|
|
93
|
+ smooth: true,
|
|
94
|
+ data: data[1],
|
|
95
|
+ }],
|
|
96
|
+ color: ['#5470c6'],
|
|
97
|
+ })
|
|
98
|
+ })
|
|
99
|
+ }
|
|
100
|
+ }, [buildingId, dateRange, xType])
|
|
101
|
+
|
|
102
|
+ useEffect(() => {
|
|
103
|
+ if (options) {
|
|
104
|
+ chartRef.current.setOption(options);
|
93
|
105
|
}
|
94
|
|
- }, [ec, buildingId, dateRange, xType])
|
|
106
|
+ }, [options])
|
95
|
107
|
|
96
|
108
|
return (
|
97
|
109
|
<ec-canvas ec={ec} />
|