ASP.NET——Echarts入门练习Demo1（简单柱形图）

效果：

官网：https://echarts.apache.org/zh/index.html

前端web：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo_1.aspx.cs" Inherits="WebApplication1.Demo_1" %>

<!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>Demo1</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        var ds = new Array();
        var dsdate = new Array();
        var myChart;

        //Ajax请求
        var getArrayByAjax = function () {
            var cnt = 0;
            $.ajax({
                url: "Demo_1.aspx/GetArray",
                type: "post",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    cnt = (data.d).length;
                    for (var i = 0; i < (data.d).length; i++) {
                        ds.push((data.d)[i]["name"]);
                        dsdate.push((data.d)[i]["count"]);
                    }                    

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: 'ECharts 入门练习Demo1'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: ds
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: dsdate
                        }]
                    };
                    myChart.hideLoading();  // 隐藏 loading 效果

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);                   

                },
                error: function (err) {
                    alert("error");
                }
            });
        }
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();  // 开启 loading 效果
            
            getArrayByAjax();

        });      

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="margin: 0 auto; text-align: center; 650px; height:450px;">
            <div id="main" style=" 600px; height: 400px;"></div>            
        </div>
    </form>
</body>
</html>

cs后台：

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 WebApplication1
{
    public partial class Demo_1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static List<Demo1> GetArray()
        {

            List<Demo1> arrList = new List<Demo1>();
            arrList.Add(new Demo1 { name = "衬衫",count = 10 });
            arrList.Add(new Demo1 { name = "T恤", count = 20 });
            arrList.Add(new Demo1 { name = "羊毛衣", count = 30 });
            arrList.Add(new Demo1 { name = "皮衣", count = 40 });
            arrList.Add(new Demo1 { name = "西装", count = 50 });
            arrList.Add(new Demo1 { name = "领带", count = 60 });
            arrList.Add(new Demo1 { name = "皮带", count = 70 });
            return arrList;
        }

    }

    public class Demo1 { 
        public string name { get; set; }
        public int count { get; set; }
    }

}

参考：https://www.runoob.com/echarts/echarts-setup.html

相关阅读:
vi错误terminal too wide解决方法
 怎么重启shell ubuntu
程序异常退出却没有产生core文件
 Linux执行shell脚本方式及区别&命令后台运行
 Linux C程序异常退出怎么办——core文件帮你忙
 Linux中生成Core Dump系统异常信息记录文件的教程
 Linux环境下段错误的产生原因及调试方法小结
 Linux core dump file详解
 putty工具常见设置
 Download PuTTY: latest development snapshot
原文地址：https://www.cnblogs.com/xiaoli9627/p/15124095.html