smartchart开发相关注意事项及流程

smartchart 特点

提示：可以和大家分享最初成为创作者的初心
例如：

1. 简单图表可以拖拽生成，相当于一个低代码平台
2. 有提供内置全局函数，支持内置vue，echarts
3. 代码管理直接上传到对应服务器路径，可以保存快照

smartchart官方文档新人必看部分

新建页面-仪表盘：Wiki - Gitee.com

注意： 需要开启dev 模式才能进入新建仪表盘，创建完仪表盘需要点击上线，刷新页面就可以在左侧菜单栏找到新建的页面。

模板开发：Wiki - Gitee.com

上传文档：Wiki - Gitee.com

数据下载：Wiki - Gitee.com

---

diy维护代码（重要）

1. 简单模式，开发代码都在smartchart平台上，最终打包到远端静态服务器上面

2. 专业模式，利用smartchart 通用数据集，懒加载接口，此时接口都是同步请求，前端采用普通前端分离开发，最终打包后放打包后文件上去smartchart, 需要本地mock 数据，提高效率，否则，每次打包再测试效率极低。

专业模式开发要点

---

重要概念说明：

Wiki - Gitee.com

(0) 数据集

统一使用通用数据集，懒加载（不会自动刷新，刷新时间设置为-1,组-2），仪表盘中可管理当前项目所有数据集，调整序号，de_refresh(num) 中的num，接口功能说明文案有助于管理和查找数据集

（1）开发中，如何mock 测试接口

（2）开发接口传参编写

// _id 是放置用户身份的，smartchart 会将url 上的id 放到 filter_param 变量中， // 为了纯净filter_param,每次全量替换filter_param，所以_id 需要手动加上 function refreshData(type, params = {}) { params._id = window.smartchart_id; console.log("refresh_params:", params); window.filter_param = params || {}; window.ds_refresh(dataSet[type]); }

(3) 代码获取接口返回值

数据集运行接口放到全局windows, 简单模式只有一个vue 实例，容易赋值到vue 实例上面，专业开发中 vue 实例很多，可能在根vue 实例的某个后代实例对象中，难以命中目标vue 实例，所以建议放到windows 中。

vue 实例中获取接口返回值

（4）处理webpack 打包文件，可压缩所有js、css，fonts 等生产资料， 在模板上传文件中上传

（5）如下，index.html 的js,css 路径拷贝到模板，{{div_list.0}} 对应（图形/数据集/一个接口），这里一共13个接口

大管家（内嵌报表页的容易，iframe 嵌入smartchart 页面）

样式、加载、展示等小问题