asp.net使用echarts展示圖表資料
阿新 • • 發佈：2019-01-18
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartDemo.aspx.cs" Inherits="AT.Web.Demo.EchartDemo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Echart圖表示例</title> <script src="../Themes/Scripts/jquery-1.8.2.min.js"></script> <link href="../Themes/Styles/Site.css" rel="stylesheet" type="text/css" /> <script src="../Themes/Scripts/FunctionJS.js" type="text/javascript"></script> <script type="text/javascript"> //初始化 $(function () { $('#table2').hide(); }) //點選切換面板 var IsFixedTableLoad = 1; function panel(obj) { if (obj == 1) { $('#table1').show(); $('#table2').hide(); } else if (obj == 2) { $('#table1').hide(); $("#table2").show(); } } </script> </head> <body> <form id="form1" runat="server"> <div class="frmtop"> <table style="padding: 0px; margin: 0px; height: 100%;" cellpadding="0" cellspacing="0"> <tr> <td id="menutab" style="vertical-align: bottom;"> <div id="tab0" class="Tabsel" onclick="GetTabClick(this);panel(1)"> 能耗動態 </div> <div id="tab1" class="Tabremovesel" onclick="GetTabClick(this);panel(2);"> 填報動態 </div> </td> </tr> </table> </div> <div class="div-frm" style="height: 275px;"> <%--能耗動態--%> <div id="table1"> <div id="divEnergy" style="width: 610px; height: 220px;"></div> </div> <%--填報動態--%> <div id="table2"> <div id="divReport" style="width: 750px; height: 250px;"></div> </div> </div> </form> </body> </html> <script src="../Themes/Scripts/echarts/echarts.js"></script> <script src="../Themes/Scripts/echarts/theme/macarons.js"></script> <script type="text/javascript"> var cityClick = ''; function GetUnitEnergy(unitName) { GetCityEnergy(unitName, 2); } require.config({ paths: { echarts: '../Themes/Scripts/echarts' } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie', 'echarts/chart/funnel' ], DrawEChart //非同步載入的回撥函式繪製圖表 ); var myEnergyChart; var myReportChart; //建立ECharts圖表方法 function DrawEChart(ec) { //--- 折柱 --- myEnergyChart = ec.init(document.getElementById('divEnergy'), macarons); //定義圖表options var options = { title: { text: "", subtext: "" }, /*color: ['#0099FF', '#00CC00', '#008080', '#CC6600', '#CC00CC', '#0033CC','#003300', '#FF0000'],*/ tooltip: { trigger: 'axis' }, legend: { data: [" "] }, toolbox: { show: true, feature: { mark: { show: false }, dataView: { show: false, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: false } } }, grid: { x: 60, y: 30, x2: 5, y2: 30 }, calculable: true, xAxis: [ { type: 'category', data: [" "] } ], yAxis: [ { type: 'value', axisLabel: { fomatter: "." }, splitArea: { show: true } } ], series: [{ name: " ", type: "line", data: [0] }] }; //選擇一個空圖表 myEnergyChart.setOption(options); myReportChart = ec.init(document.getElementById('divReport'), macarons); //選擇一個空圖表 myReportChart.setOption(options); // 預設載入填報 GetReport("1"); // 預設載入省直 GetUnitEnergy('34'); } ///點選按鈕獲取圖表資料採用ajax方式 function GetCityEnergy(cityCode, level) { //獲得圖表的options物件 var options = myEnergyChart.getOption(); //通過Ajax獲取資料 $.ajax({ type: "post", async: false, //同步執行 url: "GetChartData.aspx?type=energyData", dataType: "json", //返回資料形式為json success: function (result) { if (result) { //將返回的category和series物件賦值給options物件內的category和series //因為xAxis是一個數組 這裡需要是xAxis[i]的形式 options.xAxis[0].data = result.category; options.series = result.series; options.legend.data = result.legend; myEnergyChart.setOption(options); myEnergyChart.refresh(); } }, error: function (errorMsg) { alert("圖表資料載入失敗！"); } }); } ///點選按鈕獲取圖表資料採用ajax方式 function GetReport(code) { //獲得圖表的options物件 var options = myReportChart.getOption(); //通過Ajax獲取資料 $.ajax({ type: "post", async: false, //同步執行 url: "GetChartData.aspx?type=reportData", dataType: "json", //返回資料形式為json success: function (result) { if (result) { //將返回的category和series物件賦值給options物件內的category和series //因為xAxis是一個數組 這裡需要是xAxis[i]的形式 //myReportChart.clear(); options.xAxis[0].data = result.category; options.series = result.series; options.legend.data = result.legend; myReportChart.setOption(options); } }, error: function (errorMsg) { alert("圖表資料載入失敗！"); } }); } //初始載入圖表資料 $(function () { GetCityEnergy("", ""); GetUnitEnergy(""); }); </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace AT.Web.Demo { public partial class EchartDemo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } }
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetChartData.aspx.cs" Inherits="AT.Web.Demo.GetChartData" %>
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace AT.Web.Demo { public partial class GetChartData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string type = Request["type"]; if (!string.IsNullOrEmpty(type)) { switch (type) { case "energyData": GetEnergyDataAjaxData("", ""); break; case "reportData": GetReportDataAjaxData(""); break; } } } /// <summary> /// 獲得資料且用Json格式資料返回 /// </summary> private void GetEnergyDataAjaxData(string level, string code) { //考慮到圖表的category是字串陣列 這裡定義一個string的List List<string> categoryList = new List<string>(); //考慮到圖表的series資料為一個物件陣列 這裡額外定義一個series的類 List<Series> seriesList = new List<Series>(); //考慮到Echarts圖表需要設定legend內的data陣列為series的name集合這裡需要定義一個legend陣列 List<string> legendList = new List<string>(); DataTable dt = null; using (SqlConnection con = new SqlConnection("Data Source=.;User ID=sa;Password=111111;Database=AT_DB;")) { string strSQL = "select top 12 * from T_EchartData1"; using (SqlDataAdapter adapter = new SqlDataAdapter(strSQL, con)) { DataSet ds = new DataSet(); adapter.Fill(ds); dt = ds.Tables[0]; } } //Response.Write(dt.Rows.Count+"條資料！"); //設定legend陣列 legendList.Add("今年能耗"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("去年能耗"); //這裡的名稱必須和series的每一組series的name保持一致 Series thisSeriesObj = new Series(); thisSeriesObj.id = 0; thisSeriesObj.name = "今年能耗"; thisSeriesObj.type = "line"; //線性圖呈現 thisSeriesObj.data = new List<object>(); thisSeriesObj.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } }; Series lastSeriesObj = new Series(); lastSeriesObj.id = 1; lastSeriesObj.name = "去年能耗"; lastSeriesObj.type = "line"; //線性圖呈現 lastSeriesObj.data = new List<object>(); lastSeriesObj.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } }; foreach (DataRow dr in dt.Rows) { categoryList.Add(dr[0].ToString() + "月"); thisSeriesObj.data.Add(dr[1]); lastSeriesObj.data.Add(dr[2]); } //將sereis物件壓入sereis陣列列表內 seriesList.Add(thisSeriesObj); seriesList.Add(lastSeriesObj); //最後呼叫相關函式將List轉換為Json //因為我們需要返回category和series、legend多個物件 這裡我們自己在new一個新的物件來封裝這兩個物件 var newObj = new { category = categoryList, series = seriesList, legend = legendList }; //Response返回新物件的json資料 Response.Write(JsonConvert.SerializeObject(newObj, Formatting.None)); Response.End(); } /// <summary> /// 獲得資料且用Json格式資料返回 /// </summary> private void GetReportDataAjaxData(string code) { //考慮到圖表的category是字串陣列 這裡定義一個string的List List<string> categoryList = new List<string>(); //考慮到圖表的series資料為一個物件陣列 這裡額外定義一個series的類 List<Series> seriesList = new List<Series>(); //考慮到Echarts圖表需要設定legend內的data陣列為series的name集合這裡需要定義一個legend陣列 List<string> legendList = new List<string>(); DataTable dt = null; using (SqlConnection con = new SqlConnection("Data Source=.;User ID=sa;Password=111111;Database=AT_DB;")) { string strSQL = "select * from T_EchartData2"; using (SqlDataAdapter adapter = new SqlDataAdapter(strSQL, con)) { DataSet ds = new DataSet(); adapter.Fill(ds); dt = ds.Tables[0]; } } //Response.Write(dt.Rows.Count + "條資料！"); //設定legend陣列 legendList.Add("電"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("水"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("燃煤"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("天然氣"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("汽油"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("柴油"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("熱力"); //這裡的名稱必須和series的每一組series的name保持一致 legendList.Add("其他"); //這裡的名稱必須和series的每一組series的name保持一致 Series dianSeries = new Series(); dianSeries.id = 0; dianSeries.name = "電"; dianSeries.type = "line"; //線性圖呈現 dianSeries.data = new List<object>(); dianSeries.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } }; Series shuiSeries = new Series(); shuiSeries.id = 1; shuiSeries.name = "水"; shuiSeries.type = "line"; //線性圖呈現 shuiSeries.data = new List<object>(); shuiSeries.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } }; Series yuanmeiSeries = new Series(); yuanmeiSeries.id = 2; yuanmeiSeries.name = "燃煤"; yuanmeiSeries.type = "line"; //線性圖呈現 yuanmeiSeries.data = new List<object>(); yuanmeiSeries.itemStyle = new itemStyle { normal = new normal { color = "#008080" } }; Series tianranqiSeries = new Series(); tianranqiSeries.id = 3; tianranqiSeries.name = "天然氣"; tianranqiSeries.type = "line"; //線性圖呈現 tianranqiSeries.data = new List<object>(); tianranqiSeries.itemStyle = new itemStyle { normal = new normal { color = "#CC6600" } }; Series qiyouSeries = new Series(); qiyouSeries.id = 4; qiyouSeries.name = "汽油"; qiyouSeries.type = "line"; //線性圖呈現 qiyouSeries.data = new List<object>(); qiyouSeries.itemStyle = new itemStyle { normal = new normal { color = "#CC00CC" } }; Series chaiyouSeries = new Series(); chaiyouSeries.id = 5; chaiyouSeries.name = "柴油"; chaiyouSeries.type = "line"; //線性圖呈現 chaiyouSeries.data = new List<object>(); chaiyouSeries.itemStyle = new itemStyle { normal = new normal { color = "#0033CC" } }; Series reliSeries = new Series(); reliSeries.id = 6; reliSeries.name = "熱力"; reliSeries.type = "line"; //線性圖呈現 reliSeries.data = new List<object>(); reliSeries.itemStyle = new itemStyle { normal = new normal { color = "#003300" } }; Series qitaSeries = new Series(); qitaSeries.id = 7; qitaSeries.name = "其他"; qitaSeries.type = "line"; //線性圖呈現 qitaSeries.data = new List<object>(); qitaSeries.itemStyle = new itemStyle { normal = new normal { color = "#FF0000" } }; foreach (DataRow dr in dt.Rows) { categoryList.Add(string.Format("{0}年{1}月", dr["ReportYear"], dr["ReportMonth"])); dianSeries.data.Add(string.IsNullOrEmpty(dr["DIAN"].ToString()) ? 0 : dr["DIAN"]); shuiSeries.data.Add(string.IsNullOrEmpty(dr["SHUI"].ToString()) ? 0 : dr["SHUI"]); yuanmeiSeries.data.Add(string.IsNullOrEmpty(dr["YUANMEI"].ToString()) ? 0 : dr["YUANMEI"]); tianranqiSeries.data.Add(string.IsNullOrEmpty(dr["TIANRQ"].ToString()) ? 0 : dr["TIANRQ"]); qiyouSeries.data.Add(string.IsNullOrEmpty(dr["QIYOU"].ToString()) ? 0 : dr["QIYOU"]); chaiyouSeries.data.Add(string.IsNullOrEmpty(dr["CHAIYOU"].ToString()) ? 0 : dr["CHAIYOU"]); reliSeries.data.Add(string.IsNullOrEmpty(dr["RELI"].ToString()) ? 0 : dr["RELI"]); qitaSeries.data.Add(string.IsNullOrEmpty(dr["QTNY"].ToString()) ? 0 : dr["QTNY"]); } //將sereis物件壓入sereis陣列列表內 seriesList.Add(dianSeries); seriesList.Add(shuiSeries); seriesList.Add(yuanmeiSeries); seriesList.Add(tianranqiSeries); seriesList.Add(qiyouSeries); seriesList.Add(chaiyouSeries); seriesList.Add(reliSeries); seriesList.Add(qitaSeries); //最後呼叫相關函式將List轉換為Json //因為我們需要返回category和series、legend多個物件 這裡我們自己在new一個新的物件來封裝這兩個物件 var newObj = new { category = categoryList, series = seriesList, legend = legendList }; //Response返回新物件的json資料 Response.Write(JsonConvert.SerializeObject(newObj, Formatting.None)); Response.End(); } } /// <summary> /// 定義一個Series類 設定其每一組sereis的一些基本屬性 /// </summary> class Series { /// <summary> /// sereis序列組id /// </summary> public int id { get; set; } /// <summary> /// series序列組名稱 /// </summary> public string name { get; set; } /// <summary> /// series序列組呈現圖表型別(line、column、bar等) /// </summary> public string type { get; set; } /// <summary> /// series序列組的itemstyle /// </summary> public object itemStyle { get; set; } /// <summary> /// series序列組的資料為資料型別陣列 /// </summary> public List<object> data { get; set; } } class normal { /// <summary> /// color /// </summary> public string color { get; set; } } class itemStyle { /// <summary> /// normal /// </summary> public object normal { get; set; } } }
相關推薦
asp.net使用echarts展示圖表資料
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartDemo.aspx.cs" Inherits="AT.Web.Demo.EchartDemo" %> <!DOCTYPE htm
百度ECharts圖表展示動態資料
百度ECharts是個非常強大的圖表工具，引入百度提供的echarts.min.js檔案後，只需從後臺獲取資料便可以圖表的形式展示資料，能夠更直觀的檢視、比較、統計資料。 這裡以一個柱狀圖展示動態資料的小例子講解如何使用百度ECharts。 1.首先引入需要的js檔案： <
Echart實現從資料庫獲取資料展示圖表（結合Servlet和SSM實現的兩種例項）
2018年5月30日（UPDATE）: Google郵箱不怎麼上，建議Email [email protected]------------------------------
fastadmin和ECharts配合使用---用於統計1-12月份以圖表形式展示相關資料資訊
前端頁面展示 <div class="container" style="width:100%;"> <div class="row" style="border:1px solid #999999;background-colo
ASP.NET統計圖表控件
not reat chart 頁面 visible vba com sem nbsp 近來客戶需要將前段時間開發的統計信息用圖表展示出來，還要多個圖表類型，例如：柱狀圖、餅圖、曲線圖、三維圖等等。在網上google了一下，發現了三個（也許更多）可以使用的控件。下面我們一起看
ASP.NET Core 學習資料
release inf form 2.0 www tel www. href ogr 搭建 Windows 系統上的 .net core 開發環境： 1. 安裝 Visual Studio 2017 並安裝 .net core 2.0 framework 2. 成功後會提示
SqlServer 根據時間統計數據展示圖表
when ont lse weight edi ediff server -- created --本年 select m as [Date],sum(case when datepart(month,CreateDateTime)=m then 1 el
ASP.NET ADO.NET資料訪問技術(一使用Command物件的 增刪查改 )
使用Command物件進行資料庫操作 一、插入資料 //引用資料庫訪問名稱空間 using System.Data.SqlClient; using System.Configuration; string sqlconnstr = ConfigurationManager.Conne
ASP.NET ADO.NET資料訪問技術(二 使用DataAdapter物件的 增刪查改 )
一、DataAdapter相關介紹 使用DataAdapter物件查詢資料庫相當於 在客戶端建立一個數據庫分部（即DataSet），在總部查詢資訊後通過fill方法填充DataSet，然後我們操作資料庫時不需要去資料庫總部拿資料了，只需要去分部（DataSet）中取出資料即可 二、建
ASP.NET ADO.NET資料訪問技術(一使用Command物件執行)
【SQLConnection類】 常用方法： Open：開啟資料庫連線 Close：關閉資料庫連線 常用屬性： ConnectionString：設定開啟SQL Server資料庫的字串 State：判斷資料庫的連線狀態：Broken、Clos
listview展示網路資料+網路圖片+資料庫增刪改查+fragment
MainActivity package com.bwie.renzhili; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import andr
echarts renderItem自定義一些用法-在區間段內展示連續資料
一、需求背景： 貼圖說明：要求資料在不同型別的區間段內展示。 二、實現思路及程式碼 實現方法： 利用echarts的自定義配置：option.series[i].type='custom'中的renderItem(params, api)函
vue專案中使用Echarts 動態更改圖表資料 ， Vue 折線圖、柱狀圖等圖表動態重新整理 ，
問題：在vue元件中，用echarts外掛 動態獲取、修改圖表資料 解決：已解決！ 第一步：開啟cmd命令視窗 安裝echarts依賴 安裝：npm install echarts -S 第二步：在main.js中全域性引入 //引入echarts的圖表外掛
使用strut2連線後臺 從後臺獲取資料 展示所有資料
注意點: 重定向 增刪改 轉發 查 所需的部分重要程式碼 struts-sy.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Soft
ASP.NET中關於資料匹配和查詢的幾點研究（歡迎大神提供更精妙演算法）
相信下面這種情況在ASP.NET開發中會時常遇到：查詢DataTable_2中的某列資料是否全部出現在DataTable_1中，如果是，則提取部分資料，否則輸出提示。 如果是小資料量，任何的迴圈查詢都無所謂。如果大資料量，那就要講究方法了。本人糾結於這種匹配好久，弄了個測試程式。希望大神能夠
ASP.NET ADO.NET資料訪問技術(二 使用DataAdapter物件的 增刪查改 )
一、DataAdapter相關介紹 使用DataAdapter物件查詢資料庫相當於 在客戶端建立一個數據庫分部（即DataSet），在總部查詢資訊後通過fill方法填充DataSet，然後我們操作資料庫時不需要去資料庫總部拿資料了，只需要去分部（DataSet）
angular6 ngx-echarts 圖表資料更新
最近在用angular寫一個echarts圖表，初始化賦值資料可以展示，但是重新獲取資料以後，圖表不會重新整理。 後來發現了問題點所在， <div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($
ASP.NET MVC5 歷史資料查詢
在TCX_1706專案中在歷史資料庫備份及歷史資料查詢的功能，歷史資料包括歷史採集資料查詢和歷史產品資料查詢兩個 在專案中如何查詢歷史庫的歷史表呢？ 第一步：在配置檔案中新增歷史庫的連結字串 第二步：（控制器中無區別）在實現類中操作資料庫的方法進行修改，有原先的this.DbContext改為t
C#/ASP.NET Xml多級資料讀取
<Data> <Project> <Item Id="51351132-59a7-4c0b-909d-51b89b1c3159" IsDefault="1" Path="D:\TDDOWNLOAD\Source\Report1.App" /> &l
樹形結構展示指定資料夾下所有檔案和資料夾
1：匯入os包 import os 2：實現功能 <1>：使用os.walk(path)方法： def use_walk(path): for (root, dirs, files) in os.walk(path): """ ro