.NET+Ajax+ashx 實作Echarts圖表動态互動

前言：

　　使用Echarts展示圖表效果，在這裡隻做了四種案例：折線、柱狀、圓形、雷達。當初是一位朋友用到Echarts展示資料，他沒有太多時間弄，是以我就幫他搞出來，當初剛接觸的時候也是一頭霧水，不知道該怎麼下手，網上類似的案例有也不多，并且不是自己想要的效果。正好今天整理電腦時候發現還有實作的案例，就放在自己的部落格上留着以後用。

實作步驟：

　　既然說到了動态資料，當然離不開查詢，我在這用SQL Server建一個簡單的庫，隻為展示其效果。

看到資料大家夥都知道這是一個車品牌的圖例（說了一句廢話^_^），接下來開始畫前台頁面，效果大概是這個樣子的：

當然這是根據個人愛好，我喜歡比較規整的東西，是以就浪費了一些時間畫出一個樣式。

css樣式代碼：

body,ul,li,div,a,span{
    margin:auto; 
} 
 
.btnChart{
    width:750px;
    height:40px; 
    margin:0 auto;
}
.BarFigure {
    BACKGROUND: url(/chartImg/column3d.gif) no-repeat 4px 4px; 
}
.RadarFigure {
    BACKGROUND: url(/chartImg/leidatu.gif) no-repeat 4px 4px; 
} 
.PieFigure {
    BACKGROUND: url(/chartImg/pie.gif) no-repeat 4px 4px; 
}
.LineFigure {
    BACKGROUND: url(/chartImg/donut.gif) no-repeat 4px 4px; 
}
.btnChart ul li{
    text-decoration:none;
    border:1px solid gray;
    padding:5px;
    border-radius:5px;
    color:#000; 
    font-size:14px;
    font-family:'楷體';
    float:right;list-style:none;
    margin-left:10px; 
}
.btnChart ul li:hover {
    color: orange; 
    cursor:pointer;
}   
.Line {
    border-bottom: 1px solid #e1e1e1;
    width: 750px;
    margin: 0 auto; 
}
.ChartStyle{
    width:800px;
    height:500px;
    border:1px solid gray;
    margin:0 auto;
    display:none; 
}

html代碼：

<body>
    <div style="height:600px;width:1000px;margin:0 auto; border:1px solid gray">  
        <br />
        <div class="btnChart" >
            <ul>  
                <li class='RadarFigure'>&nbsp; 雷達圖 </li>
                <li class='PieFigure'>&nbsp; 餅狀圖 </li>
                <li class='BarFigure'>&nbsp; 柱狀圖 </li>
                <li class='LineFigure'>&nbsp; 折線圖 </li> 
            </ul>  
        </div> 
        <div class="showCharArray">
            <div  class=" ChartStyle" >         <%--折線圖--%> 
                <div id="Line" style="width:800px; height:450px;margin-top:30px;" ></div> 
            </div>
            <div  class="ChartStyle" >          <%--柱狀圖--%>
                <div id="Bar" style="width:800px; height:450px;margin-top:30px;"></div> 
            </div>
            <div class="ChartStyle">            <%--餅狀圖--%> 
                <div id="Pie" style="width:800px; height:450px;margin-top:30px;"></div> 
            </div>
            <div  class="ChartStyle">           <%--雷達圖--%> 
                <div id="Radar" style="width:800px; height:450px;margin-top:30px;"></div> 
            </div>   
        </div>
    </div> 
</body>

接下來開始做Echarts的準備工作啦，先從官網下載下傳echarts.min.js 連結：

http://echarts.baidu.com/download.html

，jquery.js我就不說啦。

<script src="Scripts/jquery-1.4.1.min.js"  type="text/javascript"></script>     <%--jquery.js--%>
    <script src="Scripts/echarts.min.js" type="text/javascript"></script>           <%-- Echarts.js --%>
    <link href="css/ChartPage.css" rel="stylesheet" type="text/css" />  <%--引用的css樣式--%>

前台寫的差不多了，我們開始寫查詢資料。

　　　　 static string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string sql = @"  select Id,Num,Product from SalesVolume";       //SQL語句
            DataTable dt = ExecuteDataTable(sql,CommandType.Text,null);     //查詢結果

            List<object>  lists = new List<object>();                       //建立object類型的泛型
            foreach (DataRow dr in dt.Rows)
            {
                var obj = new { name = dr["Product"], value = dr["Num"] };  //key，value
                lists.Add(obj);
            } 
            var jsS = new JavaScriptSerializer();                           //建立json對象
            context.Response.Write(jsS.Serialize(lists));                   //傳回資料
            
        } 
        public  DataTable ExecuteDataTable(string sql, CommandType type, params SqlParameter[] pars)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            using (SqlConnection con = new SqlConnection(conStr))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand(sql, con);
                cmd.CommandType = type;
                if (pars != null)
                {
                    cmd.Parameters.AddRange(pars);
                }
                SqlDataAdapter adpt = new SqlDataAdapter(cmd);
                adpt.Fill(ds);
                dt = ds.Tables[0];
            }
            return dt; 
        }

背景查詢也很簡單，隻要能傳回key和value值就可以了。前台的js直接上代碼吧，差不多都能看懂。

.NET+Ajax+ashx 實作Echarts圖表動态互動

$(function () {  
            $("select").addClass("form-control");
            $(".LineFigure").click(function () {
                var $content = $(this).parent().parent().next().children("div:nth-child(1)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();
                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide();

                    var newElement = $('<div id="Line" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);
                    //-----------上下都是設定樣式的可以無視掉，這裡才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                var list = eval(data);
                                var name = [];      //Line的資料需要object類型，是以建立name和value數組存放資料
                                var value = [];     
                                for (var i = 0; i < list.length; i++) {
                                    name.push(list[i].name);        
                                    value.push(list[i].value);
                                }
                                LineChart(name, value);     //調用封裝好的Line    
                            }
                        },
                        error: function (msg) {
                            alert("系統發生錯誤");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })

            $(".BarFigure").click(function () {

                var $content = $(this).parent().parent().next().children("div:nth-child(2)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();
                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide();

                    var newElement = $('<div id="Bar" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);

                    //-----------上下都是設定樣式的可以無視掉，這裡才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data) { 
                                var list = eval(data);
                                var name = [];
                                var value = [];
                                for (var i = 0; i < list.length; i++) {
                                    name.push(list[i].name);
                                    value.push(list[i].value);
                                }
                                BarChart(name, value);          //調用封裝好的BarChart
                            }
                        },
                        error: function (msg) {
                            alert("系統發生錯誤");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })


            $(".PieFigure").click(function () {
                var $content = $(this).parent().parent().next().children("div:nth-child(3)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();

                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide();

                    var newElement = $('<div id="Pie" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);

                    //-----------上下都是設定樣式的可以無視掉，這裡才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) { 
                            if (data) { 
                                var list = eval(data); 
                                var name = [];
                                var value = [];
                                for (var i = 0; i < list.length; i++) { 
                                    name.push(list[i].name);
                                    value.push(list[i].value);
                                } 
                                PieChart(data, name);       // 圓形不同的是資料類型是這樣的：{value:335, name:'直接通路'},{value:310, name:'郵件營銷'},{value:234, name:'聯盟廣告'}
                            }
                        },
                        error: function (msg) {
                            alert("系統發生錯誤");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })


            $(".RadarFigure").click(function (e) {
                var $content = $(this).parent().parent().next().children("div:nth-child(4)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();
                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide(); 
                    var newElement = $('<div id="Radar" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);

                    //-----------上下都是設定樣式的可以無視掉，這裡才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                var list = eval(data);
                                var name = [];
                                var value = [];
                                for (var i = 0; i < list.length; i++) {
                                    name.push(list[i].name);
                                    value.push(list[i].value);
                                }
                                RadarChart(name, value, data);          //調用封裝好的RadarChart
                            }
                        },
                        error: function (msg) {
                            alert("系統發生錯誤");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })
        })

View Code

.NET+Ajax+ashx 實作Echarts圖表動态互動

<script type="text/javascript">     //封裝好的圖表類，傳入資料即可
    function LineChart(name, value) {
        var myChart = echarts.init(document.getElementById('Line'));
        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: '汽車銷量統計',
                subtext: '純屬虛構',
                x: 'center'
            },
            tooltip: {},
            xAxis: {
                data: name          //恒坐标的值name
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'line',
                data: value         //縱坐标的值value
            }]
        };
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);

    }
    function BarChart(name,value) {
        var myChart = echarts.init(document.getElementById('Bar'));
        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: '汽車銷量統計',
                subtext: '純屬虛構',
                x: 'center'
            },
            tooltip: {}, 
            xAxis: {
                data: name
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: value
            }]
        };
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option); 
    }

    function PieChart(data,name) {
        var myChart = echarts.init(document.getElementById('Pie'));
        option = {
            title: {
                text: '汽車銷量統計',
                subtext: '純屬虛構',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: name
            },
            series: [{
                name: '通路來源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    function RadarChart(name,value,data) { 
        var myChart = echarts.init(document.getElementById('Radar'));
        option = {
            title: {
                text: '汽車銷量統計(純屬虛構)',
                subtext: '純屬虛構',
                x: 'right',
                y: 'bottom'
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,250,0.2)'
            },
            legend: {
                data: name
            },
            visualMap: {
                color: ['red', 'yellow']
            },
            radar: {
                indicator: (function () {
                    var indicator = [];
                    for (var i = 0; i < name.length; i++) {
                        indicator.push({
                            text: name[i],
                            max: 4000       //限制最大數數值
                        })
                    }
                    return indicator;
                })() 
            },
            series: (function () {
                var series = [];
                for (var i = 0; i < data.length; i++) {
                    series.push({ 
                        type: 'radar',
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1
                                }
                            },
                            emphasis: {
                                areaStyle: { color: 'rgba(0,250,0,0.3)' }
                            }
                        },

                        data: [
                            {
                                value: value,
                                name: name[i]
                            }
                        ]  
                    });
                }
                return series;
            })()
        };
        myChart.setOption(option);
    } 
</script>

到這裡功能都能實作了，給大家展示一下我的成品，前端編寫能力有些差，大夥湊合的看吧^_^。

本文到這裡就完事兒了，當然哪裡寫的不好大神可以加以點評，歡迎拍磚扶正，共同進步^_^~

.NET+Ajax+ashx 實作Echarts圖表動态互動

繼續閱讀

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

sqlServer根據經緯查距離

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題