简搭云科技有限公司
简搭云软件
2023-10-22
国家能源集团
成都智慧城市
优必联智能装备
河北启派科技
深圳市量信科技
杭州市奥哲软件
绍兴瑞楠
麓谷云
南京优玛软件

05、设计器操作指引

avatar

# 大屏操作区域：

按钮分别是：

🚀组件：控制组件库区域的显示或者隐藏，默认是不显示组件库区

🚀属性：控制右侧大屏属性，控件属性、事件区域、数据源区域的显示或者隐藏

🚀预览：将设计的大屏进行弹出层预览效果。

🚀设计/源码：可将布画区域和生成的vue源码区域相互切换。

🚀保存：将大屏设计保存到数据库中。

🚀查看json：是查看大屏设计时的json内容。

🚀刷新：重新从数据库中加载

🚀清空：将大屏设计的内容全部清空。

🚀导入：可以选择导出可视化大屏设计的json，进行重新设计。

🚀导出：导出可视化大屏设计的json进行备份，可用于后面的还原。

🚀下载vue文件：下载大屏设计的对应vue页面文件。

🚀下载离线部署包：下载的部署包是可以本地运行下载的vue文件

🚀提问：跳转到码云提问题的界面。

🚀帮助：跳转到简搭云官网。

# 组件库区域

🚀图层：在该区域，可查看在大屏上目前已有的所有组件，也可对组件图层进行成组、打散、置顶、置底、单独显示、锁定、复制、删除等操作

🚀图表：在该区域，可查询选择所需的echart图表组件（柱状图、条形图、散点图、饼图、雷达图、K线图、箱线图、热力图、关系图、矩形图、平行图、桑基图、漏斗图、仪表盘等echart图）来快速设计制作大屏统计与分析。

🚀地图：在该区域，可查询选择所需的地图组件，主要包含echart地图组件和mapboxgl地图组件

🚀布局：在该区域，有容器布局组件，组件可拖拽到布局组件中。

🚀信息：在该区域，有大屏所需的标题组件、全屏组件、跑马灯组件、数字翻牌组件、多行文本组件、日期组件等等用于展示与交互。

🚀表格：在该区域，有列表表格组件、无缝滚动列表组件

🚀媒体：包含了网页嵌套组件、图片组件、视屏组件、视屏监控组件、轮播组件等等

🚀其它：包含了各种边框组件、挂件组件、canvas动态效果图、icon矢量图

🚀共享：是有其它用户共享的自定义组件区域。

🚀收藏：数据来源于【我的组件】，我的组件来源于：手工新增组件和大屏设计器区域组件具体保存后的

# 布画区域

就是大屏设计区域，最终效果展示区域

# 属性区域

🚀大屏基本信息：选中大屏空白区域、显示，设置的大屏的基本信息，如布画大小、背景颜色、自定义样式、echart主题风格设置、自适应模式设置。

🚀事件配置：根据选中组件和大屏加载其拥有的事件方法。

🚀基本配置：选中组件显示，是配置组件的各种属性，呈现不通的效果。

🚀Echart配置：必须选中echart组件才会显示，展示的是echart 渲染json组件，只要符合其echart json就能动态渲染，更改json是双向绑定的，更改json后会立马生效，echart json Api说明

🚀数据源配置：数据源支持JSON静态数据、数据源接口、api地址，系统接口四种模式绑定数据.

🚀源码区域：是点击【大屏操作区域】=》【设计/源码】切换源码模式，源码区域又分为：【script】【template】【css】三个部分组成，【script】和【css】是可以在线编辑的，并且系统支持在线生成的vue源码与在线编辑的源码进行合并，在线编辑的css是具有私有性，只有当前大屏可生效。逻辑代码符合vue语法就你能正常预览。

# 1.属性区域操作说明

# 1.1.组件基本信息

avatar

属性名称 编辑控件类型 说明
布画宽 数字类型 设置大屏设计布画的宽
布画高 数字类型 设置大屏设计布画的高
背景应用类型 下拉列表：背景色，背景图、css快速背景 设置大屏的背景的三种类型的效果显示
背景颜色 颜色选择控件 背景应用类型为背景色显示
背景图 背景图控件 可选择系统背景图、也可上传本地的背景图
Css快速背景 Css快速背景颜色选择控件 提供了一系列的渐变的颜色背景图
自定义样式 文本框 可自定义大屏样式。
启动图标主题 Switch 是、否选择控件 当为是时，每拖拽一个echart组件的颜色默认加载大屏设置的主题颜色。
图表字体大小 数字控件 设置echart里面的字体大小
标题字体大小 数字控件 设置echart里面标题字体大小
图表字体颜色 颜色选择控件 设置图标的字体颜色
图表主题 图表主题控件 设置一组颜色，所有图表按照这一组颜色进行显示。
自适应模式 单选控件 无：根据布画设置的宽和高展示。宽度自适应：根据浏览器窗口分辨率的宽度，进行缩放。高度自适应：根据浏览器窗口分辨率的高度，进行缩放。自适应宽和高：根据浏览器窗口分辨率的宽和高度，分别算出对应缩放比例，获取缩放比例大为准。强行拉升：根据浏览器窗口，强行拉升铺满展示。

图表主题设置如下图：

avatar

可以手工添加主题颜色组，也可以依靠系统随机生成多少个颜色为主题，单击对应的颜色可以调整，更换位置、删除。

# 1.2.事件配置

avatar

添加事件时，会自动切换源码，在源码的script区域会创建一个事件方法，如下图：

avatar

你可以在这里编写你的逻辑代码。

# 1.3.组件属性配置

avatar

属性编辑说明

属性名称 编辑控件类型 说明
组件ID 文本框 为组件控件定义一个唯一ID，方便逻辑编写和阅读
组件名称 文本框 为组件定义名称，标注组件的用途。
靠左 数字控件 控件靠左距离
靠右 数字控件 控件靠右距离
宽度 数字控件 控件展示的宽度
高度 数字控件 控件展示的高度
x轴旋转 滑块控件 范围：-180-180，组件的x轴旋转角度。x,y,z轴结合展现3D效果
y轴旋转 滑块控件 范围：-180-180，组件的y轴旋转角度。x,y,z轴结合展现3D效果
z轴旋转 滑块控件 范围：-180-180，组件的z轴旋转角度。x,y,z轴结合展现3D效果
圆角 数字控件 组件的边框圆角
边框宽度 数字控件 组件的边框宽度
边框样式 下拉列表 组件边框不通的展示效果
边框颜色 颜色选择 组件边框颜色设置
背景色 颜色选择 组件背景颜色设置
是否滤镜 单选框 是、否 只有是，对应滤镜才能生效。
饱和度 滑块 范围：0-2，设置颜色的饱和度
对比度 滑块 范围：0-2，设置颜色的对比度
色相 滑块 范围：1-360，设置色相
亮度 滑块 范围：0-2，设置亮度
高斯模糊 滑块 范围：0-20，数值越大越模糊
透明度 滑块 范围：0-1，数值越小越透明
动画类型 下拉列表 来源于animation动画效果
动画周期 数字控件 动画轮询几次
动画等待时间 数字控件 动画展示时间
控件自定义属性 文本框 为了扩展组件之外的属性
外框自定义属性 文本框 为了扩展外框自定义的属性
字体大小 数字控件 设置文字的字体大小
字体颜色 颜色控件 设置字体颜色
行间距 数字控件 设置字体之间的行间距
文字字体 下拉列表 设置文字显示那种字体
自定义样式 文本框 编写控件的自定义的样式。

# 1.4.Echart配置

avatar

只有选中echart组件才会显示，json格式会严格根据百度echart文档来，只要符合百度echart Api即可，可手工更改后会立马生效。

百度echart 帮助文档 (opens new window)

# 1.5.数据源配置

avatar

在使用数据源配置时，首先需要了解系统功能中的映射赋值原理，如赋值json例子：

   {
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
},
}
1
2
3
4
5
6
7
8
9
10
11
12

被静态赋值json或者说是Ajax结果json，如下图：

{
    "code": 200,
    "data": {
        "title": "测试标题"
    }
}
1
2
3
4
5
6

字段映射选择：$.title.text，赋值映射：$.data.title，赋值方式为：等于。系统会自动生成赋值js代码，会将ajax的data.title的值赋值给title.text,运行后就变成“测试标题”， 映射就是将字段映射的json路径下的对象等于赋值映射下json路径，从而达到赋值目的。

如下图：

avatar

预览后的效果，自动赋值了。

avatar

# 1.5.1.映射赋值方式

# 🚀等于

根据json设置的映射路径进行等于赋值。

# 🚀循环数组

Echart配置的json如下

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "Adidas",
        "type": "line",
        "data": [10, 10, 30, 12, 15, 3, 7],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#9effff"
                }, {
                    "offset": 1,
                    "color": "#9E87FF"
                }],
                "x": 0,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(158,135,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#9E87FF",
                "borderColor": "#9E87FF"
            }
        }
    }, {
        "name": "Nike",
        "type": "line",
        "data": [5, 12, 11, 14, 25, 16, 10],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#73DD39"
                }, {
                    "offset": 1,
                    "color": "#73DDFF"
                }],
                "x": 1,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(115,221,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#73DDFF",
                "borderColor": "#73DDFF"
            }
        }
    }, {
        "name": "老北京布鞋",
        "type": "line",
        "data": [150, 120, 170, 140, 500, 160, 110],
        "symbolSize": 1,
        "yAxisIndex": 1,
        "symbol": "circle",
        "smooth": true,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#fe9a"
                }, {
                    "offset": 1,
                    "color": "#fe9a8b"
                }],
                "x": 0,
                "y": 0,
                "x2": 1,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(254,154,139, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#fe9a8b",
                "borderColor": "#fe9a8b"
            }
        }
    }]
}
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

ajax返回结果json如

{
    "code": 0,
    "msg": "操作成功",
    "data": [{
        "class_name": "302班",
        "sumscore": 248
    }, {
        "class_name": "61班",
        "sumscore": 180
    }, {
        "class_name": "71班",
        "sumscore": 157
    }],
    "success": true,
    "totalcount": 0
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如字段映射路径：$.series.0.data，赋值映射路径：$.data.1.sumscore，映射赋值方式为循环数组时，系统会自动根据赋值映射路径，从后往前找到路径上的数字节点，然后循环，分别取出对应结果值为数组，$.data.1.sumscore取出的值为：[248,180,157]

最后输出json如下：

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "Adidas",
        "type": "line",
        "data":[248,180,157],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#9effff"
                }, {
                    "offset": 1,
                    "color": "#9E87FF"
                }],
                "x": 0,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(158,135,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#9E87FF",
                "borderColor": "#9E87FF"
            }
        }
    }, {
        "name": "Nike",
        "type": "line",
        "data": [5, 12, 11, 14, 25, 16, 10],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#73DD39"
                }, {
                    "offset": 1,
                    "color": "#73DDFF"
                }],
                "x": 1,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(115,221,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#73DDFF",
                "borderColor": "#73DDFF"
            }
        }
    }, {
        "name": "老北京布鞋",
        "type": "line",
        "data": [150, 120, 170, 140, 500, 160, 110],
        "symbolSize": 1,
        "yAxisIndex": 1,
        "symbol": "circle",
        "smooth": true,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#fe9a"
                }, {
                    "offset": 1,
                    "color": "#fe9a8b"
                }],
                "x": 0,
                "y": 0,
                "x2": 1,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(254,154,139, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#fe9a8b",
                "borderColor": "#fe9a8b"
            }
        }
    }]
}
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

只会将series[0].data=[248,180,157]

# 🚀循环等于

就以循环数组ajax返回结果json例子和echart json为例，如字段映射路径：$.series.0.data，赋值映射路径：$.data.1.sumscore，映射赋值方式为循环等于时，系统会自动根据赋值映射路径和字段映射，从后往前找到路径上的数字节点，然后循环赋值， 最后输出的结果如下：

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        
        "data":248
       
    }, {
        "data":180
    }, {
         "data":157
    }]
}
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
140
141
142
143
144
145
146
# 🚀合计

就以循环数组ajax返回结果json例子和echart json为例，如字段映射路径：$.series.0.data，赋值映射路径：$.data.1.sumscore，映射赋值方式为合计时，结果如下

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "Adidas",
        "type": "line",
        "data":585,
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#9effff"
                }, {
                    "offset": 1,
                    "color": "#9E87FF"
                }],
                "x": 0,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(158,135,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#9E87FF",
                "borderColor": "#9E87FF"
            }
        }
    }, {
        "name": "Nike",
        "type": "line",
        "data": [5, 12, 11, 14, 25, 16, 10],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#73DD39"
                }, {
                    "offset": 1,
                    "color": "#73DDFF"
                }],
                "x": 1,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(115,221,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#73DDFF",
                "borderColor": "#73DDFF"
            }
        }
    }, {
        "name": "老北京布鞋",
        "type": "line",
        "data": [150, 120, 170, 140, 500, 160, 110],
        "symbolSize": 1,
        "yAxisIndex": 1,
        "symbol": "circle",
        "smooth": true,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#fe9a"
                }, {
                    "offset": 1,
                    "color": "#fe9a8b"
                }],
                "x": 0,
                "y": 0,
                "x2": 1,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(254,154,139, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#fe9a8b",
                "borderColor": "#fe9a8b"
            }
        }
    }]
}
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

会将$.series.0.data直接赋值$.data.1.sumscore路径之和

# 🚀平均

就以循环数组ajax返回结果json例子和echart json为例，如字段映射路径：$.series.0.data，赋值映射路径：$.data.1.sumscore，映射赋值方式为平均时，结果如下

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "Adidas",
        "type": "line",
        "data":193,
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#9effff"
                }, {
                    "offset": 1,
                    "color": "#9E87FF"
                }],
                "x": 0,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(158,135,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#9E87FF",
                "borderColor": "#9E87FF"
            }
        }
    }, {
        "name": "Nike",
        "type": "line",
        "data": [5, 12, 11, 14, 25, 16, 10],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#73DD39"
                }, {
                    "offset": 1,
                    "color": "#73DDFF"
                }],
                "x": 1,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(115,221,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#73DDFF",
                "borderColor": "#73DDFF"
            }
        }
    }, {
        "name": "老北京布鞋",
        "type": "line",
        "data": [150, 120, 170, 140, 500, 160, 110],
        "symbolSize": 1,
        "yAxisIndex": 1,
        "symbol": "circle",
        "smooth": true,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#fe9a"
                }, {
                    "offset": 1,
                    "color": "#fe9a8b"
                }],
                "x": 0,
                "y": 0,
                "x2": 1,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(254,154,139, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#fe9a8b",
                "borderColor": "#fe9a8b"
            }
        }
    }]
}
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

会将$.series.0.data直接赋值$.data.1.sumscore平均值

# 🚀最大值

就以循环数组ajax返回结果json例子和echart json为例，如字段映射路径：$.series.0.data，赋值映射路径：$.data.1.sumscore，映射赋值方式为最大值时，结果如下

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "Adidas",
        "type": "line",
        "data":248,
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#9effff"
                }, {
                    "offset": 1,
                    "color": "#9E87FF"
                }],
                "x": 0,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(158,135,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#9E87FF",
                "borderColor": "#9E87FF"
            }
        }
    }, {
        "name": "Nike",
        "type": "line",
        "data": [5, 12, 11, 14, 25, 16, 10],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#73DD39"
                }, {
                    "offset": 1,
                    "color": "#73DDFF"
                }],
                "x": 1,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(115,221,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#73DDFF",
                "borderColor": "#73DDFF"
            }
        }
    }, {
        "name": "老北京布鞋",
        "type": "line",
        "data": [150, 120, 170, 140, 500, 160, 110],
        "symbolSize": 1,
        "yAxisIndex": 1,
        "symbol": "circle",
        "smooth": true,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#fe9a"
                }, {
                    "offset": 1,
                    "color": "#fe9a8b"
                }],
                "x": 0,
                "y": 0,
                "x2": 1,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(254,154,139, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#fe9a8b",
                "borderColor": "#fe9a8b"
            }
        }
    }]
}
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

会将$.series.0.data直接赋值$.data.1.sumscore最大值

# 🚀最小值

就以循环数组ajax返回结果json例子和echart json为例，如字段映射路径：$.series.0.data，赋值映射路径：$.data.1.sumscore，映射赋值方式为最小值时，结果如下

{
    "title": {
        "text": "全国6月销售统计",
        "textStyle": {
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#fff"
        },
        "left": "center",
        "top": "5%"
    },
    "legend": {
        "icon": "circle",
        "top": "5%",
        "right": "5%",
        "itemWidth": 6,
        "itemGap": 20,
        "textStyle": {
            "color": "#fff"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "label": {
                "show": true,
                "backgroundColor": "#fff",
                "color": "#fff",
                "borderColor": "rgba(0,0,0,0)",
                "shadowColor": "rgba(0,0,0,0)",
                "shadowOffsetY": 0
            },
            "lineStyle": {
                "width": 0
            }
        },
        "backgroundColor": "#fff",
        "textStyle": {
            "color": "#fff"
        },
        "padding": [10, 10],
        "extraCssText": "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    "grid": {
        "top": "15%"
    },
    "xAxis": [{
        "type": "category",
        "data": ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        "axisLine": {
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "color": "#fff"
            },
            "fontSize": 12,
            "margin": 15
        },
        "axisPointer": {
            "label": {
                "padding": [0, 0, 10, 0],
                "margin": 15,
                "fontSize": 12,
                "backgroundColor": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#fff"
                    }, {
                        "offset": 0.86,
                        "color": "#33c0cd"
                    }, {
                        "offset": 1,
                        "color": "#33c0cd"
                    }],
                    "global": false
                }
            }
        },
        "boundaryGap": false
    }],
    "yAxis": [{
        "type": "value",
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#DCE2E8"
            }
        },
        "splitLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "Adidas",
        "type": "line",
        "data":158,
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#9effff"
                }, {
                    "offset": 1,
                    "color": "#9E87FF"
                }],
                "x": 0,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(158,135,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#9E87FF",
                "borderColor": "#9E87FF"
            }
        }
    }, {
        "name": "Nike",
        "type": "line",
        "data": [5, 12, 11, 14, 25, 16, 10],
        "symbolSize": 1,
        "symbol": "circle",
        "smooth": true,
        "yAxisIndex": 0,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#73DD39"
                }, {
                    "offset": 1,
                    "color": "#73DDFF"
                }],
                "x": 1,
                "y": 1,
                "x2": 0,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(115,221,255, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#73DDFF",
                "borderColor": "#73DDFF"
            }
        }
    }, {
        "name": "老北京布鞋",
        "type": "line",
        "data": [150, 120, 170, 140, 500, 160, 110],
        "symbolSize": 1,
        "yAxisIndex": 1,
        "symbol": "circle",
        "smooth": true,
        "showSymbol": false,
        "lineStyle": {
            "width": 5,
            "color": {
                "colorStops": [{
                    "offset": 0,
                    "color": "#fe9a"
                }, {
                    "offset": 1,
                    "color": "#fe9a8b"
                }],
                "x": 0,
                "y": 0,
                "x2": 1,
                "y2": 0,
                "type": "linear",
                "global": false
            },
            "shadowColor": "rgba(254,154,139, 0.3)",
            "shadowBlur": 10,
            "shadowOffsetY": 20
        },
        "itemStyle": {
            "normal": {
                "color": "#fe9a8b",
                "borderColor": "#fe9a8b"
            }
        }
    }]
}
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

会将$.series.0.data直接赋值$.data.1.sumscore最小值

# 1.5.2.Js脚本绑定

echartdata 为图表echart json数据变量名，data为Ajax请求的结果或者静态变量对象变量名，想要获取其它的变量名或者逻辑方法，可以使用this.去调用。

以【1.5.1映射赋值方式-循环数组】的例子为例：

echartdata.series[0].data=data.data[1].sumscore

只要语法符合js语法就可以运行。

# 2.组件库区域操作说明

# 2.1.图层操作

avatar

收藏是收藏到定义组件中。

# 3.布画区域操作说明

avatar

# 4.源码区域操作说明

# 4.1.Script代码部分如下图

avatar

结构代码说明和注意点：

# 🚀methods的方法有“_sys”结尾的名称方法，是系统生成的代码和方法，在该方法中编辑代码无效，代码会丢失。

# 🚀methods的方法可以在线添加自定义函数方法，切记函数名称不能以“_sys”结尾，否则对应代码会被删除掉，也可以添加debugger进行在线调试。

# 🚀Vue的data 不能代码编辑如下图属性，可以新增属性，代码会进行合并。

avatar

Data不能编辑的属性说明

属性名称 属性说明
w 大屏展示宽度
Css 大屏基本信息中的自定义样式
h 大屏展示高度
Bg 大屏的背景图
Bgcorlor 大屏背景颜色
Fromdata Echarts渲染json和其他组件默认值，table列表的初始化的列表数据值等等集合
Controltimer 定时刷新，定时器的集合。
ScreentType 大屏适应模式：【none】无、【w】宽度自适应、【h】高度自适应、【wh】自适应宽高、【full】强行拉升
readDataPermission 控制组件的显示隐藏和现实

Data可以添加新的属性，新增的属性会一直保存下来。

# 🚀Src/views/preview/comm.js添加的公共方法，可以根据【this.方法名】进行调用封装的公共方法。

# 🚀this.$refs.reffromdialog.init(“大屏ID”) 在当前大屏上弹出其他设计好的大屏。

只要Script代码符合vue语法就能正常预览，具体的资料请参考：vue具体的语法请参考 (opens new window)

# 4.2.Template代码部分如下图

avatar

Template代码部分是不能在线编辑的，但是可以根据自定义属性结合。

# 4.3.Css代码部分如下图

avatar

css是具有私有性，只在当前大屏中可生效

# 5.大屏设计快捷键说明

选中布画中的组件时

# 🚀按键盘“↑”向上移动8px

# 🚀按键盘“↓”向下移动8px

# 🚀按键盘“→”向右移动8px

# 🚀按键盘“←”向左移动8px

# 🚀按键盘“delete”删除该组件

# 🚀按住键盘“ctrl”，单击设计器中的组件可以多选，单击图层也可以进行多选。

# 6.大屏设计右击菜单说明

avatar

右击图层和右击组件都可以弹出系统的右击菜单，

# 🚀置顶：将当前组件的图层，设置最上层。

# 🚀置底：将选中的组件的图层，设置最低层。

# 🚀上移一层：将选中的组件的图层，往上移动一层。

# 🚀下移一层:将选中的组件的图层，往下移动一层。

# 🚀隐藏：将选中的组件，在设计时隐藏起来。

# 🚀显示：将选中的隐藏的组件，设置显示出来。只能在图层中设置。

# 🚀锁定：将选中的组件的位置进行锁定，无法拖拽其位置，无法拉大拉小。

# 🚀复制：将选中的组件进行放置到剪切板中，等待粘贴。

# 🚀删除：将选中的组件进行删除。

# 🚀粘贴：将剪切板中的组件进行粘贴出来。

# 🚀成组：将几个组件合并成组，可以方便一起拖拽。

# 🚀取消成组：将成组的组件进行取消，各个进行独立拖拽设计

上次更新: 2024/02/19, 23:02:23
04、页面操作指引
06、组件集成指引

← 06、组件集成指引→

简搭云软件 | Copyright © 2021-2024 长沙市简搭云科技有限公司
×