快捷简易统计图表模型设计与实现

 

 

1. 目的

在系统后台，很多地方都需要以直观的方式呈现相关统计数据，然而总是从查询语句、接口、页面到图表的过程，繁琐费时。对于简单的统计需求，期望建立合适的模型，简化这个过程，并使得整个过程聚焦数据本身，快捷而简单，并为整个过程的配置化提供可能。

2. 图表要素

这里只讨论简单的统计需求。
要素一：标题 和 统计数据
要素二：图表类型（饼图、柱状图、线图）

3. 约定

统计数据的标签与值属性名总是使用 name、value，更多维度时也总是先进行约定后再使用。

4. 期待效果

给定一个名字或是编号，得到相关数据，指定图表类型呈现。
具体描述：
（1）可配置数据语句、图表标题及指定一个编号
（2）提供一个接口通过指定编号可取得数据
（3）指定图表类型，将数据应用到该图表（进一步完善可直接配置生成图表页）

5. 数据的模型设计

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;

6. 数据接口

提供通过编号取得数据的接口方法。这里插入一条数据用于测试。

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 读取并形成接口数据的简单实现。

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，将得到以下结果：

{
  "err_code": 200,
  "err_msg": "success",
  "chart_title": "测试图表",
  "data": [
    {
      "name": "name",
      "value": 1
    }
  ]
}

7. 简易图表接口

期待效果：在指定位置，以指定图表呈现数据。通过封装 echarts 形成工具接口类。
如 EchartsTool.bar("elementId", data); 形式，封装中会默认一种样式。
一个简单的封装版本可在这里找到：
https://github.com/triplestudio/helloworld/blob/master/echarts-tool.js

8. 实际应用

引入相关 js

<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>

可以使用以下方式加载数据，并呈现，如下为柱状与饼图示例。

 

 

 

 

更多干货 点击这里

$(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);
    });
});