1. 首页
  2. 全部文档
  3. 无代码开发手册
  4. 第三方功能接入(5节)
  5. Echarts数据可视化

Echarts数据可视化

1、引入 ECharts.min.js 库文件

  • 引入方式一:用 script 标签在页面头问Matadata信息中引入JS库文件地址(可联网项目可联网项目,此类添加案例可参考“地图API接入”一节的案例,可下载修改复用)

  • 引入方式二:库文件放于项目文件夹(本地部署项目及联网项目均可以)

2、图表JS内容生成

  • 参考官方文档 处理JS文本

  • 用模板传值生成JS文本并运行(模板传值让参考可以按需变动)

注意:
JS中的内容应先用查找“\r\n”换行符号替换为一个空格将全部行转为一行
处理过程中删除官方标注信息以免造成错误
转为一行的Option内容可以在Echarts的官案例中替换运行测试是否正常
在项目中测试正常后,将数据改为变量名称,转为用模板输入数据生成完整的JS代码完

3、用HTML Display显示超文本元件定义图片要显示的位置

4、运行时生成图表

  • 在页面中以上设计的“HTML Display显示超文本元件”所在页面显示图表

5、Echarts 官方资料

Echarts是国内最好的图表生成库,由百度创建并维护,商业项目中也可免费使用,请参考官方资料

6、实例测试

  • 下载官方的Echart库文件包,放入TERSUS项目文件夹(如默认的workspace文件夹)项目文件下任意文件夹中(可以在项目的web文件夹下)
    · 下载地址:https://github.com/apache/incubator-echarts/releases
    · 选中某个发布版本的“Assets”下的“Source Code”文件包,解压后找到“dist”文件夹
    · 可以用完整版,也可以用简单版(echarts.simple.min.js),一般都足够使用,详细请参考官方说明,也可以在官网下载自定义需要生成某些图表的库文件
  • 在Echarts官网找一个图表案例,查看代码复制,参考以上第2步的处理修改为以下内容或直接用以下JS代码内容
var myChart = echarts.init(document.getElementById('ceshichart'));   var option = {      color: ['#3398DB'],      tooltip : {          trigger: 'axis',          axisPointer : {                        type : 'shadow'          }      },      grid: {          left: '3%',          right: '4%',          bottom: '3%',          containLabel: true      },      xAxis : [          {              type : 'category',              data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],              axisTick: {                  alignWithLabel: true              }          }      ],      yAxis : [          {              type : 'value'          }      ],      series : [          {              name:'直接访问',              type:'bar',              barWidth: '60%',              data:[10, 52, 200, 334, 390, 330, 220]          }      ]  };         myChart.setOption(option);   
  • 在无代码开发平台中,打开对应项目,在某个页面中添加一个HTML Display显示超文本元件,双击后进入元件,点选放入一个字符常量元件,常量元件重命名方式添加值“<div id=”ceshichart” style=”width:800px;height:400px;”>”,常量名称随意,注意因为值中含名称不允许的字符所以需独立命名,将常量传给HTML Display显示超文本元件,如第3步所示
  • 通常在HTML Display显示超文本元件的外部,添加一个Action普通行为处理元件,在元件中添加一个Run Javascript运行JS代码元件和一个字符常量元件,同上一步一样将第二步整理的代码添加入字符常量的值,字符常量传值给运行JS代码元件的<Script Text>输入元件
  • 保存后运行项目,浏览器中查看生成的图表
如果JS代码不对,会在运行时出现弹窗提示“Unexpected Token x”的信息,此时应查找x对应代码块
如果提示是“Can not read property "getAttribute" of Null”,则是代码运行时,未找到显示id对象这个属性值,是因为运行代码要比HTML Display显示超文本处理得早,可以加一个等待元件等待5毫秒再运行JS
  • 可视化开发结果图(元件边框为显示内容特意拉大处理过):

  • 运行后图表显示: