通用Echarts
更新时间：2023-04-18
概述
支持不同类型Echarts图表的展示。
特有静态属性
通用Echarts可视元件有一个特有配置项，即Echarts需要接收的option配置项，它是一个js的对象。通过调整配置项属性，即可在物可视中展示各种丰富多彩的Echarts图表。
注意：配置项面板中仅支持输入合法的静态js对象作为option值，不支持输入其他变量、函数或API的调用。
在代码编辑器中可以对配置项进行修改，修改无误后点击上方运行按钮，即可将配置应用于图表中。
示例1，我们将配置项改为时间序列面积图：
Plain Text
1{
2 tooltip: {
3 trigger: 'axis',
4 },
5 title: {
6 left: 'center',
7 text: 'Large Area Chart',
8 },
9 xAxis: {
10 type: 'time',
11 boundaryGap: false,
12 },
13 yAxis: {
14 type: 'value',
15 boundaryGap: [0, '100%'],
16 },
17 series: [
18 {
19 name: 'Fake Data',
20 type: 'line',
21 smooth: true,
22 symbol: 'none',
23 areaStyle: {},
24 data: [
25 [1681281247079, 36],
26 [1681281248079, 97],
27 [1681281249079, 84],
28 [1681281250079, 71],
29 [1681281251079, 7],
30 [1681281252079, 46],
31 [1681281253079, 67],
32 [1681281254079, 0],
33 [1681281255079, 2],
34 [1681281256079, 55],
35 [1681281257079, 68],
36 [1681281258079, 97],
37 [1681281259079, 98],
38 [1681281260079, 85],
39 [1681281261079, 12],
40 ],
41 },
42 ],
43}运行后，图表如下所示：
示例2：极坐标系下的堆叠柱状图
配置项调整如下：
Plain Text
1{
2 color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
3 angleAxis: {
4 type: 'category',
5 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
6 },
7 radiusAxis: {},
8 polar: {},
9 series: [
10 {
11 type: 'bar',
12 data: [1, 2, 3, 4, 3, 5, 1],
13 coordinateSystem: 'polar',
14 name: 'A',
15 stack: 'a',
16 emphasis: {
17 focus: 'series',
18 },
19 },
20 {
21 type: 'bar',
22 data: [2, 4, 6, 1, 3, 2, 1],
23 coordinateSystem: 'polar',
24 name: 'B',
25 stack: 'a',
26 emphasis: {
27 focus: 'series',
28 },
29 },
30 {
31 type: 'bar',
32 data: [1, 2, 3, 4, 1, 2, 5],
33 coordinateSystem: 'polar',
34 name: 'C',
35 stack: 'a',
36 emphasis: {
37 focus: 'series',
38 },
39 },
40 ],
41 legend: {
42 show: true,
43 data: ['A', 'B', 'C'],
44 },
45}展示效果如下：
示例3：3D柱状图
配置项如下：
Plain Text
1{
2 tooltip: {},
3 visualMap: {
4 max: 20,
5 inRange: {
6 color: [
7 '#313695',
8 '#4575b4',
9 '#74add1',
10 '#abd9e9',
11 '#e0f3f8',
12 '#ffffbf',
13 '#fee090',
14 '#fdae61',
15 '#f46d43',
16 '#d73027',
17 '#a50026',
18 ],
19 },
20 },
21 xAxis3D: {
22 type: 'category',
23 data: [
24 '12a',
25 '1a',
26 '2a',
27 '3a',
28 '4a',
29 '5a',
30 '6a',
31 '7a',
32 '8a',
33 '9a',
34 '10a',
35 '11a',
36 '12p',
37 '1p',
38 '2p',
39 '3p',
40 '4p',
41 '5p',
42 '6p',
43 '7p',
44 '8p',
45 '9p',
46 '10p',
47 '11p',
48 ],
49 },
50 yAxis3D: {
51 type: 'category',
52 data: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
53 },
54 zAxis3D: {
55 type: 'value',
56 },
57 grid3D: {
58 boxWidth: 200,
59 boxDepth: 80,
60 viewControl: {},
61 light: {
62 main: {
63 intensity: 1.2,
64 shadow: true,
65 },
66 ambient: {
67 intensity: 0.3,
68 },
69 },
70 },
71 series: [
72 {
73 type: 'bar3D',
74 data: [
75 {
76 value: [0, 0, 5],
77 },
78 {
79 value: [15, 0, 3],
80 },
81 {
82 value: [20, 0, 3],
83 },
84 {
85 value: [10, 1, 5],
86 },
87 {
88 value: [13, 1, 6],
89 },
90 {
91 value: [17, 1, 7],
92 },
93 {
94 value: [19, 1, 12],
95 },
96 {
97 value: [20, 1, 5],
98 },
99 {
100 value: [23, 1, 2],
101 },
102 {
103 value: [12, 2, 1],
104 },
105 {
106 value: [17, 2, 5],
107 },
108 {
109 value: [22, 2, 2],
110 },
111 {
112 value: [0, 3, 7],
113 },
114 {
115 value: [14, 3, 13],
116 },
117 {
118 value: [15, 3, 12],
119 },
120 {
121 value: [8, 3, 1],
122 },
123 {
124 value: [12, 3, 7],
125 },
126 {
127 value: [13, 3, 14],
128 },
129 {
130 value: [16, 3, 9],
131 },
132 {
133 value: [19, 3, 10],
134 },
135 {
136 value: [23, 3, 1],
137 },
138 {
139 value: [10, 4, 4],
140 },
141 {
142 value: [11, 4, 4],
143 },
144 {
145 value: [12, 4, 2],
146 },
147 {
148 value: [13, 4, 4],
149 },
150 {
151 value: [15, 4, 14],
152 },
153 {
154 value: [18, 4, 8],
155 },
156 {
157 value: [19, 4, 5],
158 },
159 {
160 value: [0, 5, 2],
161 },
162 {
163 value: [1, 5, 1],
164 },
165 {
166 value: [8, 5, 2],
167 },
168 {
169 value: [13, 5, 10],
170 },
171 {
172 value: [14, 5, 5],
173 },
174 {
175 value: [16, 5, 11],
176 },
177 {
178 value: [17, 5, 6],
179 },
180 {
181 value: [21, 5, 4],
182 },
183 {
184 value: [22, 5, 2],
185 },
186 {
187 value: [10, 6, 1],
188 },
189 {
190 value: [12, 6, 2],
191 },
192 {
193 value: [13, 6, 1],
194 },
195 {
196 value: [14, 6, 3],
197 },
198 {
199 value: [20, 6, 1],
200 },
201 {
202 value: [21, 6, 2],
203 },
204 {
205 value: [22, 6, 2],
206 },
207 {
208 value: [23, 6, 6],
209 },
210 ],
211 shading: 'lambert',
212 label: {
213 fontSize: 16,
214 borderWidth: 1,
215 },
216 emphasis: {
217 label: {
218 fontSize: 20,
219 color: '#900',
220 },
221 itemStyle: {
222 color: '#900',
223 },
224 },
225 },
226 ],
227}展示效果如下：
数据绑定
数据绑定，是连接『可视化仪表盘』与『数据表』的窗口。数据配置Tab中可供选择的数据表，是已在数据表Tab中创建好的二维数据表。数据表的创建过程可参考仪表盘数据表处理 及 典型实践文档。
数据表绑定
配置项可以通过数据表绑定将动态数据注入到option中返回，从而实现图表数据的动态展示。
在数据表绑定中，左侧选择创建好的二维数据表，右侧对属性值进行处理。鼠标移动到❓上，提示框对transform函数的参数值进行了详细展示。
示例
接下来我们以折线图为例，描述数据绑定的过程。
步骤1：创建一个动态的仿真数据
步骤2：数据绑定
在数据表绑定中选择刚才创建的echarts数据表，在右侧代码编辑器中修改transform函数：
Plain Text
1function transform(data, header) {
2 function getCol(idx) {
3 return data.map(function (item) {
4 return item[idx];
5 });
6 }
7 var option = {
8 "xAxis": {
9 "type": "category",
10 "data": getCol(1)
11 },
12 "yAxis": {
13 "type": "value"
14 },
15 "series": [{
16 "data": getCol(0),
17 "type": "line"
18 }]
19 };
20 return option;
21}确定后即绑定数据成功。
步骤3：运行预览
点击运行仪表盘，预览动态效果：
