A. 前端用echarts實現表格形柱形圖的有哪些
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性 化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表 盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展 現。模塊化單文件引入(推薦)1新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，2新建script標簽引入模塊化單文件echarts.js，3新建script標簽中為模塊載入器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)，4script標簽內動態載入echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，5瀏覽器中打開ecarts.html，就可以看到以下效果，：END標簽式單文件引入新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，新建script標簽引入echart-all.js，新建script，使用全局變數echarts初始化圖表並驅動圖表的生成，瀏覽器中打開echarts.html，可以看到如下效果，
B. 設計前端網頁時如何實現數據可視化
這里介紹3個前端可視化庫，分別是Highcharts、ECharts和G2，這3個庫都可以快速完成前端網頁數據可視化，而且制圖方便、種類繁多，下面我簡單介紹一下這3個庫：
Highcharts
這是一個純JS編寫的圖表庫，可蠢悉廳以快速為Web網站添加互動式圖表，個人網站可以免費使用，支持圖表類型眾多，包括常見的散點圖、折線圖、柱狀圖、餅圖等，下面我簡單介紹一下這個庫的使用：
1.使用的話，有2種方式，一種是CDN遠程引入highcharts.js文件，一種是下載
Highcharts源碼包，本地導入，這里以第一種方法為例，直接CDN導入，測試代碼如下，官網示例，非常簡單，基本思路先創建一個div容器，然後通過JS引入圖表到容器，設置相關屬性就行：
用瀏覽器打開這個html文件，效果帶隱如下：
2.更多示例的話，可以查看官網教程.cn/demo/highcharts，非常詳細，各種圖表都有涉及，還可以在線編輯，使用起來非常不錯：
ECharts
這個是網路開發的一個開源前端可視化庫，可以流暢的運行在移動設備和PC網頁上，數據交互性也非常不錯，而且支持個性化定製，下面我簡單介紹一下這個庫的使用：
1.首先，下載echarts.js文件，這個直接到官網上下載就行，大概也就2兆左右，如下：
2.下載完成後，就可以直接在本地html文件中引入使用了，測試代碼如下，也非常簡單，基本思路和上面highcharts差不多，先創建一個div容器，然後通過JS引入：
用瀏覽器打開這個html文件，效果如下，非常不錯：
2.更多示例的話，也可以參考官網教程，相關圖表示例非常多也很詳細，提供在線編輯查看功能，很適合初學者掌握和學習：
G2
這個前端可視化庫功能和highcharts、echarts差不多，由阿里開發，制圖種類也比較多，交互性也非常好，簡單易學，可以快速完成日常大部分圖表製作，下面我簡單介紹一下這個庫的使用：
1.這里也可以通過遠程引入，然後直接創建一個div容器顯示就行，測試代碼如下，非常簡單，也是官網的入門示例：
瀏覽器打開後的效果如下，還不錯：
2.更多示例的話，也可以參考官網教程，非常詳細，各個種類的圖表都有詳細代碼和注釋，也可以在線編輯，非常適合開發者參考陸拆和學習：
目前，就分享這3個前端可視化庫吧，對於日常前端制圖來說足夠了，當然，你也可以使用d3.js庫來完成相同的制圖功能也是可以的，網上也有相關教程和資料，感興趣的話，可以搜一下，非常詳細、豐富，希望以上分享的內容能對你有所幫助吧
C. web前端可視化圖表怎麼添加數據
需要調介面嗎？不需要的話數據直接寫在data里返回出去就好啦，調用介面的話，先定義一個空數組接收數據，返回出去，用prop調用就好
D. 大數據可視化大屏圖表設計經驗，教給你！
自從跟大家分享第一篇 《大數據可視化大屏設計經驗，教給你！》 ，很多小夥伴都會問我一些相關的問題，看了小夥伴給我發的視覺稿，整體都還不錯，但是發現圖表的設計都有一些問題，大家可能對數據可視化的圖表設計經驗少一些，所以這篇文章就挖掘一下圖表的細節表現，分享我曾經遇到過的坑和對圖表設計的理解。
圖表設計
圖表設計概念
圖表設計是數據可視化的一個分支領域，是對數據進行二次加工，用統計圖表的方式進行呈現，也是數據可視化的核心表現，圖表設計既要保證圖表本身數據清晰准確、直觀易懂，又要在找准用戶關注的核心內容進行適當的突顯，幫助用戶通過數據進行決策。
下面分析三種常用的可視化圖表設計：
折線圖
折線圖常用於表示數據的變化和趨勢，坐標軸的不同對折線的變化幅度有很大的影響。
左圖坐標軸設定的太低，折線變化過於陡峭，圖中數值區間為（10-34）數據可視化的表現過於誇大了折線變化的趨勢。
右圖坐標軸的數值設定的太高，則折線變化過於平緩，無法清晰的表現折線的變化。
合理的折線圖應當占據圖表的三分之二的位置，圖表的X軸數值范圍應根據折線的數值增減變化而變化，這需要跟前端小哥哥小姐姐說明，做成動態計算。
折線圖的折線粗細要合理，過細的折線會降低數據表現，過粗的折線會損失折線中的數據波動細節，視覺上較難精準找到折線點的相應數值！我通常用兩個像素的線，看起來比較合適！
右圖刻度線顏色過重，影響圖表數據的表現，零基線跟圖表內的刻度線對比不夠明顯，整體很亂。零基線是強調起始位置的，一般要比圖表內的線顏色凸出一些。
條形圖/柱狀圖
理想很豐滿，現實很骨感。這個案例是我之前在工作中遇到的問題，數據進來後，被嚇到了，問題的原因是沒有跟前端小哥姐溝通好，他們把X軸寫死，導致出現這種問題，其實應該情況要把這些圖表的取值范圍寫成動態計算的。
例如，以現在數值范圍為例，數據的最高值為18，X軸最高數值應該為25，當數據又上升一定的高度後，X軸再上升到相應的數值高度，這樣避免了如右圖的問題。
坐標軸的標簽文字最好能水平排列， 當X軸標簽文字過多時，不建議傾斜排列、上下排列、換行排列 文字多了這樣的展示大大降低了閱讀性！下圖給出兩個解決方案，大大提高標簽文字的閱讀性！
解決方案
柱子之間過於分散就會失去數據之間的關聯性，過密就會變得數據之間沒有獨立性更不利於舒適閱讀。
當柱子為n時，柱子直接的距離建議與n相差不要太大，柱子靠邊的距離，最好是柱子之間的一半的距離，這樣視覺上最為舒適。
餅圖
左1圖，不建議在餅圖內與百分比數值一起顯示，餅圖本身的形狀和大小，文字過多時容易溢出，如果出現一個2%一個1%，就很難辨別圖形指向，這樣也就失去了數據可視化的意義，PPT通常有這樣的設計樣式，因為是個死圖。
左3圖，人的閱讀習慣是從左到右，從上到下，所以數據從大到小排列，更有助於閱讀，圖形也更具美感！
當餅圖為檢出率，或者一些重要信息檢測的重點關注數據，就不建議大小數據順時針排列，左1圖這種情況一般很少出現，因為關注的是檢出數值，展示未檢出數據實為雞肋，可能是極少情況的需要吧！
右圖對於類似檢出率的數據最為合適，直觀清晰，沒有無用數據干擾！
當餅圖的標簽維度過多時，就不適合把數據圍繞餅圖一周展示，會很亂，不易閱讀，解決方案如右圖！
圖表分類圖
分享一張圖表分類大全，保存起來，設計數據可視化產品，會有重要參考價值！
這張圖由設計師Abela對圖表的各種特徵進行了大致的概括總結。
E. 如何實現資料庫中所有的表在vue前端頁面中展示
使用cnpminstallecharts-D。
1、安裝插件cnpminstallecharts-D。
2、創建圖表，將數據引入。
3、使用容器，使chart自適應高度和寬度，通過窗體高寬計算容器高寬。
4、把這個案例模塊化，設計成一個可復用組件，只需傳入id、options即可。
F. 前端圖表如果處理大量數據該怎麼辦
淺談一下Cognos處理大數據的思路，僅針對10.2.1以下的版本，對於10.2.1當中引入的hadloop等分布式數據倉庫等不做介紹。我們主要從一個一般中等項目當中，用怎樣的思路來優化我們的查詢。
我們主要從3個思路來思考大數據的處理
一、資料庫層次
現在主流的Cognos項目，主要的開發模式還是基於rolap的dmr報表建模。因此，資料庫的優化就顯得由為重要。主要通過以下幾個方面優化我們的資料庫：
(1)維度id，維度層次id等關鍵減縮欄位建立索引建立、維護。
(2)根據數據量的大小，按時間等進行分區優化。
(3)高速緩沖表MQT的使用
(4)表空間、緩沖池設置等
(5)資料庫性能優化
二、Cognos Server優化
Cognos優化包括對配置文件的優化，集群的搭建，服務和日誌的開啟等基於cognos 軟體安裝，配置的優化，主要包括以下幾個方面：
2.1 apache 配置優化
Timeout（超時）/MaxKeepAliveRequests（最大的請求數）/KeepAliveTimeout（請求超時）的優化配置
2.2Cognos自帶tomcat配置調優
(1)可修改TOMCAT配置文件CRN_ROOT\tomcat.\conf\server.xml。其參數集中在行：
可以對maxProcessors（最大進程數）/AcceptCount(最大連接數) ConnectionTimeout（連接超時）進行修改
(2)文件路徑：CRN_ROOT\tomcat.\conf\web.xml
可以對session-timeout進行修改.
2.3Cognos sever配置文件優化
2.3.1 reportservice.xml優化
文件路徑：CRN_ROOT\ webapps\p2pd\WEB-INF\services\ reportservice.xml
註：修改文件後，重啟服務後配置生效。
包括以下參數 max_process(交互報表處理進程數，和cpu有關) inger_process(交互報表初始化進程數，和cpu優關)
max_non_affine_connections_per_process(交互報表所佔線程數) idle_process_check_interval_ms(空閑檢測時間)
queue_time_limit_ms(報表服務隊列時間限制) async_wait_timeout_ms(Dispatcher請求等待同步時間)
2.3.2 batchreportservice.xml
文件路徑：CRN_ROOT\ webapps\p2pd\WEB-INF\services\ batchreportservice.xml
註：修改文件後，重啟服務後配置生效。
包括以下參數 max_process(服務批量報表處理所佔進程數) linger_process(服務批量報表處理初始化進程數)
max_non_affine_connections_per_process(服務批量報表處理所佔線程數) idle_process_check_interval_ms(空閑進程檢測時間間隔)
idle_process_max_idle_ticks(空閑進程檢測標記) queue_time_limit_ms(批量報表處理排隊時間限制) async_wait_timeout_ms(Dispatcher請求等待同步時間)
2.3.3 CQEConfig.xml
主要是與資料庫參數設置，文件路徑：CRN_ROOT\configuration\ CQEConfig.xml.sample
註：將CQEConfig.xml.sample文件名修改為CQEConfig.xml後，重啟服務後配置生效。
可以修改以下參數：Timeout(應用資料庫連接超時設置) PoolSize(應用資料庫連接池最大連接數設置) queryReuse(查詢緩沖設置)
2013-07-08 0
分享
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
2.3.4 ppds_cfg.xml
主要進行緩存和日誌參數設置，文件路徑：\cognos\c8\configuration\ ppds_cfg.xml
註：重啟服務後配置生效。
可以修改以下參數：ReadCacheSize(可減少用戶訪問時伺服器的磁碟IO。提高訪問速度。) pcQueryLogFile(建議生產環境關閉該日誌的跟蹤，一般默認也是關閉狀態)
2.4 Cognos content store優化
2.4.1優化內容庫連接服務
內容庫最好外配為db2 oracle等資料庫，不要用自帶的derby.因為項目中的日誌信息會非常多，嚴重影響內容庫的效率。
Cognos Administration，在系統下選擇選擇對應的服務，選擇ContentManagerService的屬性，設置相應的連接參數信息。
2.4.2日誌優化
適當開啟各個cognos服務的日誌級別，越高級的級別對應更詳細，更明確的日誌，但也會影響整個系統的效率。
這是一把雙刃劍，需要適當調整。日誌級別設置得越高，就越降低系統性能。通常情況下，您可以將級別設置為
「最小」或「基本」來收集錯誤，或設置為「請求」來收集錯誤和警告。
2.5提高訪問資料庫速度
Cognos和資料庫間參數在cer\bin\cogdm.ini文件中,(根據版本不同是安裝目錄的數字，根據連接的資料庫不同，是對應資料庫名稱的關鍵字)
以oracle資料庫為例,參數在cogdmor.ini文件中，打開這個文件查找字元串Fetch Number of Rows=去掉這行前面的分號，將10改成2000；
這樣這行就成了Fetch Number of Rows=2000，表示是每次從資料庫取2000條數據。其他資料庫基本上都有類似的配置。用以提高從資料庫中提取數據的速度。
2.6加大緩存
cer\bin\Cer.ini(*根據版本不同是安裝目錄的數字)：
SortMemory=5120
（這里 SortMemory 單位是 2kbytes，5120代表 2k x 5120 = 10M）（技巧：一般 SortMemory 取空閑內存的十分之一到八分之一大小）
2.7修改cognos configuration中的參數來優化
在cognos configuration中有很多參數可以優化來提高整體軟體的運行效率，比如增加內存、增加查詢緩存
2.8分布式部署
分布式部署可以大大提升Cognos伺服器的負載能力，同時容錯保護功能可以使伺服器更為穩定的運行，很好的支持大用戶量的並發使用。
2013-07-08 0
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
3.報表設計優化
Cognos報表作為一個工具，在非cube模式下，最終我們執行報表查詢的時候，我們的報表發送到資料庫進行查詢的本質還是sql，所以，在我們製作一張報表的時候，我們要盡可能的利用fm,rs當中的功能，優化報表最終執行生成的SQL實現整個報表的優化。而CUBE模式下，我們更多要考慮配置、存放和資料庫大小所造成的影響，下面我會細細說來。
2013-07-08 0
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
3.1 FM建模優化
3.1.1手寫SQL定製查詢主題
右鍵點擊查詢主題的菜單項Edit Definition…可以進入SQL語句編寫框，調整查詢主題的SQL語句。默認情況下，這里的SQL語句為Cognos SQL類型。如果需要編寫應用資料庫可以直接運行的本地SQL需要將這里的SQL類型進行設置。點擊右上方的Options按鈕，選擇SQL Settings標簽頁，選擇SQL Type為Native。這個時候，我們手寫SQL就非常注重這個SQL的優化，盡量避免SELECT *,用EXISTS替代IN,多使用DECODE來進行判斷，條件語句注意點等常用SQL優化策略，編寫對應的SQL.
3.1.2盡量使用特定數據的資料庫函數
在菜單項Actions中選擇Specify Package Function List…指定報表定製中可以使用的資料庫函數列表。將除應用資料庫意外的其他資料庫類型從Selected function sets中選到Available function sets中，盡量使用特定資料庫的自帶函數可以提高查詢效率。
3.1.3表關聯設定
在建立表關聯盡量避免使用外關聯關系（包括左外關聯、右外關聯、全外關聯）。外關聯的使用會使資料庫的查詢壓力驟增，從而影響前端報表的生成。在星型結構、雪花型結構的數據倉庫模型中，盡量按照一對一、一對多的關聯關系設定維表與實事表之間的關聯，Cognos Server會依照這里的關聯關系自動優化提交給資料庫的SQL語句。如果關聯關系中出現了環狀連接關系，可以通過別名表或是快捷鍵的方式解決環狀連接問題.
3.1.4Edit Governors查詢性能設置
在菜單項Project中選擇Edit Governors，可以設置查詢的查詢性能
Report table limits 該屬性設置報表中運行SQL所涉及的TABLE數量
Data retrieval limits 該屬性設置報表中運行SQL返回結果的數量
Query execution time limits 該屬性設置報表中運行SQL的執行時間
Large text items limit 該屬性設置報表中運行SQL返回大文字塊的字元數量限制
2013-07-08 0
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
3.2 RS報表調優
3.2.1報表函數的使用
在報表函數的使用上，盡可能使用應用資料庫能夠解析的本地資料庫函數，函數列表中的通用函數，在處理時會將函數放在報表伺服器進行運算，從而增大了報表伺服器的性能開銷。
3.2.2 觀察查詢的SQL
我們選擇查詢頁面，GENERATE SQL/MDX觀察這個報表生成的SQL並進行不斷優化，
3.3.33.2 RS報表調優
3.2.1報表函數的使用
在報表函數的使用上，盡可能使用應用資料庫能夠解析的本地資料庫函數，函數列表中的通用函數，在處理時會將函數放在報表伺服器進行運算，從而增大了報表伺服器的性能開銷。
3.2.2 觀察查詢的SQL
我們選擇查詢頁面，GENERATE SQL/MDX觀察這個報表生成的SQL並進行不斷優化，
3.3.3查詢欄位、查詢表順序調整
根據資料庫的優化策略，可能需要將查詢欄位的順序進行調整，可以在Data Items窗口中進行設置。查詢SQL語句中，From關鍵字後面的表順序是按照select關鍵字後出現的欄位順序進行設置的。在為表順序進行設置時，屬性為Identifier或Attribute的欄位比屬性為Fact的欄位在為表排序時的優先順序要高，即，先以Identifier、Attribute欄位的出現順序為表進行排序，如果沒有上述兩類欄位，才以Fact欄位的出現順序為表進行排序。
3.3.4聚合前後設置過濾條件
將過濾條件的Application屬性設置為After aggregation或Before aggregation可以調整過濾條件在聚合前或是聚合後生效。After aggregation生成過濾條件的SQL語句使用的是關鍵字having，而Before aggregation生成過濾條件的SQL語句使用的是關鍵字where。
3.3.5取消報表自動分組提高明細報表查詢速度
如果報表要展現明細數據，不想使用任何匯總，我們可以到此報表對應的查詢中將自動分組屬性定義為否。修改地方：對象的屬性Auto Group & Summarize可以設置當前SQL語句的查詢中是否加入distinct、sum、group by這樣的關鍵字。默認情況下，該屬性設置為Yes，可以根據查詢情況關掉此開關項，減少SQL語句的復雜度。
3.3.6自動排序設置
在Query的Auto-sort屬性中可以為查詢設置是否自動排序。如果選擇是，則會在生成的SQL語句中自動加入Order By關鍵字，排序欄位將自動根據數據項的屬性進行設置（如果查詢欄位的usage屬性為Attribute、Identifier則排序，如果為Fact則不排序）；如果選擇否、則不排序；如果選擇最小，則根據數據項的排序屬性進行排序設置。默認值為最小。
3.3.7報表Processing設置
在Query的Processing屬性中可以為查詢設置SQL的處理設置。Cognos Report Studio會將報表的所有設置首先轉換為Cognos SQL提交給報表伺服器，伺服器在進行必要處理後，會將SQL語句轉換為應用資料庫本地執行的SQL語句，進行資料庫處理。為提高報表的處理速度，要盡可能的將報表的處理運算放在資料庫進行，以保證其運行速度。將該屬性設置為Database only會將報表頁面生成的Cognos SQL不經報表伺服器處理全部轉換為資料庫能夠執行的本地資料庫SQL，如果將該屬性設置為Limited Local，則將報表頁面生成的Cognos SQL先進行必要的報表伺服器運算，然後再將剩餘的部分提交給資料庫進行本地SQL的處理。默認值為Framework中為Datasource對象的設置的queryProcessing屬性。
3.3.8使用With子句
在Query的Use SQL With Clause屬性中可以為查詢設置是否使用With子句。部分資料庫例如Oracle支持With關鍵字，當查詢中嵌套子查詢時，可以通過With子句的使用，減輕報表伺服器對Cognos SQL的處理，從而提升報表的運行性能。如果將該屬性設置為Yes，則允許使用With關鍵字，查詢中生成的Native SQL將出現With子句；如果將該屬性設置為No，雖然拒絕使用With關鍵字。默認值為Framework中Edit Governors下的Use WITH clause when generating SQL屬性設置。
3.3.9報表伺服器本地緩存設置
在Query的Use Local Cache屬性中可以為查詢設置是否使用本地緩存。如果將該屬性設置為Yes，則啟用伺服器的本地緩存，伺服器將為查詢結果保存在session中，當用戶在瀏覽器內再次打開同一張報表時，查詢結果將取自緩存，從而減輕了資料庫的負載壓力；如果將該屬性設置為No，則禁用伺服器的本地緩存，查詢結果全部取自資料庫的實時數據。默認值為Framework中Edit Governors下的Allow usage of local cache屬性設置。
我用的是finereport，比這個方便