在系統後臺,不少地方都須要以直觀的方式呈現相關統計數據,然而老是從查詢語句、接口、頁面到圖表的過程,繁瑣費時。對於簡單的統計需求,指望創建合適的模型,簡化這個過程,並使得整個過程聚焦數據自己,快捷而簡單,併爲整個過程的配置化提供可能。javascript
這裏只討論簡單的統計需求。
要素一:標題 和 統計數據
要素二:圖表類型(餅圖、柱狀圖、線圖)css
統計數據的標籤與值屬性名老是使用 name、value,更多維度時也老是先進行約定後再使用。java
給定一個名字或是編號,獲得相關數據,指定圖表類型呈現。
具體描述:
(1)可配置數據語句、圖表標題及指定一個編號
(2)提供一個接口經過指定編號可取得數據
(3)指定圖表類型,將數據應用到該圖表(進一步完善可直接配置生成圖表頁)jquery
create table t_chart_data( id int primary key, code varchar(40) not null, -- 編號 chart_title varchar(80) not null, -- 圖表標題 query varchar(2000), -- 數據查詢語句 note varchar(200), -- 備註 status bool -- 狀態 ); -- code 設置惟一索引 create unique index uidx_chart_data_code on t_chart_data(code); create sequence seq_chart_data_id;
提供經過編號取得數據的接口方法。這裏插入一條數據用於測試。git
INSERT INTO t_chart_data(id, code, chart_title, query, note, status) VALUES (1, 'test', '測試圖表', 'select ''name'' as name, 1 as value', null, true);
如下爲 c# 實現的一個根據 code 讀取並造成接口數據的簡單實現。github
public static JObject GetChartData(string code) { JObject result = new JObject(); string sql = "select chart_title, query from t_chart_data where code=@code"; var dt = PostgreSQLHelper.ExecuteQuery(ServiceTableHelper.QryHelper.ConnectString, CommandType.Text, sql, new NpgsqlParameter("code", code)).Tables[0]; if (dt.Rows.Count == 0) { result["err_code"] = 101; result["err_msg"] = "未找到相關配置!"; return result; } string chartTitle = dt.Rows[0]["chart_title"] as string; string query = dt.Rows[0]["query"] as string; // 如下數據查詢能夠帶上環境參數實現不一樣上下文不一樣查詢結果 try { var data = PostgreSQLHelper.ExecuteQuery(ServiceTableHelper.QryHelper.ConnectString, CommandType.Text, query).Tables[0]; result["err_code"] = 200; result["err_msg"] = "success"; result["chart_title"] = chartTitle; result["data"] = JArray.Parse(JsonConvert.SerializeObject(data)); return result; } catch(Exception e) { result["err_code"] = 101; result["err_msg"] = e.Message; return result; } }
如,傳參 code=test,將獲得如下結果:sql
{ "err_code": 200, "err_msg": "success", "chart_title": "測試圖表", "data": [ { "name": "name", "value": 1 } ] }
期待效果:在指定位置,以指定圖表呈現數據。經過封裝 echarts 造成工具接口類。
如 EchartsTool.bar("elementId", data);
形式,封裝中會默認一種樣式。
一個簡單的封裝版本可在這裏找到:
https://github.com/triplestudio/helloworld/blob/master/echarts-tool.jsc#
引入相關 jsapi
<script src="jquery-1.10.2.min.js" type="text/javascript"></script> <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script> <script src="echarts-tool.js"></script>
能夠使用如下方式加載數據,並呈現,以下爲柱狀與餅圖示例。echarts
$(function(){ $.post("api/chartdata.aspx", { code: "test" }, function (resp) { $("#userStatTitle").text(resp.chart_title); EchartsTool.bar("userStat", resp.data); }); $.post("api/chartdata.aspx", { code: "test" }, function (resp) { $("#demo2Title").text(resp.chart_title); EchartsTool.pie("demo2", resp.data); }); });
執行效果以下圖: