1. 首页
  2. 全部文档
  3. 开发框架模块手册
  4. 生成Echarts图表

生成Echarts图表

生成Echarts图表

  • 模块项目下载地址:https://pan.baidu.com/s/1QHWU-LxqFQA0Iyv7VlFMKg
  • 请参考“无代码开发视频手册”中“图表生成”演示说明
  • 生成图表我们建议用Echarts来处理,因为图表样式类型很全面,且是国内最大的图表插件,由百度公司研发维护,且商业使用也是免费的
  • 生成Echarts图比较简单,我们会放同时放几个图来做为图表可复用模板,但如果需要复杂或自定义更多内容,建议先对Echarts进行了解并查看想要的功能案例进行JS脚本的修改
  • 开发图表显示过程较简单,相对涉及的知识点,更需要细心;此模块项目页面中先放一个普通行为处理元件,在此进行图表脚本运行来在页面对应图表显示块中生成图表,如果想在按钮中点击生成图表,则将此逻辑放于按钮元件中的点击事件行为处理元件中
  • 模块项目运行时的效果

分步逻辑设计

  • 添加图表库JS文件,我们模块项目中是放下载的文件放入了项目的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毫秒的延迟再进行的函数运行处理

快速复用指导

  • 1、下载成熟模块项目,开发工具中导入项目
  • 2、打开导入的项目,可以复制“达成率图表显示块”HTML Tag显示块、“DaChengLvTu”图表代码生成逻辑两个,右键单击选复制,在新的项目的某个页面中粘贴复用,选“导入粘贴”(paste import)的方式
  • 3、调整导入的模块在新项目中的文件目录中文件位置,将模块的内容全部拖放到新项目对应的目录位置

注意

  • 可以只复用用模板生成图表的代码部分,其他较简单直接点选元件开发更方便

复用案例

请参考为学员赠送的“料卡看板”项目中看板数据图表的设计