SuperMap iPortal低代码编辑器修改图表数据

xkf

前言

SuperMap iPortal 11i 在地图大屏中新增了一个低代码编辑器,下面大致说下怎么使用低代码编辑器去修改大屏中图表组件的数据.这个可以用于对接部分无法上传到iportal的数据或者是直接对接显示数据库里的数据之类的场景进行使用.

1. 地图大屏中加入图表组件

打开地图大屏，新建一个大屏，然后在左侧导航栏拉入一个图表组件。

2. 打开低代码编辑器

在右上角打开低代码编辑器,并打开JavaScript的代码界面。

3. 定义图表的option.

在代码界面填入以下代码，具体代码的接口可以去echarts官网进行查看。

//定义图表的option
let option = {color: ['#2f89cf'],tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' shadow: 影子}},// 修改图标整体位置.大小grid: {left: '0%',top: '10px',right: '10px',bottom: '4%',containLabel: true},xAxis: [{type: 'category',data: ['旅游行业','教育培训','电竞行业','医疗行业','电商行业','社交行业','金融行业'],axisTick: {alignWithLabel: true},// 修改x轴文字(刻度标签)样式axisLabel: {color: 'rgba(255, 255, 255, .6)',fontSize: 12},// 修改x轴线条样式axisLine: {show: false}}],yAxis: [{type: 'value',// 修改y轴文字(刻度标签)标签样式axisLabel: {color: 'rgba(255, 255, 255, .6)',fontSize: 12},// 修改y轴线条样式axisLine: {lineStyle: {color: 'rgba(255, 255, 255, .1)'}},// 修改y轴分割线样式splitLine: {lineStyle: {color: 'rgba(255, 255, 255, .1)'}}}],series: [{name: '直接访问',type: 'bar',// 修改柱子宽度barWidth: '35%',data: [100, 520, 200, 334, 390, 330, 220],itemStyle: {barBorderRadius: 5}}]
}

4. 将option传给当前图表

在图表下面拿到当前图表的变量名,然后通过setOption将数据传给当前图表.

$Chart_0.setOption(option)

5. 刷新运行查看结果.

点击运行然后查看图表数据.

SuperMap iPortal低代码编辑器修改图表数据相关推荐

从零开始实现一个简单的低代码编辑器
一.写在前面低代码编辑器作为一种能够极大地提升开发效率的 PaaS 软件,近些年来一直收到各大公司以及各路投资方的追捧.而对于我们前端开发者来说,编辑器也是为数不多的拥有较深前端技术深度的开发场景. ...
仅需三步学会使用低代码ThingJS与森数据DIX数据对接
森数据DIX拥有强大的数据处理能力,内置主流集成插件,分钟级集成IT运维场景和IoT管理场景数据,提升效率.针对非主流系统,支持在线JS脚本编辑,提供灵活.规范的接口,满足低代码个性化需求,轻松实现物 ...
前端核武器：开源FrontendBlocks所见即所得低代码编辑器让所有人都能做前端布局
项目背景前端开发领域中,最为头疼的就是页面布局,即便是工作经验丰富的老前端程序员,在面对一个新的设计稿时仍旧会有很多需要从头开始敲的布局.那么为什么不让设计师直接来操刀写前端呢? 设计师写前端由于前 ...
生物统计师与临床医生协同研究使用的低代码洞察平台丨数据科学 x 临床医学
临床研究的"多角色"特性临床研究是以疾病的诊断.治疗.预后和病因为主要研究内容,以患者为主要研究对象的科学研究活动.现代临床研究项目的开展具有"多角色"参与的 ...
宜搭低代码与Faas构建数据看板
写在前面数字化办公兴起,企业改变办公方式迫在眉睫,低代码是一个发展方向目录写在前面环境及目的表单&连接器&Faas 表单连接器&Faas Faas 连接器配置结语 ...
【低代码】云端液位数据的由来与变送器的使用
文章目录前言一.液位概述 1.什么是液位 2.液位测量方式 3.液位模拟量二.液位变送器 1.工作原理 2.技术参数案例 3.液位变送器分类 1.侧装液位变送器 2.投入式液位变送器三.液位变 ...
Excel 修改【数据图表】的【数据源】的范围（VBA）
目录 ■核心代码 ■操作 ■例: 选中图表按下快捷键,运行宏(VBA代码) 使用代码的好处: ■扩展 (查看宏的快捷键) ■其他图表制作 ■核心代码 Excel 修改 [数据图表] 的 [数据源] ...
低代码平台数据表格组件的设计实践
在做低代码产品的过程中,产品经理可能会遇到各种各样的问题,比如部分产品经理可能会因为对数据模型的不熟悉,而在实际对接中产生一定障碍.所以产品经理要如何在低代码工作中铲除障碍.并进行决策?本篇文章里,作 ...
张铁柱-前端实现《低代码可视化编辑器》(一)思路整理 React-dnd+Ts
张铁柱-前端实现<低代码可视化编辑器>(一)思路整理 React-dnd+Ts 先上效果: 拖拽生成页面+调整顺序最近,接到任务做一个低代码编辑器,于是着手整理一下思路,调研一下实现方式 ...