官网：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中，这样就可以支持组件联动。
只要解决上面这些问题就可以轻而易举的实现一个开放的报表工具
如果你对该技术感兴趣可以联系开发者合作开发
微信：
