(一) 使用工具 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. 表单传参，在action中的参数得不到

    写上面这个的时候,发现传过去的url路径是这样的 在action后面的pro=login得不到. 只需要将method中的get改成post就可以了

  2. java 继承、重载、重写与多态

    首先是java 继承.重载和重写的概念 继承: 继承的作用在于代码的复用.由于继承意味着父类的所有方法亦可在子类中使用,所以发给父类的消息亦可发给衍生类.如果Person类中有一个eat方法,那么St ...

  3. chrome添加扩展程序

    example: chrome添加vue devtools 扩展程序 打开地址:https://chrome-extension-downloader.com/ download extension: ...

  4. Zynq系列程序逻辑固化方法

    1.创建一个BOOT镜像 该小节主要讲述zynq平台利用软件套件SDK创建一个可固化BOOT镜像. 1.1  选择Ad9361_Eque1工程,选择Xilinx Tools → Create Boot ...

  5. tuxedo 提供buildserver命令编译服务器进程

    转自:http://blog.sina.com.cn/s/blog_5413cc0f0100nbgc.html 事实上buildserver只完成预编译,它会调用当前操作系统中已经安装的默认C编译器来 ...

  6. python笔记2——关于列表的使用

      一.列表的一些基本用法 names=["XiaoNaiyou", "XiaoNan", "WeiZhen", "WuCheng ...

  7. 如何开发NPM包

    创建包目录 D:\>mkdir mypackage && cd mypackage D:\mypackage>npm init --yes 进入mypackage目录,你会 ...

  8. 2018-计算机系机试（第二批）-C-数字字符个数

    C. 数字字符个数 单点时限: 1.0 sec 内存限制: 256 MB 输入一行信息,输出其中包含的数字字符个数. 例如:输入 a<4 >w,输出 1 . 输入格式 一行字符串 (可能含 ...

  9. DatePickerAndroid用法

    一.代码/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import ...

  10. PHP博大精深，入门容易，精通难，怎么才能真正学好PHP

    基础最重要  (1)熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作完整的网页,对元素属性达到熟悉程度  (2)理解动态语言的概念,运做机制,熟悉PHP语法  (3)学习如何将PHP与HT ...