【JSON2WEB】04 amis低代码前端框架介绍

已于 2024-02-27 14:50:32 修改
阅读量1.4k 收藏 13
点赞数 28
分类专栏： JSON2WEB 文章标签： 低代码 前端框架
于 2024-02-03 21:39:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5builder/article/details/135931607
版权

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

1 什么是 amis

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

看到amis一句话的介绍，感觉就是JSON2WEB要找的前端框架。
amis是百度开源的框架，毕竟是大厂，有保障。

用 JSON 写页面有什么好处
为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：

不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
不受前端技术更新的影响：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；
可以 完全 使用 可视化页面编辑器来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。

更详细的介绍参阅 amis管网 https://aisuda.bce.baidu.com/amis/zh-CN/docs/index

2 快速开始

amis 有两种使用方法：

JS SDK，可以用在任意页面中
React，可以用在 React 项目中
SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。

我是啥都不懂，只听说过这些名词。我就采用 JS SDK的方式开始学起吧。

2.1 先下载SDK

下载方式：
1 github 的 releases，最新版 文件是 sdk.tar.gz。 https://github.com/baidu/amis/releases
2 直接下载6.1版 sdk.tar,gz

3 使用 npm i amis 来下载，在> node_modules\amis\sdk 目录里就能找到。

在这里插入图片描述
拉到下面
在这里插入图片描述

下载解压后，在node_modules\amis\sdk目录下就是amis的sdk
新建一个文件夹amissdk,把sdk目录全部拷贝到amissdk目录下，在VScode的目录结构：
在这里插入图片描述

2.2 新建hello.html

在amissdk目录下新建一个hello.html文件，从官网拷贝如下代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="sdk/sdk.css" />
    <link rel="stylesheet" href="sdk/helper.css" />
    <link rel="stylesheet" href="sdk/iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
      html,
      body,
      .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="root" class="app-wrapper"></div>
    <script src="sdk/sdk.js"></script>
    <script type="text/javascript">
      (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
          type: 'page',
          title: '表单页面',
          body: {
            type: 'form',
            mode: 'horizontal',
            api: '/saveForm',
            body: [
              {
                label: 'Name',
                type: 'input-text',
                name: 'name'
              },
              {
                label: 'Email',
                type: 'input-email',
                name: 'email'
              }
            ]
          }
        };
        let amisScoped = amis.embed('#root', amisJSON);
      })();
    </script>
  </body>
</html>

注意：修改一下引用的css和js的文件的目录：

在这里插入图片描述
还有这里：
在这里插入图片描述

2.3 打开运行一下看看效果

在这里插入图片描述
这里Email还带校验功能

在这里插入图片描述
是不是很哇塞！

2.4 切换主题

引入主题css

  <link rel="stylesheet" href="sdk/ang.css" />

调用css

let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 这里是初始 props
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );

预览一下：
在这里插入图片描述
按钮颜色等不同了。

2.5 设置初始值

还是 amis.embed的第三个参数，传入data参数或 context参数，

可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。

3.1.0 开始可以传入 context 数据，无论哪层都可以使用到这个里面的数据。适合用来传递一些平台数据。

let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 这里是初始 props
          data: {
          	email: '5217@5217.com'
          },
          context: {
            name: '白龙马'
          }
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );

在这里插入图片描述

2.6 设置语言

// props 中可以设置语言，默认是中文

 let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 设置语言 props 中可以设置语言，默认是中文
          locale: 'en-US',
          // 这里是初始 props
          data: {
            email: '5217@5217.com'
          },
          context: {
            name: '白龙马'
          }
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );

在这里插入图片描述
其它行为和属性用到时在慢慢研究吧。

3 创建另一个页面World.html

直接复制hello.html的内容，稍微改一下主题 和 页面title，修改完以后
Hello.html是这样的：
在这里插入图片描述

World.html是这样的：
在这里插入图片描述
World.html的完整代码：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>World</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="stylesheet" href="sdk/sdk.css" />
  <link rel="stylesheet" href="sdk/helper.css" />
  <link rel="stylesheet" href="sdk/iconfont.css" />
  <link rel="stylesheet" href="sdk/ang.css" />
  <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
  <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
  <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
  <style>
    html,
    body,
    .app-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="root" class="app-wrapper"></div>
  <script src="sdk/sdk.js"></script>
  <script type="text/javascript">
    (function () {
      let amis = amisRequire('amis/embed');
      // 通过替换下面这个配置来生成不同页面
      let amisJSON = {
        type: 'page',
        title: 'World表单页面',
        body: {
          type: 'form',
          mode: 'horizontal',
          api: '/saveForm',
          body: [
            {
              label: 'Name',
              type: 'input-text',
              name: 'name'
            },
            {
              label: 'Email',
              type: 'input-email',
              name: 'email'
            }
          ]
        }
      };
      let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 设置语言
          locale: 'en-US',
          // 这里是初始 props
          data: {
            email: '5217@5217.com'
          },
          context: {
            name: '白龙马'
          }
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );
    })();
  </script>
</body>

</html>

4 App多页应用

基于 amis 渲染器，快速搭建自己的管理系统。

4.1 下载模板

官方提供了一个amis-admin的开发模板 ，基于 amis 的后台项目前端模板
下载解压后能看如如下目录结构：
在这里插入图片描述

4.2 安装依赖

打开cmd窗口，切换到模板解压目录，请运行下面的命令：
在这里插入图片描述

安装依赖
npm i
打开服务
npm start

安装成功后大概这样：
在这里插入图片描述
模板目录里多了node_modules目录：
在这里插入图片描述

4.3 启动服务

执行 npm start
在这里插入图片描述

4.4 看效果

复制 如下代码

http://localhost:3000

到浏览器地址栏，可开到如下效果：

在这里插入图片描述

5 amis可视化编辑器

5.1 在线体验

https://aisuda.github.io/amis-editor-demo/#/hello-world
在这里插入图片描述

5.2 下载到本地

https://github.com/aisuda/amis-editor-demo
在这里插入图片描述

安装依赖 npm i
编译
npm run dev
等编译完成后本地打开页面看效果

在这里插入图片描述
可以在本地编辑amis的代码了，代码编辑页如下：
在这里插入图片描述

代码如下：
在这里插入图片描述
页面JSON代码：

{
  "type": "page",
  "title": "REST-POST",
  "body": [
    {
      "id": "u:612babdc2ee4",
      "type": "form",
      "title": "表单",
      "mode": "horizontal",
      "dsType": "api",
      "feat": "Insert",
      "body": [
        {
          "name": "p_id",
          "label": "P_ID",
          "type": "input-number",
          "id": "u:d3ef30e81b7c"
        },
        {
          "name": "f_dm",
          "label": "代码",
          "type": "input-text",
          "id": "u:829c62cc55b6"
        },
        {
          "name": "s_mc",
          "label": "名称",
          "type": "input-text",
          "id": "u:980fb033d498"
        }
      ],
      "api": {
        "url": "http://127.0.0.1:5217/rest/atop",
        "method": "post",
        "requestAdaptor": "",
        "adaptor": "",
        "messages": {
          "success": "新增成功！",
          "failed": "新增失败！"
        },
        "dataType": "json",
        "silent": false
      },
      "actions": [
        {
          "type": "button",
          "label": "取消",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "cancel",
                  "componentId": "u:612babdc2ee4"
                }
              ]
            }
          },
          "level": "default",
          "id": "u:1a7dc864f018"
        },
        {
          "type": "button",
          "label": "重置",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "reset",
                  "componentId": "u:612babdc2ee4"
                }
              ]
            }
          },
          "level": "default",
          "id": "u:1f959996d975"
        },
        {
          "type": "button",
          "label": "提交",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "submit",
                  "componentId": "u:612babdc2ee4"
                }
              ]
            }
          },
          "level": "primary",
          "id": "u:c3f95ad62dde"
        }
      ],
      "resetAfterSubmit": true
    }
  ],
  "id": "u:9c6de6042af0",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  }
}

简介完。

白龙马5217
关注
  • 28
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
amis前端低代码框架 v2.8.0
03-19
amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，创建了 3w+ 页面。
amis前端低代码框架-其他
06-11
amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。 目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，创建了 3w+ 页面。 特点： 1、不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的； 2、不受前端技术更新的影响：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高； 3、享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改； 4、可以完全使用可视化页面编辑器 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线； 6、内置 100+ 种 UI 组件：包括其它 UI 框架都不会提供的富文本编辑器、条件组合等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 自定义组件 来扩充； 7、容器支持无限级嵌套：可以通过组合来满足各种布局需求； 8、经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 3 万+ 页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。   amis前端低代码框架 更新日志： v1.1.7 Feature Wrapper 组件 style 支持动态获取 数据映射支持 cookie 获取 内置 filter 新增 map 方法 Rating 组件支持清空 Tabs 的 activeKey 支持变量 Excel 导出支持自定义文件名 数据映射的 key 可以支持 . 或者 [] 来指定路径 Tree-Selector 支持懒加载 升级 ECharts 到 5.1.1 升级 Monaco-Editor 到 0.24.0 Enhancement 升级 mst 到 3 的最新版本 开发使用 concurrently 避免新开一个窗口 data-link 优化 Wizard 组件新增 startStep 配置项 按钮 tooltip 整理，支持 disabledTip Each 组件空状态时文字居左，同时将空数组状态也认为是空状态 去掉 Tab line 模式下顶部的 padding Uuid 有值时不设置，没值自动设置 TextArea 组件最小行数限制 & 静态展示超出等 Form 远端校验显示报错时，可以再次提交 Nav 的 mapTree 需要 depthFirst Checkboxes 分组样式优化 DateTime-Range下拉增加 popoverClassName 属性，可以自定义弹框的 className； 父级有缩放比时弹框宽度计算问题修复； Date 快捷键支持上月底 autoFill 支持多选 CRUD 的 toolbar 默认不再将最后一个组件放右边 接口兼容多种 json 返回格式 CRUD filterable 判断是否选中不要那么严格 Button-Group disabled 统一使用透明度的方式来实现,不然无法区分选中状态是哪个 调整日期按钮位置顺序 和 Dialog 统一 Bugfix 修复 Audio should not call load method at first render 修复 文档多余描述 修复 CRUD filter Combo模式不能清空查询条件 修复 初始状态 autoFill 不同步的问题 修复 文档样例错误 修复 Audio 组件 src 属性不符合预期的行为 修复 表单联合校验问题 修复 PopOver 宽度计算问题 修复 图片表单项 disabled 影响放大功能的问题 修复 Transfer selectTitle resultTitle 不生效的问题 修复 Tree 组件问题 修复 Fiule 组件错误提示样式问题 修复 Select 组件自定义菜单模式下无法全选问题 修复 Number 最大最小值校验问题 修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题 修复
amis低代码前端框架，它使用 JSON 配置来生成页面
04-13
低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率
探索Amis：构建高效可配置的前端应用的利器
gitblog_00059的博客
03-19 403
探索Amis：构建高效可配置的前端应用的利器 项目地址:https://gitcode.com/baidu/amis Amis 是由百度开源的一款基于Vue.js和JSON Schema的前端组件框架，它提供了一种声明式、配置化的开发方式，使得开发者无需关注底层实现细节，就能快速构建出复杂的业务界面。 项目简介 Amis的核心思想是将页面视图与数据逻辑分离，通过JSON描述界面上的元素及其行为，然...
amis前端低代码框架 v1.0.19
12-15
为您提供amis前端低代码框架下载，amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，创建了 3w+ 页面。特点：1、不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；2、不受前端技
amis前端低代码框架 v1.0.18
11-25
为您提供amis前端低代码框架下载，amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，创建了 3w+ 页面。特点：1、不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；2、不受前端技
amis-admin:基于 amis 的后台项目前端模板
04-28
amis admin 模板 基于 渲染器，快速搭建自己的管理系统。 快速开始 其实这个项目直接双击 index.html 都能看大部分效果，不过为了更完整体验，请运行下面的命令： # 安装依赖 npm i # 打开服务 npm start
【一】用amis做一个管理系统 - amis介绍
仅此一❤
09-11 1081
就是我现在的心情，面临不确定性和未知。但是不管怎样这都是人生阶段一个环节。希望我能走出当前的迷茫与困惑，相信会找到自己的道路。amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。下一篇：【二】用amis做一个管理系统 - 基于官方示例的改造。不要等待机会，而是创造机会。二、为什么要写这样一个框架？
amis的实战
慢行的蜗牛
09-04 2844
amis、低代码、js
FastAPI 和 fastapi-amis-admin：强大而可扩展的后台管理解决方案！
AirPython的博客
05-22 3582
大家好，我是安果！我们都知道 Django 生态丰富，功能强大，适用于中、大型项目，并且自带了后台管理系统；而 FastAPI 更适用于构建高性能的 API，后台管理系统需要另外开发本篇文章将介绍 FastAPI 结合fastapi-amis-admin 快速搭建后台管理系统的步骤fastapi-amis-admin 是一款高性能、高效且易于扩展的 FastAPI 管理框架；它受到 djang...
探秘Amis-Admin：构建高效后台管理界面的利器
最新发布
gitblog_00019的博客
04-04 390
探秘Amis-Admin：构建高效后台管理界面的利器 项目地址:https://gitcode.com/SmallRuralDog/amis-admin Amis-Admin 是一款基于 Amis 的强大后台管理系统模板，它旨在简化和加速企业级后台管理界面的开发流程，提供了一套完整的布局、组件和页面模板，帮助开发者快速搭建出美观且功能完善的后台系统。 项目概述 Amis-Admin 是一个采用 T...
amis：前端低代码框架，通过JSON配置可以生成各种页面
02-03
前端低代码框架，通过JSON配置可以生成各种后台页面，大大减少开发成本，甚至可以不需要了解前端。 开发指南 以下是参与开发amis才需要看的，使用请看前面的文档。 如果github下载慢可以使用上的充足。 推荐使用node 8/10/12。 # 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。 npm i # 开始编译，把代码产出到刚开启的服务的 webroot 目录。 # 这个程序不会自动结束，进入一个 watch 模式，文件变动会重新编译。 npm ru
＜开源： 推荐10个开源的前端低代码项目＞
一个平平无奇的技术宅
03-15 3708
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了钉钉低代码，通过简单的拖拽配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。
AMIS + httplib 快速搭建前后端
harry49的博客
06-16 2344
本人毫无前端编程经验，只会用C++写一些简单代码，因此想要从头开发一个简单的前端web，从头学html、css、vue……算了，直接放弃。那有没有其他办法呢？ 答案是有，因此才有了本文。 本文适用人群：无前端开发经验、会C++进行，需求简单...............
盘点12个低代码开源项目
m0_71327177的博客
08-20 9738
Appsmith 是一款开源低代码框架，主要用于构建管理面板、内部工具和仪表板等，允许拖放 UI 组件来构建页面，通过连接到任何 API、数据库或 GraphQL 源，并使用 JavaScript 语言编写逻辑，可以在短时间内创建内部应用程序。mometa 不是传统主流的低代码平台，而是面向研发的、代码可视设计编辑平台；sparrow 是一个场景化低代码（LowCode）搭建工作台，它的核心目标仅有一条“提升研发效率”，目前提供基于Vue、Element-UI 组件库中后台项目的实践，实时输出源代码。
【技术分享】Sanic+Amis：3天快速搭建一个web服务
be5yond的博客
06-16 1万+
前言 测试工作中，需要搭建一些生产力小工具来提高工作效率。 基于web的服务，无需终端可多人协作，易部署，成为第一选择。 但是
全栈低码设计开源框架 json-script-rule 简介
ying1dudu的博客
06-24 653
一款不需要写代码的低码插件，通过json进行动态接口开发，效率，复用，维护都有显著提升，适用于中等，简单业务场景
fastapi-amis-admin快速创建一个后台管理系统增加音乐管理功能(3)
hzether的博客
12-14 732
fastapi_amis_admin 是一个功能强大的框架，旨在帮助开发者在使用 FastAPI 进行 web 开发时，能够快速创建一个高效且易于管理的后台界面。通过结合 FastAPI 和 amis 的优势，fastapi_amis_admin 提供了一种简洁而高效的方式来构建和管理 web 应用程序的后台。主要特性：高性能：基于 FastAPI，保证了高并发和快速响应的能力。高效率：通过 amis 实现快速构建可视化界面，减少开发时间。
百度低代码框架amis介绍及实例讲解
热门推荐
java后端开发的博客，不仅仅是后端开发
06-01 3万+
amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，通过拖拉拽实现页面配置开发，大大减少页面开发工作量。低代码平台是未来的趋势，本文抛砖引玉介绍了一个增删改查列表实现的过程。.........
前端AMIS 热力图案例
07-08
AMIS是一个基于JSON配置的前端可视化界面框架，它可以用于快速构建各种数据驱动的Web应用程序。虽然AMIS本身并不提供热力图组件，但可以通过结合其他前端库或插件来实现热力图的展示。以下是一个使用AMIS结合echarts插件来展示热力图的示例： ```json { "type": "page", "title": "热力图示例", "body": [ { "type": "echarts", "option": { "title": { "text": "热力图示例" }, "tooltip": { "position": "top" }, "visualMap": { "min": 0, "max": 100, "calculable": true, "orient": "horizontal", "left": "center", "bottom": 20 }, "series": [ { "type": "heatmap", "data": [ [0, 0, 10], [0, 1, 20], [0, 2, 30], [1, 0, 40], [1, 1, 50], [1, 2, 60] ] } ] } } ] } ``` 在这个示例中，我们利用AMIS的echarts组件来展示热力图。通过配置echarts的option属性，可以设置热力图的标题、数据范围、数据点等信息。在series中，将type设置为heatmap，然后通过data属性传入热力图的数据点坐标和值。 需要注意的是，这只是一个简单的示例，实际应用中可能需要根据具体需求进行配置和定制。可以根据echarts的文档和AMIS的使用指南进一步了解如何配置和使用热力图组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值