生成Echarts图表

模块项目下载地址：https://pan.baidu.com/s/1QHWU-LxqFQA0Iyv7VlFMKg
请参考“无代码开发视频手册”中“图表生成”演示说明
生成图表我们建议用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、调整导入的模块在新项目中的文件目录中文件位置，将模块的内容全部拖放到新项目对应的目录位置

注意

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

复用案例

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

开发框架模块手册

生成Echarts图表

分步逻辑设计

快速复用指导

注意

复用案例