官網：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中，這樣就可以支持組件聯動。
只要解決上面這些問題就可以輕而易舉的實現一個開放的報表工具
如果你對該技術感興趣可以聯系開發者合作開發
微信：
