官網：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中，這樣就可以支援元件聯動。

　　只要解決上面這些問題就可以輕而易舉的實現一個開放的報表工具

 　如果你對該技術感興趣可以聯絡開發者合作開發

　　　微信：