VUE 开发报表,非编码方式
官网:http://doc.sougn.com
下载地址:https://pan.baidu.com/share/init?surl=P0O9sjfzC8nuQxirDfjW1A 密码:4oev
先看一段视屏,了解一下系统
视屏地址:https://sougn-test.oss-cn-beijing.aliyuncs.com/media/kk%202020-02-12%2019-06-35.mp4
拖拽式生成报表
看一张比较典型的大屏报表,如下图所示
我们进行报表开发往往经过一下几步
首先:业务专家对客户业务进行分析,给出满意的需求报告
然后:更近需求报告出业务原型图
最后:前端开发工程师拿到的如上图所示的美工图,以及切图,后端开发工程师进行接口开发,或者使用专业工具建立语义层(Universe)
项目中最耗时以及人力资源消耗最大的,往往在于业务的不确定(反复的变更:向领导请示一回,修改一次业务。)以及客户的要求高(客户往往会自己创造一些极度有创造力的图形,highcharts,fusioncharts,echarts。轮番用都不够。手写原生图形)
例如上面的一张大屏,也经过了大量的反复修改以及业务变动。而且部分图形也不是找个插件就可以使用。
先对上图所示的大屏进行分析
主要分为以下几部分:
背景图:
标题:
表格:
横向柱形图:
折线图:
饼图:
文本:
关联图:
地图:
进行技术选型:
方案一:vue+echarts+spring boot
方案二:帆软、ireport
方案一是比较传统的报表开发方式。手写编码,基本可以100%实现美工图效果。开发成本极大
方案二可以实现业务需求,但是特殊图形无法实现。开发成本小。软件要钱,最终显示效果不好
如何解决这两种方案的问题
需要一种不用钱,显示效果好。还可以自己扩展报表图形的方案,并且人工成本低
博客开始视屏里所示的报表开发工具,免费,超强扩展性,降级方案,支持联动,支持多数据源
实现原理:
如何将各种报表图形组件化?
目前前端组件化的方式:vue,react,angular这三种。但是react与angular,学习成本太高。国内用的人较少。主要选择vue
vue组件方式:
方式一:
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })
方式二:
<template>
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>
<script>
export default { name: 'button-counter'}
</script>
方案二依赖node进行编译,无法采用
方案一正好适合我们的技术要求
如果我们可以在后端后端解决vue的布局问题,那一样可以生产出上图所示的报表
如何让后端生产出布局?
网页的dom节点格式为一颗树,那我们就需要让布局方式也转换成树。这样后端才可以解析布局输出报表了
如何进行数据联动?
在报表开发中,我们一定会遇到数据联动问题,如何不采取编码方式,进行数据联动
从vue中得知vuex正好可以实现全局的数据联动,我们只需要将数据放在vuex中,这样就可以支持组件联动。
只要解决上面这些问题就可以轻而易举的实现一个开放的报表工具
如果你对该技术感兴趣可以联系开发者合作开发
微信:
VUE 开发报表,非编码方式的更多相关文章
- 浏览器中直接是使用react系列包开发,非打包方式。
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 非接触IC卡中typeA卡和typeB卡的区别--总结,二者的调制方式和编码方式不同
非接触IC卡中typeA卡和typeB卡的区别--总结,二者的调制方式和编码方式不同 1.非接触式IC卡的国际规范ISO/IEC14443的由来? 在非接触式IC卡的发展过程中,这些问题逐渐被解决并形 ...
- 从Qt5开始只剩下setCodecForLocale这一个了,只是影响Qt对toLocal8Bit相关函数的编码方式(在源码里写非英文,官方推荐“\xE4\xBD...”这种)good
QTextCodec::setCodecForCStrings(QTextCodec::codecForName("UTF-8")); QTextCodec::setCodecFo ...
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...
- Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量
前言 JavaScript语言由于其固有的灵活性,所以导致开发者可以写出很多诡异的代码,甚至一些较为正常的特性,如类型隐式转换.this的指代等等,也会让刚接触此语言的开发者头大不已.尤其是那些熟知其 ...
- 【开发笔记】- 修改tomcat默认的编码方式
tomcat8以后默认编码格式是utf-8:7之前的都是iso8859-1 如果默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找 ...
- C#操作Excel开发报表系列整理(转)
C#操作Excel进行报表开发系列共写了七篇,也已经有很久没有新东西了,现在整理一下,方便以后查阅,如果有写新的,会同时更新.需要注意的是因为Office的版本不同,实际的代码可能会有所不同,但是都是 ...
- C#操作Excel开发报表系列整理
C#操作Excel进行报表开发系列共写了八篇,也已经有很久没有新东西了,现在整理一下,方便以后查阅,如果有写新的,会同时更新.需要注意的是因为Office的版本不同,实际的代码可能会有所不同,但是都是 ...
- JavaScript是如何工作的:事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式!
摘要: 深度理解JS事件循环!!! 原文:JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! 作者:前端小智 Fundebug经授权转载, ...
随机推荐
- GraphicsLab Project之Diffuse Irradiance Environment Map
作者:i_dovelemon 日期:2020-01-04 主题:Rendering Equation,Irradiance Environment Map,Spherical Harmonic 引言 ...
- Django之表高级操作
目录 一.如何开启自己的测试脚本? 二.对表数据的添加.更新.删除 1.create() 2.update() 3.delete() 4.查看执行的sql语句 三. 单表查询13个操作 返回Query ...
- Java小项目之:五子棋,你下棋下得过电脑吗?
Java小项目之:五子棋,你下棋下得过电脑吗? Java五子棋功能要求: 1.创建窗口和设计一个棋盘界面 2.实现鼠标点击,棋子出现,黑白棋轮流下 3.能够判断五子相连输赢 4.添加重新开始,悔棋,退 ...
- matplotlib绘制符合论文要求的图片
最近需要将实验数据画图出来,由于使用python进行实验,自然使用到了matplotlib来作图. 下面的代码可以作为画图的模板代码,代码中有详细注释,可根据需要进行更改. # -*- coding: ...
- es lucene搜索及聚合流程源码分析
本文以TermQuery,GlobalOrdinalsStringTermsAggregator为例,通过代码,分析es,lucene搜索及聚合流程.1:协调节点收到请求后,将search任务发到相关 ...
- webpack实践——DLLPlugin 和 DLLReferencePlugin的使用
DLLPlugin 和 DLLReferencePlugin的使用 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度. 1 ...
- Go语言教程之结构体
Hello,大家好,我是小栈君,最近因为工作的事情延误了一点分享的进度,但是我会尽量抽时间分享关于IT干货知识,还希望大家能够持续关注"IT干货栈"哦. 闲话不多说,今天给大家继续 ...
- 【转】21个免费的UI界面设计工具、资源及网站
本文将介绍21个免费的UI界面设计工具.资源及网站,如果你在做用户体验设计.界面设计.产品设计.JS前段开发.手机产品设计以及iPad和平板电脑产品设计,不妨来看看. AD: 2013云计算架构师峰会 ...
- 什么样的项目适合docker部署,docker应用场景
docker官网上说明了docker的典型场景: 使应用的打包与部署自动化 创建轻量.私密的PAAS环境 实现自动化测试和持续的集成/部署 根据这些特性,我们可以想象一下,如果你的项目有如下痛点或者需 ...
- 【LC_Lesson2】---整数反转练习
题目描述: 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 1 ...