asp.net+echarts+ajax 简单demo

最新推荐文章于 2023-11-08 13:55:16 发布

铭仔

最新推荐文章于 2023-11-08 13:55:16 发布

阅读量586

点赞数

分类专栏： asp.net

本文链接：https://blog.csdn.net/u010486325/article/details/103185623

版权

asp.net 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="echartstest.aspx.cs" Inherits="ModuleWorkFlow.test.echartstest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    </form>

    
</body>

<script type="text/javascript"  src="jquery.js"></script>
  
<script type="text/javascript" >


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
    // 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });
 
   

   
   
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //销量数组（实际用来盛放Y坐标值）


              $.ajax({
                  type: "post",
                  async: false,         
                  url: "echartstest.aspx/showechart",
                  contentType: "application/json; charset=utf-8",
                  data: {},
                  dataType: "json",     
                  success: function (result) {

                      if (result) {
                          var dataObj = eval('(' + result.d + ')'); 

                          $.each(dataObj, function (index, obj) {
                              names.push(obj.Name);
                              nums.push(obj.Id);
                              //alert(obj.Id);
                              //alert(obj.Name);

                        
                          });

 // 使用刚指定的配置项和数据显示图表。
                          myChart.setOption({
                              xAxis: {
                                  data: names
                              },//加载数据图表
                              series: [{
                                  // 根据名字对应到相应的系列
                                  name: '销量',
                                  type: 'bar',
                                  data: nums
                              }]
                          });
                      }
                     
                     // myChart.setOption(option);
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown) {
                      alert(XMLHttpRequest.status);
                      alert(XMLHttpRequest.readyState);
                      alert(textStatus);
                  }
              })
    </script>
</html>

后端代码：

using ModuleWorkFlow.Model.System;
using Newtonsoft.Json;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;



namespace ModuleWorkFlow.test
{
    public partial class echartstest : System.Web.UI.Page
    {
     
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public  static string  showechart()
        {
            IList list = new ArrayList();
            BrokenReasonInfo bi = new BrokenReasonInfo();
            bi.Name = "ceshi";
            bi.Id = 1;
            
            list.Add(bi);
            bi = new BrokenReasonInfo();

            bi.Name = "test";
            bi.Id = 2;

            list.Add(bi);



            return   JsonConvert.SerializeObject(list);
         
        }
    }
}

显示效果：

在这里插入图片描述

铭仔

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
asp.net+echarts+ajax 简单demo

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫