devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

asp.net使用echarts展示图表数据_echart c#

作者：花生_TL007 | 2024-02-19 12:33:16

赞

踩

echart c#

百度echarts开发插件包下载地址：http://download.csdn.net/detail/taomanman/8850699





  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartDemo.aspx.cs" Inherits="AT.Web.Demo.EchartDemo" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title>Echart图表示例</title>
  9.     <script src="../Themes/Scripts/jquery-1.8.2.min.js"></script>
  10.     <link href="../Themes/Styles/Site.css" rel="stylesheet" type="text/css" />
  11.     <script src="../Themes/Scripts/FunctionJS.js" type="text/javascript"></script>
  12.     <script type="text/javascript">
  13.         //初始化
  14.         $(function () {
  15.             $('#table2').hide();
  16.         })
  17.         //点击切换面板
  18.         var IsFixedTableLoad = 1;
  19.         function panel(obj) {
  20.             if (obj == 1) {
  21.                 $('#table1').show();
  22.                 $('#table2').hide();
  23.             } else if (obj == 2) {
  24.                 $('#table1').hide();
  25.                 $("#table2").show();
  26.             }
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <form id="form1" runat="server">
  32.         <div class="frmtop">
  33.             <table style="padding: 0px; margin: 0px; height: 100%;" cellpadding="0" cellspacing="0">
  34.                 <tr>
  35.                     <td id="menutab" style="vertical-align: bottom;">
  36.                         <div id="tab0" class="Tabsel" οnclick="GetTabClick(this);panel(1)">
  37.                             能耗动态
  38.                         </div>
  39.                         <div id="tab1" class="Tabremovesel" οnclick="GetTabClick(this);panel(2);">
  40.                             填报动态
  41.                         </div>
  42.                     </td>
  43.                 </tr>
  44.             </table>
  45.         </div>
  46.         <div class="div-frm" style="height: 275px;">
  47.             <%--能耗动态--%>
  48.             <div id="table1">
  49.                 <div id="divEnergy" style="width: 610px; height: 220px;"></div>
  50.             </div>
  51.             <%--填报动态--%>
  52.             <div id="table2">
  53.                 <div id="divReport" style="width: 750px; height: 250px;"></div>
  54.             </div>
  55.         </div>
  56.     </form>
  57. </body>
  58. </html>
  59. <script src="../Themes/Scripts/echarts/echarts.js"></script>
  60. <script src="../Themes/Scripts/echarts/theme/macarons.js"></script>
  61. <script type="text/javascript">
  62.     var cityClick = '';
  63.     function GetUnitEnergy(unitName) {
  64.         GetCityEnergy(unitName, 2);
  65.     }
  66.     require.config({
  67.         paths: {
  68.             echarts: '../Themes/Scripts/echarts'
  69.         }
  70.     });
  71.     require(
  72.         [
  73.             'echarts',
  74.             'echarts/chart/bar',
  75.             'echarts/chart/line',
  76.             'echarts/chart/pie',
  77.             'echarts/chart/funnel'
  78.         ],
  79.         DrawEChart //异步加载的回调函数绘制图表
  80.     );
  81.     var myEnergyChart;
  82.  
  83.     var myReportChart;
  84.  
  85.     //创建ECharts图表方法
  86.     function DrawEChart(ec) {
  87.         //--- 折柱 ---
  88.         myEnergyChart = ec.init(document.getElementById('divEnergy'), macarons);
  89.         //定义图表options
  90.         var options = {
  91.             title: {
  92.                 text: "",
  93.                 subtext: ""
  94.             },
  95.             /*color: ['#0099FF', '#00CC00', '#008080', '#CC6600', '#CC00CC', '#0033CC','#003300', '#FF0000'],*/
  96.             tooltip: {
  97.                 trigger: 'axis'
  98.             },
  99.             legend: {
  100.                 data: [" "]
  101.             },
  102.             toolbox: {
  103.                 show: true,
  104.                 feature: {
  105.                     mark: { show: false },
  106.                     dataView: { show: false, readOnly: false },
  107.                     magicType: { show: true, type: ['line', 'bar'] },
  108.                     restore: { show: true },
  109.                     saveAsImage: { show: false }
  110.                 }
  111.             },
  112.             grid: {
  113.                 x: 60,
  114.                 y: 30,
  115.                 x2: 5,
  116.                 y2: 30
  117.             },
  118.             calculable: true,
  119.             xAxis: [
  120.                 {
  121.                     type: 'category',
  122.                     data: [" "]
  123.                 }
  124.             ],
  125.             yAxis: [
  126.                 {
  127.                     type: 'value',
  128.                     axisLabel: {
  129.                         fomatter: "."
  130.                     },
  131.                     splitArea: { show: true }
  132.                 }
  133.             ],
  134.             series: [{
  135.                 name: " ",
  136.                 type: "line",
  137.                 data: [0]
  138.             }]
  139.         };
  140.         //选择一个空图表
  141.         myEnergyChart.setOption(options);
  142.         myReportChart = ec.init(document.getElementById('divReport'), macarons);
  143.         //选择一个空图表
  144.         myReportChart.setOption(options);
  145.  
  146.         // 默认加载填报
  147.         GetReport("1");
  148.         // 默认加载省直
  149.         GetUnitEnergy('34');
  150.     }
  151.  
  152.  
  153.     ///点击按钮获取图表数据采用ajax方式
  154.     function GetCityEnergy(cityCode, level) {
  155.         //获得图表的options对象
  156.         var options = myEnergyChart.getOption();
  157.         //通过Ajax获取数据
  158.         $.ajax({
  159.             type: "post",
  160.             async: false, //同步执行
  161.             url: "GetChartData.aspx?type=energyData",
  162.             dataType: "json", //返回数据形式为json
  163.             success: function (result) {
  164.                 if (result) {
  165.                     //将返回的category和series对象赋值给options对象内的category和series
  166.                     //因为xAxis是一个数组 这里需要是xAxis[i]的形式
  167.                     options.xAxis[0].data = result.category;
  168.                     options.series = result.series;
  169.                     options.legend.data = result.legend;
  170.                     myEnergyChart.setOption(options);
  171.                     myEnergyChart.refresh();
  172.                 }
  173.             },
  174.             error: function (errorMsg) {
  175.                 alert("图表数据加载失败！");
  176.             }
  177.         });
  178.     }
  179.  
  180.     ///点击按钮获取图表数据采用ajax方式
  181.     function GetReport(code) {
  182.         //获得图表的options对象
  183.         var options = myReportChart.getOption();
  184.         //通过Ajax获取数据
  185.         $.ajax({
  186.             type: "post",
  187.             async: false, //同步执行
  188.             url: "GetChartData.aspx?type=reportData",
  189.             dataType: "json", //返回数据形式为json
  190.             success: function (result) {
  191.                 if (result) {
  192.                     //将返回的category和series对象赋值给options对象内的category和series
  193.                     //因为xAxis是一个数组 这里需要是xAxis[i]的形式
  194.                     //myReportChart.clear();
  195.                     options.xAxis[0].data = result.category;
  196.                     options.series = result.series;
  197.                     options.legend.data = result.legend;
  198.                     myReportChart.setOption(options);
  199.                 }
  200.             },
  201.             error: function (errorMsg) {
  202.                 alert("图表数据加载失败！");
  203.             }
  204.         });
  205.     }
  206.  
  207.     //初始加载图表数据
  208.     $(function () {
  209.         GetCityEnergy("", "");
  210.         GetUnitEnergy("");
  211.     });
  212. </script>


  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7.  
  8. namespace AT.Web.Demo
  9. {
  10.     public partial class EchartDemo : System.Web.UI.Page
  11.     {
  12.         protected void Page_Load(object sender, EventArgs e)
  13.         {
  14.  
  15.         }
  16.     }
  17. }


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetChartData.aspx.cs" Inherits="AT.Web.Demo.GetChartData" %>


  1. using Newtonsoft.Json;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Data;
  5. using System.Data.SqlClient;
  6. using System.Linq;
  7. using System.Web;
  8. using System.Web.UI;
  9. using System.Web.UI.WebControls;
  10.  
  11. namespace AT.Web.Demo
  12. {
  13.     public partial class GetChartData : System.Web.UI.Page
  14.     {
  15.         protected void Page_Load(object sender, EventArgs e)
  16.         {
  17.             string type = Request["type"];
  18.             if (!string.IsNullOrEmpty(type))
  19.             {
  20.                 switch (type)
  21.                 {
  22.                     case "energyData":
  23.                         GetEnergyDataAjaxData("", "");
  24.                         break;
  25.                     case "reportData":
  26.                         GetReportDataAjaxData("");
  27.                         break;
  28.                 }
  29.             }
  30.         }
  31.  
  32.         /// <summary>
  33.         /// 获得数据且用Json格式数据返回
  34.         /// </summary>
  35.         private void GetEnergyDataAjaxData(string level, string code)
  36.         {
  37.             //考虑到图表的category是字符串数组 这里定义一个string的List
  38.             List<string> categoryList = new List<string>();
  39.             //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
  40.             List<Series> seriesList = new List<Series>();
  41.  
  42.             //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
  43.             List<string> legendList = new List<string>();
  44.  
  45.             DataTable dt = null;
  46.             using (SqlConnection con = new SqlConnection("Data Source=.;User ID=sa;Password=111111;Database=AT_DB;"))
  47.             {
  48.                 string strSQL = "select top 12 * from T_EchartData1";
  49.                 using (SqlDataAdapter adapter = new SqlDataAdapter(strSQL, con))
  50.                 {
  51.                     DataSet ds = new DataSet();
  52.                     adapter.Fill(ds);
  53.                     dt = ds.Tables[0];
  54.                 }
  55.             }
  56.             //Response.Write(dt.Rows.Count+"条数据！");
  57.             //设置legend数组
  58.             legendList.Add("今年能耗"); //这里的名称必须和series的每一组series的name保持一致
  59.             legendList.Add("去年能耗"); //这里的名称必须和series的每一组series的name保持一致
  60.  
  61.  
  62.             Series thisSeriesObj = new Series();
  63.             thisSeriesObj.id = 0;
  64.             thisSeriesObj.name = "今年能耗";
  65.             thisSeriesObj.type = "line"; //线性图呈现
  66.             thisSeriesObj.data = new List<object>();
  67.             thisSeriesObj.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };
  68.             Series lastSeriesObj = new Series();
  69.             lastSeriesObj.id = 1;
  70.             lastSeriesObj.name = "去年能耗";
  71.             lastSeriesObj.type = "line"; //线性图呈现
  72.             lastSeriesObj.data = new List<object>();
  73.             lastSeriesObj.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
  74.             foreach (DataRow dr in dt.Rows)
  75.             {
  76.                 categoryList.Add(dr[0].ToString() + "月");
  77.                 thisSeriesObj.data.Add(dr[1]);
  78.                 lastSeriesObj.data.Add(dr[2]);
  79.             }
  80.             //将sereis对象压入sereis数组列表内
  81.             seriesList.Add(thisSeriesObj);
  82.             seriesList.Add(lastSeriesObj);
  83.  
  84.             //最后调用相关函数将List转换为Json
  85.             //因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
  86.             var newObj = new
  87.             {
  88.                 category = categoryList,
  89.                 series = seriesList,
  90.                 legend = legendList
  91.             };
  92.             //Response返回新对象的json数据
  93.             Response.Write(JsonConvert.SerializeObject(newObj, Formatting.None));
  94.             Response.End();
  95.         }
  96.  
  97.         /// <summary>
  98.         /// 获得数据且用Json格式数据返回
  99.         /// </summary>
  100.         private void GetReportDataAjaxData(string code)
  101.         {
  102.             //考虑到图表的category是字符串数组 这里定义一个string的List
  103.             List<string> categoryList = new List<string>();
  104.             //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
  105.             List<Series> seriesList = new List<Series>();
  106.  
  107.             //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
  108.             List<string> legendList = new List<string>();
  109.  
  110.             DataTable dt = null;
  111.             using (SqlConnection con = new SqlConnection("Data Source=.;User ID=sa;Password=111111;Database=AT_DB;"))
  112.             {
  113.                 string strSQL = "select * from T_EchartData2";
  114.                 using (SqlDataAdapter adapter = new SqlDataAdapter(strSQL, con))
  115.                 {
  116.                     DataSet ds = new DataSet();
  117.                     adapter.Fill(ds);
  118.                     dt = ds.Tables[0];
  119.                 }
  120.             }
  121.             //Response.Write(dt.Rows.Count + "条数据！");
  122.             //设置legend数组
  123.             legendList.Add("电"); //这里的名称必须和series的每一组series的name保持一致
  124.             legendList.Add("水"); //这里的名称必须和series的每一组series的name保持一致
  125.             legendList.Add("燃煤"); //这里的名称必须和series的每一组series的name保持一致
  126.             legendList.Add("天然气"); //这里的名称必须和series的每一组series的name保持一致
  127.             legendList.Add("汽油"); //这里的名称必须和series的每一组series的name保持一致
  128.             legendList.Add("柴油"); //这里的名称必须和series的每一组series的name保持一致
  129.             legendList.Add("热力"); //这里的名称必须和series的每一组series的name保持一致
  130.             legendList.Add("其他"); //这里的名称必须和series的每一组series的name保持一致
  131.  
  132.  
  133.             Series dianSeries = new Series();
  134.             dianSeries.id = 0;
  135.             dianSeries.name = "电";
  136.             dianSeries.type = "line"; //线性图呈现
  137.             dianSeries.data = new List<object>();
  138.             dianSeries.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };
  139.             Series shuiSeries = new Series();
  140.             shuiSeries.id = 1;
  141.             shuiSeries.name = "水";
  142.             shuiSeries.type = "line"; //线性图呈现
  143.             shuiSeries.data = new List<object>();
  144.             shuiSeries.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
  145.             Series yuanmeiSeries = new Series();
  146.             yuanmeiSeries.id = 2;
  147.             yuanmeiSeries.name = "燃煤";
  148.             yuanmeiSeries.type = "line"; //线性图呈现
  149.             yuanmeiSeries.data = new List<object>();
  150.             yuanmeiSeries.itemStyle = new itemStyle { normal = new normal { color = "#008080" } };
  151.             Series tianranqiSeries = new Series();
  152.             tianranqiSeries.id = 3;
  153.             tianranqiSeries.name = "天然气";
  154.             tianranqiSeries.type = "line"; //线性图呈现
  155.             tianranqiSeries.data = new List<object>();
  156.             tianranqiSeries.itemStyle = new itemStyle { normal = new normal { color = "#CC6600" } };
  157.             Series qiyouSeries = new Series();
  158.             qiyouSeries.id = 4;
  159.             qiyouSeries.name = "汽油";
  160.             qiyouSeries.type = "line"; //线性图呈现
  161.             qiyouSeries.data = new List<object>();
  162.             qiyouSeries.itemStyle = new itemStyle { normal = new normal { color = "#CC00CC" } };
  163.             Series chaiyouSeries = new Series();
  164.             chaiyouSeries.id = 5;
  165.             chaiyouSeries.name = "柴油";
  166.             chaiyouSeries.type = "line"; //线性图呈现
  167.             chaiyouSeries.data = new List<object>();
  168.             chaiyouSeries.itemStyle = new itemStyle { normal = new normal { color = "#0033CC" } };
  169.             Series reliSeries = new Series();
  170.             reliSeries.id = 6;
  171.             reliSeries.name = "热力";
  172.             reliSeries.type = "line"; //线性图呈现
  173.             reliSeries.data = new List<object>();
  174.             reliSeries.itemStyle = new itemStyle { normal = new normal { color = "#003300" } };
  175.             Series qitaSeries = new Series();
  176.             qitaSeries.id = 7;
  177.             qitaSeries.name = "其他";
  178.             qitaSeries.type = "line"; //线性图呈现
  179.             qitaSeries.data = new List<object>();
  180.             qitaSeries.itemStyle = new itemStyle { normal = new normal { color = "#FF0000" } };
  181.             foreach (DataRow dr in dt.Rows)
  182.             {
  183.                 categoryList.Add(string.Format("{0}年{1}月", dr["ReportYear"], dr["ReportMonth"]));
  184.                 dianSeries.data.Add(string.IsNullOrEmpty(dr["DIAN"].ToString()) ? 0 : dr["DIAN"]);
  185.                 shuiSeries.data.Add(string.IsNullOrEmpty(dr["SHUI"].ToString()) ? 0 : dr["SHUI"]);
  186.                 yuanmeiSeries.data.Add(string.IsNullOrEmpty(dr["YUANMEI"].ToString()) ? 0 : dr["YUANMEI"]);
  187.                 tianranqiSeries.data.Add(string.IsNullOrEmpty(dr["TIANRQ"].ToString()) ? 0 : dr["TIANRQ"]);
  188.                 qiyouSeries.data.Add(string.IsNullOrEmpty(dr["QIYOU"].ToString()) ? 0 : dr["QIYOU"]);
  189.                 chaiyouSeries.data.Add(string.IsNullOrEmpty(dr["CHAIYOU"].ToString()) ? 0 : dr["CHAIYOU"]);
  190.                 reliSeries.data.Add(string.IsNullOrEmpty(dr["RELI"].ToString()) ? 0 : dr["RELI"]);
  191.                 qitaSeries.data.Add(string.IsNullOrEmpty(dr["QTNY"].ToString()) ? 0 : dr["QTNY"]);
  192.             }
  193.             //将sereis对象压入sereis数组列表内
  194.             seriesList.Add(dianSeries);
  195.             seriesList.Add(shuiSeries);
  196.             seriesList.Add(yuanmeiSeries);
  197.             seriesList.Add(tianranqiSeries);
  198.             seriesList.Add(qiyouSeries);
  199.             seriesList.Add(chaiyouSeries);
  200.             seriesList.Add(reliSeries);
  201.             seriesList.Add(qitaSeries);
  202.  
  203.             //最后调用相关函数将List转换为Json
  204.             //因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
  205.             var newObj = new
  206.             {
  207.                 category = categoryList,
  208.                 series = seriesList,
  209.                 legend = legendList
  210.             };
  211.             //Response返回新对象的json数据
  212.             Response.Write(JsonConvert.SerializeObject(newObj, Formatting.None));
  213.             Response.End();
  214.         }
  215.     }
  216.     /// <summary>
  217.     /// 定义一个Series类 设置其每一组sereis的一些基本属性
  218.     /// </summary>
  219.     class Series
  220.     {
  221.         /// <summary>
  222.         /// sereis序列组id
  223.         /// </summary>
  224.         public int id
  225.         {
  226.             get;
  227.             set;
  228.         }
  229.  
  230.         /// <summary>
  231.         /// series序列组名称
  232.         /// </summary>
  233.         public string name
  234.         {
  235.             get;
  236.             set;
  237.         }
  238.  
  239.         /// <summary>
  240.         /// series序列组呈现图表类型(line、column、bar等)
  241.         /// </summary>
  242.         public string type
  243.         {
  244.             get;
  245.             set;
  246.         }
  247.  
  248.         /// <summary>
  249.         /// series序列组的itemstyle
  250.         /// </summary>
  251.         public object itemStyle
  252.         {
  253.             get;
  254.             set;
  255.         }
  256.         /// <summary>
  257.         /// series序列组的数据为数据类型数组
  258.         /// </summary>
  259.         public List<object> data
  260.         {
  261.             get;
  262.             set;
  263.         }
  264.     }
  265.  
  266.     class normal
  267.     {
  268.         /// <summary>
  269.         /// color
  270.         /// </summary>
  271.         public string color
  272.         {
  273.             get;
  274.             set;
  275.         }
  276.     }
  277.  
  278.     class itemStyle
  279.     {
  280.         /// <summary>
  281.         /// normal
  282.         /// </summary>
  283.         public object normal
  284.         {
  285.             get;
  286.             set;
  287.         }
  288.     }
  289. }



声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/114726
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。