2. 程式人生 > >ECharts製作報表模板

ECharts製作報表模板

阿新 • • 發佈：2019-02-17

【背景】

    最近公司的問題彙總平臺差不多接近尾聲，回顧前段時間領導任命做的報表真是別有一番成長波折；在這之前以為問題彙總平臺就差不多完結了，結果原來壓軸的在後面呢，報表的設計涵蓋了本平臺80%的核心內容，既然這麼重要就更得放上十足的精神幹了O(∩_∩)O~

【簡介】

    報表的實現使用的是ECharts：百度開源的純 Javascript 圖表庫
    使用方法:百度搜素ECharts,進入它的官網,有對應的文件以及例項,直接選擇自己相應的例項,貼上到你的程式碼中,按照它需要的資料結構將資料傳遞過去,就會出現你想要的優美報表。

【規劃】

    做程式猿不可能當一輩子程式碼搬運工，基於這樣的思想指導，面對領導安排的活兒，我們並沒有將自己侷限到最終實現報表的層次，而是深入業務，融入公司需求，站到各種角色的角度來考慮報表的設計、報表將要反應的問題、呈現的趨勢，對於戰略決策者能夠提供一個怎樣的資料支撐。
    使用何種工具進行報表的實現也屬於我們考慮的範疇，如何才能夠做到高效、優質的開發是我們方向，給客戶呈現出製作人員的核心思考以及達到的實際高價值是我們的終極目標。
    有了這樣的整體思路下面就是我們的部分實現效果圖O(∩_∩)O~

【效果】

【例項】

    一、html程式碼

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
    <!--整體div-->
    <div id="zhengti"  style="width:900px;margin: 0 auto;margin-bottom: 10px;margin-top: 40px;">
         
         <!--圖形div visible="false"-->
         <div  id="main"  style="width:800px;height:450px; float:left; display:inline; margin-bottom:30px;"></div>
        <br />
         <!--列表div-->
         <div id="editor-grid" style=" border-top:none; width:800px;height:300px;"></div>

    </div> 
-</span>

    二、js程式碼

<span style="font-family:KaiTi_GB2312;font-size:18px;">-

         //頁面重新整理的方法載入
         $(document).ready(function () {
             //獲取隱藏控制元件中的值
             var rejctphenomenontypename = "";

             //準備資料
             var json;
             $.ajax({
                 url: '../ashx/chartashx/reject_belongs_system_charts.ashx?cmd=cmd&rejctphenomenontypename=' + rejctphenomenontypename,
                 type: 'post',
                 dataType: 'json',
                 async: false,
                 success: function (data) {
                     json = data;
                 }, error: function (data) {
                     alert("載入失敗，請聯絡管理員！");
                 }
             });
             loadcharts(json);
             loadList(json);
             document.title = "問題彙總";
         });

         //展示圖示function
         function loadcharts(json) {

             //圖表展示
             var myChart1 = echarts.init(document.getElementById('main'));

             option = {

                 //圖表標題  
                 title: {

                     text: "子系統不合格品問題統計", //正標題  

                     x: "center", //標題水平方向位置  
                     //正標題樣式  
                     textStyle: {
                         fontSize: 20
                     },
                     //副標題樣式  
                     subtextStyle: {
                         fontSize: 12,
                         color: "red"
                     }
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: {            // 座標軸指示器，座標軸觸發有效
                         type: 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
                     }
                 },

                 //工具箱配置  
                 toolbox: {
                     show: true,
                     feature: {
                         mark: { show: true }, // 輔助線標誌，上圖icon左數1/2/3，分別是啟用，刪除上一條，刪除全部  
                         dataView: { show: true, readOnly: false },// 資料檢視，上圖icon左數8，開啟資料檢視  
                         magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },// 圖表型別切換，當前僅支援直角系下的折線圖、柱狀圖轉換，上圖icon左數6/7，分別是切換折線圖，切換柱形圖  
                         restore: { show: true }, // 還原，復位原始圖表，上圖icon左數9，還原  
                         saveAsImage: { show: true } // 儲存為圖片，上圖icon左數10，儲存  
                     }
                 },

                 //圖例內容以及位置
                 legend: {
                     //載入圖例內容，這裡json.a是對應的陣列元素
                     data: json.tuli,
                     y: "bottom"

                 },
                 grid: {
                     left: '0%',
                     right: '0%',
                     bottom: '20%',
                     containLabel: true
                 },
                 //x軸的資料
                 xAxis: [
                     {
                         axisLabel: {
                             rotate: 60,
                             interval: 0
                         },
                         type: 'category',
                         //載入x軸的資料，這裡
                         //data: ['部門1', '部門2', '部門3', '部門4'],
                         data: json.xzhou,
                         name: "部門"

                     }
                 ],
                 //y軸的資料
                 yAxis: [
                     {
                         type: 'value',
                         name: "數值"
                     }
                 ],
                 //圖中的資料，這裡是通過匹配的來的！
                 series: json.tushuju
             };


             //將配置好的圖載入到div中
             myChart1.setOption(option);

             //單擊穿透
             myChart1.on('click', function (param) {
                
                 var rejectbelongssystemname = param.name;
                 //window.open("reject_phenomenon_type_charts.aspx?rejectbelongssystemname=" + rejectbelongssystemname);
                 window.open("reject_phenomenon_type_charts1.aspx?rejectbelongssystemname=" + rejectbelongssystemname, 'newwindow', 'height=672,width=1182,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no, location=no,status=no')
             });

         }

         //載入列表function
         function loadList(json) {
             var columns = [json.listbiaotou];

             //gridData屬性
             InitGrid = {
                 //nowrap: true,
                 //autoRowHeight: true,
                 striped: true,
                 singleSelect: true,
                 // url: Init.url + '&cmd=list',
                 //data: [{ "Id": 1, "region": "8號線", "SR": 100, "ST": 80 }, { "Id": 2, "region": " 北京亦莊線", "SR": 40, "ST": 80 }, { "Id": 3, "region": " 重慶3號線", "SR": 30, "ST": 80 }, { "Id": 4, "region": " 成都3號線", "SR": 10, "ST": 80 }, { "Id": 5, "region": " 大連線", "SR": 10, "ST": 80 }],
                 data: json.listshuju,
                 fitColumns: true,
                 idField: 'Id',
                 pagination: true,
                 rownumbers: true,
                 pageSize: 10,
                 pageList: [5, 10, 15, 20, 50, 80, 200],
                 //toolbar: toolbar,
                 columns: columns,
                 // fit: true,
                 //border: true
             }

             //建立資料表格
             dataGrid = $("#editor-grid").datagrid(InitGrid);

         }
-</span>

    三、一般處理程式程式碼

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
#region 3、子系統不合格品問題統計-馬康-2016年9月28日17:16:23
        /// <summary>
        /// 3、子系統不合格品問題統計-馬康-2016年9月28日17:16:23
        /// </summary>
        /// <returns></returns>
        private string queryList(string rejctphenomenontypename)
        {

            //例項化BLL層
            ProblemSpotBLL problemspotbll = new ProblemSpotBLL();

            //查詢資料
            DataSet projectProblemList = problemspotbll.queryrejectbelongssystemList(rejctphenomenontypename);

            DataTable tables2 = new DataTable();
            tables2.Columns.Add("producttype", typeof(String));
            DataRow row = tables2.NewRow();
            row["producttype"] = "不合格品";
            tables2.Rows.Add(row);
            projectProblemList.Tables.Add(tables2);

            StringBuilder sb = new StringBuilder();
            String resultStr = "";
            if (projectProblemList.Tables.Count > 0)
            {
                //總括號
                sb.Append("{");
                #region 1、圖例項物件陣列
                //第一個圖例項物件陣列
                sb.Append("\"tuli\":[");
                for (int i = 0; i < projectProblemList.Tables[2].Rows.Count; i++)
                {
                    sb.Append("\"" + projectProblemList.Tables[2].Rows[i][0] + "\",");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("],");
                #endregion

                #region 2、x軸中的專案
                //第一個圖例項物件陣列
                sb.Append("\"xzhou\":[");
                for (int i = 0; i < projectProblemList.Tables[1].Rows.Count; i++)
                {
                    sb.Append("\"" + projectProblemList.Tables[1].Rows[i][0] + "\",");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("],");
                #endregion

                #region 3、圖中的資料
                //第一個圖例項物件陣列
                sb.Append("\"tushuju\":[");
                //最外層迴圈，迴圈專案
                for (int i = 0; i < projectProblemList.Tables[2].Rows.Count; i++)
                {
                    sb.Append("{");
                    sb.Append("\"name\":\"" + projectProblemList.Tables[2].Rows[i][0] + "\",");
                    sb.Append("\"type\":\"bar\",");
                    sb.Append("\"data\":[");
                    //定義一個臨時陣列，來儲存下面要獲得的資料
                    int[] arraylist = new int[projectProblemList.Tables[1].Rows.Count];
                    //根據專案匹配總資料中的值
                    for (int j = 0; j < projectProblemList.Tables[0].Rows.Count; j++)
                    {
                        //如果有相等的值，則進入迴圈部門(這裡肯定會至少有一個專案名稱與之匹配，因為專案名稱是根據這個datatable去重篩選出來的)
                        string adsf = projectProblemList.Tables[0].Rows[j][1].ToString();
                        string asdfasdf = projectProblemList.Tables[2].Rows[i][0].ToString();
                        if (projectProblemList.Tables[0].Rows[j][1].ToString() == projectProblemList.Tables[2].Rows[i][0].ToString())
                        {

                            //通過迴圈產品，向陣列中加入內容
                            for (int k = 0; k < projectProblemList.Tables[1].Rows.Count; k++)
                            {
                                if (projectProblemList.Tables[1].Rows[k][0].ToString() == projectProblemList.Tables[0].Rows[j][0].ToString())
                                {
                                    arraylist[k] = (int)projectProblemList.Tables[0].Rows[j][2];
                                }

                            }
                        }

                    }
                    //迴圈將陣列拼接到字串中
                    for (int k = 0; k < arraylist.Length; k++)
                    {
                        sb.Append("\"" + arraylist[k] + "\",");
                    }
                    sb.Remove(sb.Length - 1, 1);
                    sb.Append("]");
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("],");

                #endregion

                #region 4、列表中的表頭
                double kuandu = (800 - 30) / (projectProblemList.Tables[1].Rows.Count + 1) - 3;
                //第一個圖例項物件陣列
                sb.Append("\"listbiaotou\":[");
                sb.Append("{");
                sb.Append("\"field\":\"id\",");
                sb.Append("\"hidden\":\"true\"");
                sb.Append("},");
                sb.Append("{");
                sb.Append("\"field\":\"region\",");
                sb.Append("\"title\":\"專案\",");
                sb.Append("\"align\":\"center\",");
                sb.Append("\"width\":\"" + kuandu + "\"");
                sb.Append("},");

                for (int i = 0; i < projectProblemList.Tables[1].Rows.Count; i++)
                {
                    sb.Append("{");
                    sb.Append("\"field\":\"" + projectProblemList.Tables[1].Rows[i][0] + "\",");
                    sb.Append("\"title\":\"" + projectProblemList.Tables[1].Rows[i][0] + "\",");
                    sb.Append("\"align\":\"center\",");
                    sb.Append("\"width\":\"" + kuandu + "\"");
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("],");
                #endregion

                #region 5、列表中的資料
                //第一個圖例項物件陣列
                sb.Append("\"listshuju\":[");
                //最外層迴圈，迴圈專案
                for (int i = 0; i < projectProblemList.Tables[2].Rows.Count; i++)
                {
                    sb.Append("{");
                    sb.Append("\"id\":\"" + i + "\",");
                    sb.Append("\"region\":\"" + projectProblemList.Tables[2].Rows[i][0] + "\",");
                    //定義一個臨時陣列，來儲存下面要獲得的資料
                    int[] arraylist = new int[projectProblemList.Tables[1].Rows.Count];
                    //根據專案匹配總資料中的值
                    for (int j = 0; j < projectProblemList.Tables[0].Rows.Count; j++)
                    {
                        //如果有相等的值，則進入迴圈部門(這裡肯定會至少有一個專案名稱與之匹配，因為專案名稱是根據這個datatable去重篩選出來的)
                        string adsf = projectProblemList.Tables[0].Rows[j][1].ToString();
                        string asdfasdf = projectProblemList.Tables[2].Rows[i][0].ToString();
                        if (projectProblemList.Tables[0].Rows[j][1].ToString() == projectProblemList.Tables[2].Rows[i][0].ToString())
                        {

                            //通過迴圈部門，向陣列中加入內容
                            for (int k = 0; k < projectProblemList.Tables[1].Rows.Count; k++)
                            {
                                if (projectProblemList.Tables[1].Rows[k][0].ToString() == projectProblemList.Tables[0].Rows[j][0].ToString())
                                {

                                    arraylist[k] = (int)projectProblemList.Tables[0].Rows[j][2];
                                }

                            }
                        }

                    }
                    //迴圈將陣列拼接到字串中
                    for (int k = 0; k < projectProblemList.Tables[1].Rows.Count; k++)
                    {
                        sb.Append("\"" + projectProblemList.Tables[1].Rows[k][0] + "\":\"" + arraylist[k] + "\",");
                    }
                    sb.Remove(sb.Length - 1, 1);
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("]");

                #endregion

                //最後的括號！
                sb.Append("}");

                resultStr = sb.ToString();
            }
        
                      
            return resultStr;
        }
        #endregion
-</span>

    四、BLL層程式碼

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
#region 最終報表3、子系統不合格品問題統計-馬康-2016年9月28日17:16:23
        /// <summary>
        /// 最終報表3、子系統不合格品問題統計-馬康-2016年9月28日17:16:23
        /// </summary>
        /// <returns></returns>
        public DataSet queryrejectbelongssystemList(string rejctphenomenontypename)
        {
            return dal.GetrejectbelongssystemList(rejctphenomenontypename);
        }
        #endregion 
-</span>

    五、DAL層程式碼

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
 #region 最終報表3、子系統不合格品問題統計-馬康-2016年9月28日17:16:23
        /// <summary>
        /// 3、子系統不合格品問題統計-馬康-2016年9月28日17:16:23
        /// </summary>
        /// <returns></returns>
        public DataSet GetrejectbelongssystemList(string rejctphenomenontypename)
        {
            StringBuilder builder = new StringBuilder();
            if (rejctphenomenontypename =="")
            {
                //總資料
                builder.Append(" SELECT sELECT3,replace(IsActive,'1','不合格品'),COUNT(sELECT3) num FROM Pts_Problems WHERE	ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250) AND Select3 IN ('VOBC子系統','DCS子系統','ATS子系統','MSS子系統','CI子系統','ZC/DSU子系統')  GROUP BY sELECT3,IsActive ");

                //所屬系統個數
                builder.Append("   SELECT DISTINCT(sELECT3) FROM Pts_Problems WHERE	ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250) AND Select3 IN ('VOBC子系統','DCS子系統','ATS子系統','MSS子系統','CI子系統','ZC/DSU子系統')  GROUP BY sELECT3  ");

            }
            else
            {
                //總資料
                builder.Append(" SELECT sELECT3,replace(IsActive,'1','不合格品'),COUNT(sELECT3) num FROM Pts_Problems WHERE	ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250)  and MultiSelect1 = '" + rejctphenomenontypename + ";' AND Select3 IN ('VOBC子系統','DCS子系統','ATS子系統','MSS子系統','CI子系統','ZC/DSU子系統')  GROUP BY sELECT3,IsActive ");

                //所屬系統個數
                builder.Append("   SELECT DISTINCT(sELECT3) FROM Pts_Problems WHERE	ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250) AND Select3 IN ('VOBC子系統','DCS子系統','ATS子系統','MSS子系統','CI子系統','ZC/DSU子系統')  GROUP BY sELECT3  ");

            }
          
            return SqlHelper.ExecuteDataset(sqlConnstring, CommandType.Text, builder.ToString());
        }
-</span>

【總結】

    ECharts只用了簡單常用的幾個圖示樣式以及其中常用的屬性，如需有其它方面的需求，可以查閱ECharts對應的文件教程。
    因為需要好多報表考慮到開發效率以及後面的維護，所以小編經過思考，將其中的資料部分分為了三大塊內容：
    1、圖例  2、X周內容  3、圖例和x周對應的資料內容
    這樣一來，就可以在套用整個一條線所有的內容，只按照資料返回的形式重新寫一些DAL層就可以了。

【感受】

    環境不同，所能夠達到的層次與對自己磨練的層面也不同，無論如何，將能夠磨練自己的機會抓住，努力放大，爭取在物慾橫流的現實社會中不斷的提升自己，不斷增加自己的加速度。
    每一份經歷都伴隨著不同程度的成長，它都將是我們最深刻、最美好的回憶，它也終將是我們在未來馳騁沙場的武器，所以少年需奮起，少年需進取O(∩_∩)O~

相關推薦

ECharts製作報表模板

【背景】     最近公司的問題彙總平臺差不多接近尾聲，回顧前段時間領導任命做的報表真是別有一番成長波折；在這之前以為問題彙總平臺就差不多完結了，結果原來壓軸的在後面呢，報表的設計涵蓋了本平臺80%的核心內容，既然這麼重要就更得放上十足的精神幹了O(∩_∩)O~ 【簡介】

IIS6/7/8 WEBserver不能訪問grf報表模板文件的問題

其它 mime family name file grid 文件類型 通過 ati 通過 IE不能訪問到 .grf 報表文件，這是由於 IIS6/7/8對訪問的擴展名做了限制，除了已經定義的擴展名之外。其它的擴展名都不能訪問。這跟 IIS5 不一樣，IIS5

Echarts 簡單報表系列二：折線圖

pic mage ems utf value ott fun nbsp return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

報表模板 — 在項目管理中應用數據報表分析

結構 學校 表設計 整體 資源 模板 font padding https 項目管理是在項目活動中運用專門的知識、技能、工具和方法，使項目能在有限資源下，實現或超過設定的需求和期望的過程，是對成功地達成一系列目標相關的活動的整體監測和管控。無論是在大型工程、軟件開發、系統制

用Echarts製作動態條形圖排行榜

最近在做各種排行榜的視訊，整體排行榜的頁面圖形效果都是用另外一個開原始碼實現的，主體是js+svg。 https://www.bilibili.com/video/av28871057/ echarts作為封裝很好的一套視覺化庫，不知道是否能做到相同的事情呢？ 生產條形圖 最開始

DEVexpress控制元件使用 ASPxGridView 製作報表帶子表的 備忘

利用ASPxGridView製作報表                 <dx:ASPxGridView ID="grdProductivity

FineReport 報表模板生成+匯出Excel表格

看官方的文件糾結了一天，好東西，這個怎麼下手，但是還是想總結一下。 FineReport報表技術，給我的感覺跟IReport報表的思路差不多，所以我就抱著這種試試的心態去嘗試，在我搜集資料加看官方文件之後，覺得更像了！！！ FineReport報表軟體是一款純java編寫的，集資料展示（報表

Echarts製作動態K線圖和分時圖

1 K線圖 <!DOCTYPE html> <html lang="en"> <#include "../header.ftl"> <body> <#include "../nav.ftl"> <div class=

C++介面庫：使用Graphic Element Template製作按鈕模板

    這一次製作的按鈕模板具有通過模板屬性動態配置圖形的功能。模板的屬性一共有6個：x、y、w、h、state、content，其中state有normal、hot和press三個取值。XML、程式碼和截圖如下：    下面的模板檔案有兩個模板，分別是background和button。back

使用idea製作報表

簡單的說報表就是用表格、圖表等格式來動態顯示資料，可以用公式表示為： “報表 = 多樣的格式 + 動態的資料”。 首先我們先下載報表的一些模板供我們使用,自行上百度搜索Highcharts-6.1.4 1.解壓：我們會發現是這樣的 2.點選examples尋找我們需要的報表模板，找到之後，把

使用百度echarts製作視覺化大屏——加入地圖

var geoCoordMap = {    '上海': [121.4648,31.2891],    '東莞': [113.8953,22.901],    '東營': [118.7073,37.5513],    '中山': [113.4229,22.478],    '臨汾': [111.4783,36

echarts 製作折線統計圖

app.title = '多 X 軸示例'; var colors = ['#5793f3', '#d14a61', '#675bba']; option = { color: colors, tooltip: { trigger: 'n

在Java web頁面使用ECharts製作圖表

// 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main'));

vs 2010 中使用ReportViewer製作報表

 vs 2010 中使用 ReportViewer 製作報表 1、新建一個Default.aspx檔案，從工具箱 - 報表 中把 reportviewer 控制元件拖到頁面上。 2、從reportviewer控制元件的三角中選擇設計新報表，然後就出來一個 report1.r

使用百度echarts製作視覺化大屏

$(document).ready(function (){//環形進度條設定物件option_Progress={title : {text: '目前進度',subtext: '50%',x: 'center',y: 90,itemGap: 10,textStyle : {color : '#B7E1FF'

利用Echarts製作地圖（一）

Echarts作為一個前端視覺化工具，支援地圖圖表的展示。從本篇開始，將用三篇文章說明如何利用echats製作自定義區域的單圖例、多圖例及動態載入地圖所需資料。 Echarts支援 js 格式 與 geoJson格式的地圖。並且其官網提供了全國及省市自治區的地圖檔案可供下載

使用ireport生成jasperreport報表模板

下載jasperreports-5.5.1-project.zip和iReport-5.5.0-windows-installer.exe即可。       注意：使用ireport新增chart元件時，一定不要新增到Detail區，否則會出現多個重複圖片的問題 3、生

微信小程式中使用ECharts實現報表圖表展示

getData() { wx.showLoading({ title: '載入中...', }); let that = this; util.request(傳送ajax請求).then(function (res) { if (res.errno === 0)

使用Freemarker生成Word文件並在文件內新增Echarts圖形報表或迴圈新增表格、圖片資料

一、製作.ftl字尾的word模板檔案 1、新建一個word文件模板          使用其他文字編輯器編寫表示式，如：Editplus    2、將word文件另存為xml並改名為.ftl字尾的檔案 另存完之後關閉word文件，將demo.xml的字尾修改

使用百度echarts製作視覺化大屏——製作一個雙層餅圖

實現一個兩層巢狀的環形圖，展示三個分類下各個品牌車輛的市場貢獻度。先看一下最終效果。主要程式碼如下：//產品餅圖元件和屬性var productPie=null;var productPie_option=null;$(document).ready(function (){