第一个大屏模板转化

应用场景 #

  • 已有开发好的非smartchart静态大屏模板
  • 如果你已购买专业版本, 可联系客服提供100+静态大屏模板
  • 对js, css及smartchart使用方法已有初步了解
  • 业务需求展示有合适的模板, 变化可能性不大

模板准备 #

AI模板 #

提示词参考如下：

你可以基于模板格式生成html，并将相应的CSS,HTML,JS填在模板的相应区域内，注意模板已经自动引入了jquery,echarts不用再引入。
### 以下为模板内容:
{% extends "echart/base.html" %}{% block head %}
<style>
此处放样式
</style>
{% endblock %}{% block body %}
<body>
此处放html
</body>
{% endblock %}{% block javascript %}
<script>
此处放js
</script>
{% endblock %}{% block footer %}{% endblock %}
### 以下是我的需求：
请生成一个销售大屏

静态模板 #

你也可以使用前端已开发好的静态模板

  • 准备好静态大屏模板, 将css, img, js等文件或文件夹打包
  • 打开静态大屏模板, 一般是index.html, 右键查看网页源码

转化步骤 #

请先观看迁移视屏

模板迁移 #

  • 新建仪表盘,打开模板
  • 在模板中上传打包的资源文件
  • 复制静态大屏网页源码中的head区间中的内容到模板对应的位置
  • 复制静态大屏网页源码中的body区间中的内容到模板对应的位置
  • 复制静态大屏网页源码中的script区间中的内容到模板对应的位置
  • 移除script中的关于jquery, echarts的引用
  • 替换相关的资源文件地址的引用
  • 逐步按照图形块,在 body 中进行替换

以上过程建意观看视屏

数据集与图形转化 #

  • 此过程与常规smartchart图形开发一致,建意学习第2/3 章节
  • 模板开发操作相关, 请学习第6章节–>低代码开发
  • 转化后的效果参考视屏

更多参考视屏 #

请观看系列视屏, 相信人人都会

Edit Edit this page