2分钟上手、3小时学会无代码软件开发—Echarts数据可视化

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

引入方式一：用 script 标签在页面头问Matadata信息中引入JS库文件地址（可联项目）

引入方式二：库文件放于项目文件夹（本地部署项目及联项目均可以）

2、图表JS内容生成

参考官方文档处理JS文本

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

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

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

可以参考“可视化元件”一章“用户端元件（显示元件）”组中“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

可视化开发结果图（元件边框为显示内容特意拉大处理过）：

运行后图表显示：

*****

参考我们手册第一个文章中的2分钟的计算器功能的拖放连线开发演示，可学会无代码开发是如何开发软件的

想学无代码软件开发的学员请先学习3小时免费教学视频，3小时内可学会开发并开发出一套管理软件系统，然后看手册及其他视频来进阶提高快速成为高级开发人员

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！