【转】ASP.NET使用ECharts展示后台数据

       Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对使用该方法的朋友有所帮助。

一、前端

1、从echarts.baidu.com官网下载最新版的echarts

2、打开一个应用echarts的页面

3、通过下面语句引入JQuery与Echarts的JS库。

    <script type="text/javascript" src="/Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/Scripts/echarts.js"></script>

4、在页面的Body部分，添加一个DIV，用于并给它一个名字，用于后面的JS代码存取，以放置绘制的图表

     <div id="main" style=" height:400px;">测试数据</div>

    在这个DIV中，名称（id）可以自行定义，但是要跟后面的致，height根据自己的需要自行设定。

5、如下代码是前台绘制图表最主要部分，通过以下几个步骤实现：

（1）echarts对DIV进行初始化，为图表绘制做准备

扫描二维码关注公众号，回复： 10887189 查看本文章

var myChart = echarts.init(document.getElementById('main'));

echarts.init（）方法对第4部创建的DIV做了初始化，它是EChart内置的方法。

（2）建立参数对象option，为图表的绘制指定各种参数与数据，主要包括图表标题（title）、工具栏（toolbox）、图例（Legend）、Y坐标轴（yAxis）、X坐标轴（xAxis）、数据（Series）。其中图例（Legend）、Y坐标轴（yAxis）、X坐标轴（xAxis）、数据（Series）可以根据需要指定多个，并且它们可以根据需要在后台生成。

          var options = {
                    title: {
                        text: "月工程数据",
                    },
                    //右侧工具栏
                     toolbox: {
                         show: true,
                         feature: {
                             mark: { show: true },
                             dataView: { show: true, readOnly: false },
                             magicType: { show: true, type: ['line', 'bar'] },
                             restore: { show: true },
                             saveAsImage: { show: true }
                         }
                     },                    
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },                   
                    calculable: true,
                    xAxis: [
                        {                           
                            type: 'category',
                            name: '月份',
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            axisLabel: {
                                formatter: '{value} Y'
                            },
                            splitArea: { show: true }
                        },
                        {
                            type: 'value',
                            name: '工作量',
                            axisLabel: {
                                formatter: '{value} M3'
                            },
                            splitArea: { show: true }
                        }
                    ],
                    series: []
                };        

         

（3）使用Ajax读取后台数据 

               $.ajax({
                    type: "POST",
                    async: false,
                    contentType: 'application/json; charset=utf-8',    //如果不指定该参数，总是返回跳到error部分，而无法执行success部分
                    url: "/wsComm.asmx/getdataechart",                  //调用后台Webservice
                    dataType: "json",                                                 //返回数据形式为json
                    success: function (result) {                       
                        var obj = JSON.parse(result.d.Data); //一定要注意大小写，让它跟后台返回的JSON语句中一致。result.d.Data是字串数据，需要重新转换成JSON                                                
                        if (result) {
                            //将返回的category和series对象赋值给options对象内的category和series
                            //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                            options.yAxis[0].data = obj.value;
                            options.xAxis[0].data = obj.category;
                            options.series = obj.series;
                            options.legend.data = obj.legend;
                            myChart.hideLoading();
                            myChart.setOption(options);
                        }
                    },                   
                    error: function (XMLHttpRequest, textStatus, errorThrown) {                       
                        alert(XMLHttpRequest.responseText);

                    }
                });       

  注：Echarts3.X，已经不用Require指定echarts的引用路径，直接定义option语句，从后台读取数据即可。完整代码如下：

<script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
                //图表显示提示信息
                myChart.showLoading({
                    text: "图表数据正在努力加载..."
                });
                //定义图表options
                var options = {
                    title: {
                        text: "月工程数据",
                    },
                    //右侧工具栏
                     toolbox: {
                         show: true,
                         feature: {
                             mark: { show: true },
                             dataView: { show: true, readOnly: false },
                             magicType: { show: true, type: ['line', 'bar'] },
                             restore: { show: true },
                             saveAsImage: { show: true }
                         }
                     },                    
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },                   
                    calculable: true,
                    xAxis: [
                        {                           
                            type: 'category',
                            name: '月份',
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            axisLabel: {
                                formatter: '{value} Y'
                            },
                            splitArea: { show: true }
                        },
                        {
                            type: 'value',
                            name: '工作量',
                            axisLabel: {
                                formatter: '{value} M3'
                            },
                            splitArea: { show: true }
                        }
                    ],
                    series: []
                };               
                //通过Ajax获取数据
                $.ajax({
                    type: "POST",
                    async: false,
                    contentType: 'application/json; charset=utf-8',
                    url: "/wsComm.asmx/getdataechart",
                    dataType: "json", //返回数据形式为json
                    success: function (result) {                       
                        var obj = JSON.parse(result.d.Data); //一定要注意大小写，本语句中，一直把Data写成data，总是取不出数据，耽误了半天                                               
                        if (result) {
                            //将返回的category和series对象赋值给options对象内的category和series
                            //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                            options.yAxis[0].data = obj.value;
                            options.xAxis[0].data = obj.category;
                            options.series = obj.series;
                            options.legend.data = obj.legend;
                            myChart.hideLoading();
                            myChart.setOption(options);
                        }
                    },                   
                    error: function (XMLHttpRequest, textStatus, errorThrown) {                       
                        alert(XMLHttpRequest.responseText);
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });           
    </script>

二、创建后台WebService接口方法

1、创建专门类，存放Series数据

    /// 定义一个Series类 设置其每一组sereis的一些基本属性
    class Series
    {
        /// series序列组名称
        public string name
        {
            get;
            set;
        }
        /// series序列组呈现图表类型
        public string type
        {
            get;
            set;
        }
        /// series序列组呈现对应的Y轴刻度
        public int yAxisIndex
        {
            get;
            set;
        }
        /// series序列组的数据为数据类型数组
        public List<double> data
        {
            get;
            set;
        }
    }
2、创建Webserice方法，返回JSON数据

（1）下面方法中，使用了Newtonsoft的类库，进行JSON数据的封装，所以需要通过Nuget安装并且导入如下命名空间

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

（2）该方法返回三类数据：categoryList保存X轴数据，LegendList保存图例数据，seriesList保存Series数据，seriesList保存了两组数据，从而可以把两种对比数据显示在同一张表上。注意LegendList、yAxis、seriesList数据之间的对应关系，否则会出现数据的不致。程序中的代码已经进行了详细的说明，其他不再赘述。

public JsonResult getdata()
    {
        //考虑到图表的category是字符串数组 这里定义一个string的List
        List<string> categoryList = new List<string>();
        //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
        List<string> legendList = new List<string>();
        //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
        List<Series> seriesList = new List<Series>();
        //设置legend数组
        legendList.Add("月支出金额"); //这里的名称必须和series的每一组series的name保持一致
        legendList.Add("月工作量"); //这里的名称必须和series的每一组series的name保持一致
        //填写第一个Series
        //定义一个Series对象
        Series seriesObj = new Series();
        //seriesObj.id = 1;
        seriesObj.name = "月支出金额";
        seriesObj.type = "line"; //线性图呈现
        seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错       
     
        //模拟两组数据，都放在二组数组中。该数据你可以从数据库中获取，关于如何从后台数据库进行读取，本文不再详述。
        string[,] MonthCost = new string[,] { { "201701","10110020" }, { "201702", "2000000" }, { "201703", "3500000" }, { "201704", "4590876" }, { "201705", "5809833" }, { "201706", "5309902" }, { "201707", "7388332" }, { "201708", "2000000" }, { "201709", "19879802" }, { "2017010", "2378945" } };
        string[,] ProjectVal = new string[,] { { "201701", "3000" }, { "201702", "7500" }, { "201703", "9500" }, { "201704", "10000" }, { "201705", "12000" }, { "201706", "10050" }, { "201707", "30050" }, { "201708", "7893" }, { "201709", "7312" }, { "2017010", "8905" } };
        //设置数据       
        for(int i=0;i<10;i++)
        {
            //加入category刻度数组
            categoryList.Add(MonthCost[i,0]);
            //加入数据值series序列数组 这里提供为了效果只提供一组series数据好了               
            seriesObj.data.Add(Convert.ToDouble(MonthCost[i,1])); //数据依次递增
        }
        seriesList.Add(seriesObj);
        //填写第二个Series
        seriesObj = new Series();
        //seriesObj.id = 1;
        seriesObj.name = "月工作量";
        seriesObj.type = "bar"; //线性图呈现
        seriesObj.yAxisIndex = 1;
        seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错       
        //设置数据       
        for(int i=0;i<10;i++)
        {
            seriesObj.data.Add(Convert.ToDouble(ProjectVal[i,1])); //数据依次递增
        }
        seriesList.Add(seriesObj);
        //最后调用相关函数将List转换为Json
        //因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
        JsonResult json = new JsonResult();
        var newObj = new
        {
            category = categoryList,
            series = seriesList,
            legend = legendList
        };
        json.Data = Newtonsoft.Json.JsonConvert.SerializeObject(newObj);
        return json;
    }

三、效果图