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经授权转载, ...
随机推荐
- 编辑软件->"Notepad++"
编辑软件->"Notepad++" Notepad++是什么? Notepad++功能比 Windows 中的Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文 ...
- # Okhttp解析—Interceptor详解
Okhttp解析-Interceptor详解 Interceptor可以说是okhttp的精髓之一,Okhttp重写请求/响应.重试.缓存响应等操作,基本都是在各个Interceptor中完成的,上篇 ...
- SpringBoot系列之集成Dubbo示例教程
一.分布式基本理论 1.1.分布式基本定义 <分布式系统原理与范型>定义: "分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统" 分布式系统(d ...
- html页脚固定在底部的方法
<style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; paddi ...
- centos下MySQL登录1045问题解决
由于需要在centos下部署整个应用,自然少不了对数据库的操作.但很多人可能会遇到一些问题,比如创建用户成功,但是却无法登录. 无法登陆一般就两个原因.第一,远程访问端口没开,第二个原因就是密码错误了 ...
- JVM之GC(二)
昨天总结了GC之前要做的事情,今天介绍一下主流的GC算法. 先介绍一下几个名词: Stop The World(STW):JVM进行GC的时候总不能一边清理垃圾一边制造垃圾把,那么垃圾鉴定的准确性根本 ...
- HTTPS中的TLS
1. SSL 与 TLS SSL:(Secure Socket Layer) 安全套接层,于 1994 年由网景公司设计,并于 1995 年发布了 3.0 版本TLS:(Transport Layer ...
- 1.常用的cmd命令
dir => 查看当前目录下的所有文件夹 cd.. => 返回上一级目录 cd/ => 返回根目录 cd 文件夹 => 打开当前目录下指定的子 ...
- Spring Boot2 系列教程 (六) | 使用 JdbcTemplates 访问 Mysql
前言 如题,今天介绍 springboot 通过jdbc访问关系型mysql,通过 spring 的 JdbcTemplate 去访问. 准备工作 SpringBoot 2.x jdk 1.8 mav ...
- [bzoj1297] [洛谷P4159] [SCOI2009] 迷路
Description windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 T 时刻到达节点 N-1. 现在给出该有向图,你能告诉windy总共有多少种不同 ...