generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
echart.md
139 lines (103 loc) · 4.17 KB
/
echart.md
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
127
128
129
130
131
132
133
134
135
136
137
138
139
# {func}`~nicegui.ui.echart` ECharts 图表
使用 [ECharts](https://echarts.apache.org/) 创建图表的元素。通过更改 `options` 属性可以向图表推送更新。数据变更后,调用 `update` 方法刷新图表。
- `options`: EChart 选项的字典
- `on_click_point`: 点击点时调用的回调函数
```python
from nicegui import ui
from random import random
echart = ui.echart({
'xAxis': {'type': 'value'},
'yAxis': {'type': 'category', 'data': ['A', 'B'], 'inverse': True},
'legend': {'textStyle': {'color': 'gray'}},
'series': [
{'type': 'bar', 'name': 'Alpha', 'data': [0.1, 0.2]},
{'type': 'bar', 'name': 'Beta', 'data': [0.3, 0.4]},
],
})
def update():
echart.options['series'][0]['data'][0] = random()
echart.update()
ui.button('Update', on_click=update)
# ui.run()
```
## {func}`~nicegui.ui.echart` 可点击的点
您可以注册回调函数,用于处理点击序列点时的事件。
```python
from nicegui import ui
ui.echart({
'xAxis': {'type': 'category'},
'yAxis': {'type': 'value'},
'series': [{'type': 'line', 'data': [20, 10, 30, 50, 40, 30]}],
}, on_point_click=ui.notify)
# ui.run()
```
## {func}`~nicegui.ui.echart` 动态属性
可以将动态属性传递给图表元素以自定义它们,例如应用轴标签格式。要使属性动态化,请在属性名称前加上冒号`":"`。
```python
from nicegui import ui
ui.echart({
'xAxis': {'type': 'category'},
'yAxis': {'axisLabel': {':formatter': 'value => "$" + value'}},
'series': [{'type': 'line', 'data': [5, 8, 13, 21, 34, 55]}],
})
# ui.run()
```
## {func}`~nicegui.ui.echart` 元素
您可以使用`from_pyecharts`方法从`pyecharts`对象创建`EChart`元素。要定义动态选项,如格式化函数,可以使用`pyecharts.commons.utils`中的`JsCode`类。或者,您可以使用冒号`":"`前缀属性名称,表示该值是JavaScript表达式。
```python
from nicegui import ui
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode
from pyecharts.options import AxisOpts
ui.echart.from_pyecharts(
Bar()
.add_xaxis(['A', 'B', 'C'])
.add_yaxis('ratio', [1, 2, 4])
.set_global_opts(
xaxis_opts=AxisOpts(axislabel_opts={
':formatter': r'(val, idx) => `group ${val}`',
}),
yaxis_opts=AxisOpts(axislabel_opts={
'formatter': JsCode(r'(val, idx) => `${val}%`'),
}),
)
)
ui.run()
```
## {func}`~nicegui.ui.echart` 运行方法
您可以使用`run_chart_method`方法运行EChart实例的方法。这个演示展示了如何显示和隐藏加载动画,如何获取图表的当前宽度,以及如何使用自定义格式化器添加提示工具。
方法名`"setOption"`前面的冒号`":"`表示该参数是一个JavaScript表达式,在传递给方法之前会在客户端进行求值。
```python
from nicegui import ui
echart = ui.echart({
'xAxis': {'type': 'category', 'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},
'yAxis': {'type': 'value'},
'series': [{'type': 'line', 'data': [150, 230, 224, 218, 135]}],
})
ui.button('Show Loading', on_click=lambda: echart.run_chart_method('showLoading'))
ui.button('Hide Loading', on_click=lambda: echart.run_chart_method('hideLoading'))
async def get_width():
width = await echart.run_chart_method('getWidth')
ui.notify(f'Width: {width}')
ui.button('Get Width', on_click=get_width)
ui.button('Set Tooltip', on_click=lambda: echart.run_chart_method(
':setOption', r'{tooltip: {formatter: params => "$" + params.value}}',
))
ui.run()
```
## {func}`~nicegui.ui.echart` 任意图表事件
您可以使用`on`方法以及`"chart:"`前缀为图表注册任意事件监听器。这个演示展示了如何为`"selectchanged"`事件注册回调函数,该事件在用户选择点时触发。
```python
from nicegui import ui
ui.echart({
'toolbox': {'feature': {'brush': {'type': ['rect']}}},
'brush': {},
'xAxis': {'type': 'category'},
'yAxis': {'type': 'value'},
'series': [{'type': 'line', 'data': [1, 2, 3]}],
}).on('chart:selectchanged', lambda e: label.set_text(
f'Selected point {e.args["fromActionPayload"]["dataIndexInside"]}'
))
label = ui.label()
# ui.run()
```