echarts 圖表可配置展示功能 word 功能描述

圖表可配置展示功能

博客內容不全面,因爲,有圖沒有上傳,沒法看。如果想看完整博客內容,請下載 word 文件。

下載地址:http://pan.baidu.com/s/1gfgQoCj

後續 當前 文檔 所描述的功能 的代碼,會 放到 github 上面,如果需要的,到時候記得 來這篇博客 找 鏈接。

項目地址:github.com/wenhaoran/design

注:因爲時間緊急,修改刪除沒有做,數據必填非空校驗沒做,查詢sql的數據爲空也沒有提示信息。

 

功能描述:

 

通過選擇模板,選擇數據源,來生成任意 圖表。

 

模板:餅圖模板;折線圖模板;柱狀圖模板;地圖模板。

數據源:2017年產品類型數量數據;2016年所有省份的 圖書館購書數量;

 

可生成,2017-產品餅圖2017-產品柱狀圖2016-省份對應數量地圖

 

其中,配置地圖模板,和配置 地圖所需數據源,需要技術人員支持。

 

*********************舉例說明*************************

*********************模板配置*************************

 

1、配置地圖模板工作 : 需要從 百度 echarts 官網 複製option 保存到一個js 文件中,並設置這個option 所需的 數據源, 。如圖下:

圖例說明:在系統中,新建這個餅圖,需要複製 左側的option ,保存到一個 js文件中,這個js文件的名稱需要與模板編碼相同,看後面相同顏色的介紹(比如:bingTemp.js

文件保存路徑如圖下:

。並查看,當前 option ,其中有這三部分,不能寫死,需要進行可配置化處理。

text: '某站點用戶訪問來源',

data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']

data:[

{value:335, name:'直接訪問'},

{value:310, name:'郵件營銷'},

{value:234, name:'聯盟廣告'},

{value:135, name:'視頻廣告'},

{value:1548, name:'搜索引擎'}

],

其中,text ,是每個圖例 的名稱,屬於字段,

而,兩個 data ,屬於數據,需要從 數據庫中查詢。

 

 

2、 項目中進行配置,如圖下:

從菜單中,選擇圖表模板,並 新建模板。

模板名稱,名稱爲餅圖。 模板編碼,就是上面option保存js文件名稱,上面說的是bingTemp.js,那麼這裏的編碼,就得是 bingTemp

模板類型,餅圖。

 

在上面option 中,需要的 三種數據,分別是 ,固定字段,和 從數據庫中查詢的數據。

就在菜單中,進行配置。

先說,固定字段的配置。

 

3、配置固定字段

字段名稱,和字段 編碼。

設置完成必填字段後,需要新建一個 jsp文件,名稱等於 bingTemp.jsp

Jsp 文件,需要設置 input 輸入框,等於 必填字段。 因爲,在 生成具體某個圖表的時候,必填字段,是需要保存到數據庫的。

 

 

4、配置數據源類型。

剛纔說了,配置固定字段,下面說配置圖表所需數據,option 中,需要兩組數據,類型分別是,數組json數據。如圖下。

點擊 json數據對象後,在下面的列表,選擇,增加數據類型。填寫信息如圖上。

其中,

數據類型,需要根據 所需要的類型來準確選擇,

Json源數據,直接從option中複製過來就可以了,
模板 及 數據個數, 會根據 json源數據自動識別匹配。

 

到此,模板配置結束

*********************模板配置結束*************************

 

 

*********************數據源配置*************************

數據源配置簡單,在菜單中,

在報表定義中,寫一個 sql ,查詢到所需的數據源,並保存sql,在數據導出菜單中,能看到,並確保能查詢到數據,就可以了。

*********************數據源配置 完成*************************

 

*********************具體圖表生成*************************

1、新建並設置 必填字段。

在綜合查詢界面,選擇添加圖表,並選擇需要添加的圖表模板模板剛纔已經創建。

添加完成後,點擊必填信息按鈕,彈出必填信息輸入界面。這個界面,就是剛纔保存option時,新建的 bingTempl.jsp

 

 

2、設置,數據映射。

當前餅圖,所需數據有兩種,數組,和 json 。

點擊數據映射按鈕,如圖下:

再點擊,增加映射按鈕,如圖下。

 

其中

Json 數據源,可供選擇的是,當前圖表模板 的所有 所需數據源。

我選擇 data 數據爲json 的數據。

需要設置,當前映射是 映射的,第幾個數據。 因爲,這個 json 數據中,有兩個數據,每個數據,都需要設置映射,我這裏設置,映射第二個數據。

設置映射第二個數據   2

報表選擇,需要選擇,當前字段的數據,是從哪個報表查詢 出來的。

選擇產品查詢報表。

當前報表的哪個字段來映射,就是,需要 使用 查詢 的那個字段,來 填充 當前 映射的數據。

字段選擇number

全部映射配置完成後,如圖下:

 

然後,點擊,生成圖表按鈕,就可以,查詢 產品表數據,根據 餅圖模板,來 生成 需要的 圖表了。如圖下。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章