ID E开发模式

简介 #

IDE 开发模式专为资深前端开发者设计。在此模式下，SmartChart 不加载任何 ECharts、Vue 组件，开发者可以在本地 VS Code 等 IDE 中完全自主开发 H5 页面，仅通过 SmartChart 的数据集接口获取数据，开发完成后将代码打包复制到模板区域即可发布。这种方式彻底解耦了数据层和展示层，使前端开发人员可以在不接触公司数据的情况下独立完成视觉开发。

应用场景 #

  • 如果您是一个资深的前端开发者
  • 可能不需要使用smartchart组件,仅需使用到数据集
  • 你希望在IDE(如VS code)中开发然后打包发布
  • 非专用人士,请不要尝试这种方式

开发方式 #

在模板中使用basesimple 输入图片说明 此时smartchart不会引用任何echarts, vue组件, 完全由您自已控制引入

如何使用数据集接口 #

  • 在仪表中新增懒加载数据集
  • 前端可以使用ds_refresh(数据集ID,filter_param,’list’)获取数据
  • 具体使用方法查看 “图形端数据函数”

在IDE中开发 #

由于你在开发中仅需要用到filter_param及ds_refresh, 建意新建一个js文件, 文件内容:

//以下为辅助方法, 发布时, 无需放入smartchart模板中
var filter_param = {};
function ds_refresh(num,param,r='list'){
  if(num === 0){你对应的图形中赋值代码,调试代码}
  if(num === 1){....}
  ......
}

然后将这个js文件在你的项目中引用调试使用

如何部署到smartchart #

打包完成后会有相应的css, js 和index.html文件, 将index.html中的代码复制贴粘到对应的模板区域中即可

  • 上传css,js
  • 修改css,js 相关引用路径
  • 去除之前定义的js辅助开发文件引用, 如果有定义全局变量, 将全局变量定义复制到模板js区域

IDE 开发模式流程 # 

1. 在高级设定中选择 basesimple 模板
2. 在仪表盘中新增懒加载数据集，确定好序号
3. 本地新建辅助 JS 文件 mock_smartchart.js：
   var filter_param = {};
   function ds_refresh(num){ if(num===0){...} }
4. 在本地引入 mock_smartchart.js 进行调试
5. 完成后删除 mock_smartchart.js 引用
6. 上传 CSS/JS 到 SmartChart 资源管理
7. 将 index.html 各区域内容复制到模板对应位置
8. 修改资源引用路径为 /static/custom/{ID}/...
Edit Edit this page