echarts在.Net中使用實例(二) 使用ajax動態加載數據

時間 2019-11-17

原文原文鏈接

前一篇文章連接：echarts在.Net中使用實例(一) 簡單的Demojavascript

經過上一篇文章能夠知道和echarts參考手冊可知，series字段就是用來存儲咱們顯示的數據，因此咱們只須要用ajax來獲取series的值就能夠.html

option

名稱	描述
{color}backgroundColor	全圖默認背景，（詳見backgroundColor），支持rgba，默認爲無，透明
{Array} color	數值系列的顏色列表，（詳見color），可配數組，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，當系列數量個數比顏色列表長度大時將循環選取
{boolean}renderAsImage	非IE8-支持渲染爲圖片，（詳見renderAsImage）
{boolean}calculable	是否啓用拖拽重計算特性，默認關閉，（詳見calculable，相關的還有 calculableColor， calculableHolderColor，nameConnector， valueConnector）
{boolean}animation	是否開啓動畫，默認開啓，（詳見 animation，相關的還有 addDataAnimation， animationThreshold，animationDuration， animationDurationUpdate ， animationEasing）
{Object} timeline	時間軸（詳見timeline），每一個圖表最多僅有一個時間軸控件
{Object} title	標題（詳見title），每一個圖表最多僅有一個標題控件
{Object} toolbox	工具箱（詳見toolbox），每一個圖表最多僅有一個工具箱
{Object} tooltip	提示框（詳見tooltip），鼠標懸浮交互時的信息提示
{Object} legend	圖例（詳見legend），每一個圖表最多僅有一個圖例，混搭圖表共享
{Object}dataRange	值域選擇（詳見dataRange）,值域範圍
{Object}dataZoom	數據區域縮放（詳見dataZoom）,數據展示範圍選擇
{Object}roamController	漫遊縮放組件（詳見roamController）,搭配地圖使用
{Object} grid	直角座標系內繪圖網格（詳見grid）
{Array \| Object}xAxis	直角座標系中橫軸數組（詳見xAxis），數組中每一項表明一條橫軸座標軸，標準（1.0）中規定最多同時存在2條橫軸
{Array \| Object}yAxis	直角座標系中縱軸數組（詳見yAxis），數組中每一項表明一條縱軸座標軸，標準（1.0）中規定最多同時存在2條縱軸
{Array} series	驅動圖表生成的數據內容（詳見series），數組中每一項表明一個系列的特殊選項及數據

首先定義一個Serial類java

 /// <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序列組的數據爲數據類型數組
        /// </summary>
        public List<double> data
        {
            get;
            set;
        }
    }

View Code

接着將Serial實例化並將其轉化爲json格式(必須用大神器：Newtonsoft.Json.dll)，代碼以下圖jquery

 private  void ShowChart()
    {
        //考慮到圖表的series數據爲一個對象數組 這裏額外定義一個series的類
        List<Series> seriesList = new List<Series>();

        Series series1 = new Series();
        series1.name = "actual";
        series1.type = "bar";
        series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 };

        Series series2 = new Series();
        series2.name = "Budget";
        series2.type = "bar";
        series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, };

        seriesList.Add(series1);
        seriesList.Add(series2);
        var newObj = new
        {
            series = seriesList
        };

        string strJson = ToJson(newObj);

        WriteJson(strJson);
    }

    public static string ToJson( object obj)
    {
        return NewtonsoftJson(obj);
    }

    public static string NewtonsoftJson(object obj)
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
    }

    private static void WriteJson(string str)
    {
        HttpContext.Current.Response.Write(str);
        //HttpContext.Current.Response.ContentType = "text/plain"; //設置MIME格式
        HttpContext.Current.Response.End();
    }

View Code

前臺代碼只須要用ajax來獲取值並賦給option的serial屬性便可ajax

<!DOCTYPE html>
<html>  
    <head>
    <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="echarts/echarts.js"></script>

    </head>
    <body>
        <div id="main" style=" height:400px;"></div>
      
    </body>  
</html>  
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'echarts'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: ['Actual', 'Budget']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'//Y軸顯示的類型,默認爲value
                        }
                    ],
                    series: []
                };
                //ajax動態獲取數據
                $.ajax({
                    type: 'post',
                    url: 'ajax.ashx?action=ShowChart',
                    data: {},
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        if (result) {
                            // 獲取json值
                              option.series = result.series;
                            // 爲echarts對象加載數據 
                               myChart.setOption(option);
                        } 
                    },
                    error: function () {
                         alert("Error");
                    }
                });

            }
        );
    </script>