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

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

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

2、图表JS内容生成

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

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

注意：
JS中的内容应先用查找“\r\n”换行符号替换为一个空格将全部行转为一行
处理过程中删除官方标注信息以免造成错误
转为一行的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

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

• 运行后图表显示：

*****

本文为TERSUS无代码开发手册文章，供参考学习使用，在有需要详细了解对应内容时细看学习，敬请关注并转发文章

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

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