(一) 使用工具 visual studio 2017；Web开发：asp.net

（代码中的js引用路径以及ajax方法调用的url，记得修改哦）

(二) 准备工作（此处写给和我一样小白）

　　1.动态从后台获取数据，需使用Ajax获取后台Json，为此我们需要做一些准备工作，安装两个包（在vs的NuGet包管理）

一个json的包，一个mvc的包。

　　2.添加必要的js。

　　ECharts和jQuery均可在各自官网下载到。Echarts依赖zrender，但好像项目中是否引用并不影响。原谅我对Echarts还只是初识，理解不够深刻。

(三) 开始吧~

然后现在开始我们的小练习。

先准备一个Series类

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 /// <summary>

 /// Series 的摘要说明

 /// </summary>

 public class Series

 {

     public string name;

     public string type;

     public int yAxisIndex;

     public List<double> data;

 }

Series

然后我们添加一个web服务

是的，就是这个~ 我给的名字叫 wsComm

（VS很智能的告诉我要取消如下注释，然而我一开始仍然没有看到，瞎了大概）

然后我们需要在这里面写一个webmethod，以便在前台进行数据获取（关于webmethod的问题，这里不做详述）。

 /// <summary>

 /// wsComm 的摘要说明

 /// </summary>

 [WebService(Namespace = "http://tempuri.org/")]

 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。

 [System.Web.Script.Services.ScriptService]

 public class wsComm : System.Web.Services.WebService

 {

     /// <summary>

     /// ECharts图表数据获取

     /// </summary>

     /// <returns></returns>

     [WebMethod]

     public JsonResult getdataechart()

     {

         //考虑到图表的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.name = "月支出金额";

         seriesObj.type = "line"; //线性图呈现

         seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错       

         //模拟两组数据，都放在二组数组中。该数据你可以从数据库中获取，关于如何从后台数据库进行读取，本文不再详述。

         string[,] MonthCost = new string[,] { { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" } };

         string[,] ProjectVal = new string[,] { { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" } };

         //设置数据

         for (int i = ; i < ; i++)

         {

             //加入category刻度数组

             categoryList.Add(MonthCost[i, ]);

             //加入数据值series序列数组 这里提供为了效果只提供一组series数据好了

             seriesObj.data.Add(Convert.ToDouble(MonthCost[i, ])); //数据依次递增

         }

         seriesList.Add(seriesObj);

         //填写第二个Series

         seriesObj = new Series();

         seriesObj.name = "月工作量";

         seriesObj.type = "bar"; //线性图呈现

         seriesObj.yAxisIndex = ;

         seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错

         //设置数据

         for (int i = ; i < ; i++)

         {

             seriesObj.data.Add(Convert.ToDouble(ProjectVal[i, ])); //数据依次递增

         }

         seriesList.Add(seriesObj);

         //最后调用相关函数将List转换为Json

         //因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象

         JsonResult json = new JsonResult();

         var newObj = new

         {

             category = categoryList,

             series = seriesList,

             legend = legendList

         };

         json.Data = JsonConvert.SerializeObject(newObj);

         return json;

     }

 }

wsComm

　　前台：

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script type="text/jscript" src="../JS/jquery-3.3.1.js"></script>

     <script type="text/jscript" src="../JS/echarts.js"></script>

     <title></title>

 </head>

 <body>

     <form id="form1" runat="server">

         <div id="main" style="height: 400px"></div>

         <script type="text/javascript">

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

             //图表显示提示信息

             myChart.showLoading({

                 text: "图表数据正在努力加载..."

             });

             //定义图表options

             var options = {

                 title: {

                     text: "测试报表1",

                 },

                 //右侧工具栏

                 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[].data = obj.value;

                         options.xAxis[].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>

     </form>

 </body>

 </html>

html

嗯，然后就完成了。

参考原文：https://blog.csdn.net/guoxy_nb/article/details/78943185

ECharts 从后台动态获取数据 （asp.net）的更多相关文章

  1. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

  2. echarts中跨域动态获取数据时，当某些对应的数据为空时，鼠标滑动到所在位置卡死

    才疏学浅,万望指点. formatter: function (params) { var rel = params[0].name + "<br />"; rel + ...

  3. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  4. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  5. fullCalendar动态获取数据

    fullCalendar http://fullcalendar.io/docs/event_data/events_function $('#calendar').fullCalendar({ he ...

  6. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  7. thymeleaf下拉框从后台动态获取集合数据并回显选中

    今天遇到从后台集合中取出对象在前台页面下拉列表展示: <select name="signature" lay-search="" class=" ...

  8. asp.net mvc Areas 母版页动态获取数据进行渲染

    经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...

  9. Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决

    前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...

随机推荐

  1. python变量存储

    变量的存储 在高级语言中,变量是对内存及其地址的抽象. 对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不是这个变量的只 ...

  2. Java 平时作业六

    编写一个 Java 应用程序,使用 Java 的输入输出流技术将 Input.txt 的内容(Input.txt 为文本 文件)逐行读出, 每读出一行就顺序为其添加行号(从 1 开始,逐行递增),并写 ...

  3. 初读"Thinking in Java"读书笔记之第七章 --- 复用类

    组合语法 将对象引用置于新类中,即形成类的组合. 引用初始化方法 在定义处初始化. 在类的构造器中初始化. 在使用这些对象之前,进行"惰性初始化". 使用实例初始化. 继承语法 J ...

  4. for ，foreach ，map 循环的区别

    一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...

  5. Fiddle手机抓包

    Fiddler是一个http调试代理,它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddle 所有的“进出”的数据(指co ...

  6. @Schedule注解中的Cron表达式读取properties的方法

    1.properties文件中增加配置项: datasync.cron=0 */10 * * * ? 2.定时任务类增加PropertySource注解: @PropertySource(" ...

  7. 《团队-爬虫豆瓣top250项目-团队一阶段互评》

    团队名称:咣咣踹电脑 学号:2015035107217姓名:耿文浩 得分10 原因:组长带领的好,任务分配的好,积极帮助组员解决问题 学号:2015035107213姓名:周鑫 得分8 原因:勇于分担 ...

  8. python super超类方法

    super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重复调用( ...

  9. vue+element-ui实现表格编辑（增加或删除行，删除单行或删除多行）

    <template> <div class="app-container"> <div class="filter-container&qu ...

  10. Arch i3wm

    pacman -S i3-gaps i3blocks i3status dmenu xprofile设置 nano /home/user/,xprofile export LANG=zh_CN.UTF ...