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中，这样就可以支持组件联动。

      

　　只要解决上面这些问题就可以轻而易举的实现一个开放的报表工具

 　如果你对该技术感兴趣可以联系开发者合作开发

　　　微信：