ASP.NET开发，使用Echaets插件，连接sql server数据库，动态显示柱状图

第一步：引用插件

              <script src="../H-UI/lib/jquery/1.9.1/jquery.min.js"></script>
              <script src="../echarts/echarts.js"></script>

第二步：<div id="chartContainer1" ></div>

第三步：在Text.aspx页面，通过ajax获取后台数据

<script>

 $(document).ready(function () {
            // 使用Ajax从后端获取数据
            $.ajax({
                url: 'Text.aspx/GetData',  // 后端页面的URL
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    // 数据获取成功后，使用ECharts绘制柱状图
                    var chartContainer1 = document.getElementById('chartContainer1');
                    var chart = echarts.init(chartContainer1);

                    // 解析从后端获取的数据
                    var data = JSON.parse(response.d);

                    // 配置柱状图
                    var options = {
                        title: {
                            text: 'XXX信息',
                            subtext: 'XXX information',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                //控制是否出现数据视图
                                dataView: {
                                    show: true,
                                    readOnly: false
                                },
                                magicType: {
                                    show: true,
                                    //控制是否出现切换折线图和柱状图
                                    type: ['line', 'bar']
                                },
                                //还原按钮配置项
                                restore: { show: true },
                                //保存为图片配置项
                                saveAsImage: { show: true }
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            data: data.xAxisData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            type: 'bar',
                            data: data.seriesData,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            color: 'rgb(10, 199, 202)'
                        }]
                    };

                    // 设置柱状图配置并渲染
                    chart.setOption(options);
                },
                error: function () {
                    console.log('Failed to retrieve data from the backend.');
                }
            });
        });

</script>

第四步：在Text.aspx.cs后端页面，将数据转换为JSON字符串并返回给前端

[WebMethod] 
        public static string GetData()
        {
            // 连接到数据库并查询数据
            string connectionString = WebConfigurationManager.ConnectionStrings["Test1"].ConnectionString;
            string query = "select T2NAME,NUM1 from RM";

            List<string> xAxisData = new List<string>();
            List<int> seriesData = new List<int>();

            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                using (SqlCommand command = new SqlCommand(query, connection))
                {
                    connection.Open();
                    SqlDataReader reader = command.ExecuteReader();

                    while (reader.Read())
                    {
                        xAxisData.Add(reader["T2NAME"].ToString());
                        seriesData.Add(Convert.ToInt32(reader["NUM1"]));
                    }

                    reader.Close();
                }
            }

            // 构建包含x轴和系列数据的对象
            var data = new { xAxisData = xAxisData, seriesData = seriesData };

            // 将数据转换为JSON字符串并返回给前端
            return Newtonsoft.Json.JsonConvert.SerializeObject(data);
        }

第五步：在Web.config页面，连接数据库，这也是重要的一点

<connectionStrings>
    <add name="Test1" connectionString="Data Source=服务器;Initial Catalog=服务器名称;Persist Security Info=True;User ID=账号;Password=密码;" providerName="System.Data.SqlClient" />
  </connectionStrings>