当前位置：首页>php教程 > php常用代码 > 【asp.net使用echarts展示图表数据库】asp.net使用echarts展示图表数据的示例

【asp.net使用echarts展示图表数据库】asp.net使用echarts展示图表数据的示例

更新时间：2020-10-14    来源：php常用代码    手机版     字体：大中小

【www.bbyears.com--php常用代码】

html代码

 代码如下

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



   
    Echart图表示例
    <script src="../Themes/Scripts/jquery-1.8.2.min.js"></script>
   
    <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>


   


       
           
               
                   
                       
                            能耗动态
                       
                       
                            填报动态
                       
                   
               
           
       
       
            <%--能耗动态--%>
           
               
           
            <%--填报动态--%>
           
               
           
       
   



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


asp.net代码：

 代码如下

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

asp.net后台组织数据代码：

 代码如下

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;
                }
            }
        }
        ///


        /// 获得数据且用Json格式数据返回
        ///
        private void GetEnergyDataAjaxData(string level, string code)
        {
            //考虑到图表的category是字符串数组 这里定义一个string的List
            List categoryList = new List();
            //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
            List seriesList = new List();
            //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
            List legendList = new List();
            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];
                }
            }
            //htm = htm&(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();
            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();
            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数据
            htm = htm&(JsonConvert.SerializeObject(newObj, Formatting.None));
            Response.End();
        }
        ///
        /// 获得数据且用Json格式数据返回
        ///
        private void GetReportDataAjaxData(string code)
        {
            //考虑到图表的category是字符串数组 这里定义一个string的List
            List categoryList = new List();
            //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
            List seriesList = new List();
            //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
            List legendList = new List();
            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];
                }
            }
            //htm = htm&(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();
            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();
            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();
            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();
            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();
            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();
            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();
            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();
            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数据
            htm = htm&(JsonConvert.SerializeObject(newObj, Formatting.None));
            Response.End();
        }
    }
    ///
    /// 定义一个Series类 设置其每一组sereis的一些基本属性
    ///
    class Series
    {
        ///
        /// sereis序列组id
        ///
        public int id
        {
            get;
            set;
        }
        ///
        /// series序列组名称
        ///
        public string name
        {
            get;
            set;
        }
        ///
        /// series序列组呈现图表类型(line、column、bar等)
        ///
        public string type
        {
            get;
            set;
        }
        ///
        /// series序列组的itemstyle
        ///
        public object itemStyle
        {
            get;
            set;
        }
        ///
        /// series序列组的数据为数据类型数组
        ///
        public List data
        {
            get;
            set;
        }
    }
    class normal
    {
        ///
        /// color
        ///
        public string color
        {
            get;
            set;
        }
    }
    class itemStyle
    {
        ///
        /// normal
        ///
        public object normal
        {
            get;
            set;
        }
    }
}

本文来源：http://www.bbyears.com/jiaocheng/104531.html

上一篇 下一篇

猜你感兴趣

热门标签

更多>>

本类排行

本网站版权归作者所有，如果无意之中侵犯了您的版权，请邮件告知或通知网站客服，本站将在3个工作日内删除。

Copyright © 2007-2019 程序开发教程网 All rights reserved. 程序开发教程网 京ICP备17136666号