生成Echarts图表
- 模块项目可下载学习或复用至新项目中
- 请参考“无代码开发视频手册”中“图表生成”演示说明
- 生成图表我们建议用Echarts来处理,因为图表样式类型很全面,且是国内最大的图表插件,由百度公司研发维护,且商业使用也是免费的
- 生成Echarts图比较简单,我们会放同时放几个图来做为图表可复用模板,但如果需要复杂或自定义更多内容,建议先对Echarts进行了解并查看想要的功能案例进行JS脚本的修改
- 开发图表显示过程较简单,相对涉及的知识点,更需要细心;此模块项目页面中先放一个普通行为处理元件,在此进行图表脚本运行来在页面对应图表显示块中生成图表,如果想在按钮中点击生成图表,则将此逻辑放于按钮元件中的点击事件行为处理元件中
- 模块项目运行时的效果
分步逻辑设计
- 添加图表库JS文件,我们模块项目中是放下载的文件放入了项目的Web子文件夹下
- 下载地址:https://github.com/apache/incubator-echarts/releases
- 选中某个发布版本的“Assets”下的“Source Code”文件包,解压后找到“dist”文件夹中的某个合适的版本复制粘贴到项目的Web子文件夹下
- 首先需要在页面中为每一个图表显示放一个显示块,可以用Pane显示块、也可以用HTML Tag显示标签元件、还可以是HTML Display富文本显示元件(我们在无代码开发手册的第三方插件接入一章中“Eharts数据可视化”一节说明中就是这个元件),并且定义其html.id属性,这个id是对象在显示页面中的标记名称,运行生成图表的函数时,就会找到这个页面中的标记对象将图表显示在其中
- 注意我们模块项目中是用HTML Tag显示标签元件,然后为其定义html.id属性和html.style样式来设计图表展示的宽度和高度大小,如下图显示中的第一个图表块的两个属性:
- 然后设计显示的脚本,可以参考Echarts官方的设计代码进行图表生成的函数设计,也可以直接复制修改模板中的代码:
var bingtu = echarts.init(document.getElementById('bingtutubiao')); option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] }; bingtu.setOption(option);
- 代码中,有以下几点需要注意:
- “bingtutubiao”是我们之前设计的页面中的显示块的id对应的值;应完全一致
- “var bingtu”是定义了一个图表的函数,如果是多个图表,用不同名称如“var zhutu”,这里定义函数名称后,脚本最后一行“bingtu.setOption(option);”就是执行此函数代码,其中名称应一致
- 以上函数中间是参数部分,参数可以在官方案例中调整数据进行测试,测试正常后直接复制贴入函数中间替换以上内容中间部分代码就行
- 如果复制到我们项目中,以上函数文本是转为单行文本放入一个字符常量元件中的,可以查询“\r\n”替换为空格方式去掉换行符号处理为单行字符串
- 在官方案例打开调整图表参数部分如下图所示:
- 通常使用以上操作时,应将图表函数中的数据或显示内容用替换符号${xxx}来替换,然后用“Create from Template模板生成字符串”元件来传入数据进行处理生成完整函数再进行运行的,这样每次使用时,只需传值和设定显示块名称、大小就可以,不需要每次去调函数代码
- 项目中一定注意,执行逻辑必须要等页面中图表显示块对象生成后才能运行,否则会有“invalid dom”问题提示,一般如果是放在页面中一个行为处理元件中的,则此行为处理元件不论名称是什么,都是页面预处理内容,会优先于页面其他内容进行处理,此时为此行为处理加一个延迟,我们模块项目加了1毫秒的延迟再进行的函数运行处理
- 项目中除第一个自定义完整设计的可利用模块外,其他几个显示图表参考的是Echarts官方以下案例:
- 柱图—https://www.echartsjs.com/examples/zh/editor.html?c=bar-tick-align
- 线图—https://www.echartsjs.com/examples/zh/editor.html?c=line-smooth
- 饼图—https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut,我们删除了官方代码中的“radius: [‘50%’, ‘70%’],”一行
快速复用指导
- 1、下载成熟模块项目,开发工具中导入项目
- 2、打开导入的项目,可以复制“达成率图表显示块”HTML Tag显示块、“DaChengLvTu”图表代码生成逻辑两个,右键单击选复制,在新的项目的某个页面中粘贴复用,选“导入粘贴”(paste import)的方式
- 3、调整导入的模块在新项目中的文件目录中文件位置,将模块的内容全部拖放到新项目对应的目录位置
注意
- 可以只复用用模板生成图表的代码部分,其他较简单直接点选元件开发更方便
复用案例
请参考为学员赠送的“料卡看板”项目中看板数据图表的设计