Echarts学习(2)后端ajax传入数据

echarts的官网中给出的例子大多是直接在option中赋值,而网页或者其他形式的echarts需要动态获取后端数据。这时ajax传值就显得非常重要了。
我想做一个横轴是月份,纵轴为每月用水量的折线图,需要的数据是数据库用水记录表中该用水单位十二个月份的用水量数据,这在数据库中正好是一条记录,所以我需要解决的第一个问题是:后端读取数据库中的一行数据并将数据封装成数组的形式。我首先尝试的方案是,将该行数据读取到dataset里,再将dataset转成json格式传给前端,结果前端可以get到数值,但是图表不显示数据,原因在于在dataset里这行数据仍然是以一条记录的形式存在,以json格式传到前端,解析之后得到的是一个多维数组,每个维度里存放一个数据,这样的数据对于echarts比较难应用。于是我就用非常笨拙的方法将读到的结果放在一个一维数组中,然后把数组转json,前端解析json后,将数组中的每个值压入数据栈中。

 url: "DataToArray.ashx",
            dataType: "text", //返回数据形式为json
            success: function (results) {
                
                  
                results = JSON.parse(results);
               
               
                for (var i = 0; i < results.length/2; i++)
                {
              
                    data1.push(results[i]),
                        data2.push(results[i+12]),
                    //xAxisData.push((i+1)+"月")
                }
                                  部分代码展示(ajax)
  SqlConnection conn = SQLHelper.MyConnection();
                SqlCommand cmd = new SqlCommand(sql, conn);
                conn.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                string[] a = new string[24];
                while (reader.Read())
                {

                    a[0] = reader["一月实际用水量"].ToString().Trim();
                    a[1] = reader["二月实际用水量"].ToString().Trim();
                    a[2] = reader["三月实际用水量"].ToString().Trim();
                    a[3] = reader["四月实际用水量"].ToString().Trim();
                    a[4] = reader["五月实际用水量"].ToString().Trim();
                    a[5] = reader["六月实际用水量"].ToString().Trim();
                    a[6] = reader["七月实际用水量"].ToString().Trim();
                    a[7] = reader["八月实际用水量"].ToString().Trim();
                    a[8] = reader["九月实际用水量"].ToString().Trim();
                    a[9] = reader["十月实际用水量"].ToString().Trim();
                    a[10] = reader["十一月实际用水量"].ToString().Trim();
                    a[11] = reader["十二月实际用水量"].ToString().Trim();
                    a[12] = reader["一月计划用水量"].ToString().Trim();
                    a[13] = reader["二月计划用水量"].ToString().Trim();
                    a[14] = reader["三月计划用水量"].ToString().Trim();
                    a[15] = reader["四月计划用水量"].ToString().Trim();
                    a[16] = reader["五月计划用水量"].ToString().Trim();
                    a[17] = reader["六月计划用水量"].ToString().Trim();
                    a[18] = reader["七月计划用水量"].ToString().Trim();
                    a[19] = reader["八月计划用水量"].ToString().Trim();
                    a[20] = reader["九月计划用水量"].ToString().Trim();
                    a[21] = reader["十月计划用水量"].ToString().Trim();
                    a[22] = reader["十一月计划用水量"].ToString().Trim();
                    a[23] = reader["十二月计划用水量"].ToString().Trim();

                }
                JavaScriptSerializer ser = new JavaScriptSerializer();
                String jsonStr = ser.Serialize(a);
                context.Response.Write(jsonStr);
                         笨拙的转数组的方法(后端C#)
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Echarts是一款强大的数据可视化工具,可以通过获取后端数据并展示在前端页面上。要实现这个功能,需要先建立前后端数据输通道,可以通过RESTful API或者WebSocket来实现。 首先,在后端编写API接口,用于提供数据前端。可以使用Python的Flask或Django框架建立一个API服务,通过数据库查询或其他方式获取数据,并以JSON格式返回给前端。例如,可以编写一个GET请求的API接口,前端通过请求该接口获取数据。 接下来,在前端页面中使用Echarts组件来展示数据。可以使用引入Echarts的JavaScript库,在页面中创建一个容器元素,并设置其大小和位置。然后,通过发送HTTP请求给后端API接口,获取数据并解析。将解析后的数据赋值给Echarts的配置项,包含数据的类型、样式、坐标轴等,然后将配置项传入Echarts实例中,并将实例渲染在页面的容器元素中。 在数据成功加载并展示在页面上后,还可以根据需要进行细节的优化和交互的设计。比如,可以添加图例、渐变色、动画效果,以及鼠标悬停时的提示信息等等,从而使得数据展示更加直观和易于理解。 总结来说,利用Echarts获取后端数据展示的过程包括建立前后端数据输通道、编写API接口、在前端页面中使用Echarts组件展示数据。通过这一过程,我们可以将后端数据可视化展示在前端页面上,使得数据更加直观和易于理解。 ### 回答2: Echarts是一个基于JavaScript的数据可视化库,通过它可以实现各种形式的图表展示。要获取后端数据展示,可以按照以下步骤进行操作: 1. 前端页面准备:首先,在HTML页面中引入Echarts的库文件和相关样式文件。 2. 发送Ajax请求获取后端数据:通过使用JavaScript的Ajax技术,向后端发送请求获取数据。可以使用XMLHttpRequest对象或者jQuery的Ajax函数来实现。 3. 处理后端返回的数据:在Ajax请求的回调函数中,对获取到的后端数据进行处理。通常可以将数据转化为JSON格式,以便后续使用。 4. 数据可视化:利用Echarts的相关API,将处理后的数据进行图表展示。可以根据需求选择不同类型的图表,如折线图、柱状图、饼图等。 5. 图表配置和绘制:在展示图表之前,可以对图表进行一些配置,如设置图表的标题、坐标轴、图例等。然后,调用Echarts的绘制函数将图表显示在页面上。 6. 动态更新:如果后端数据需要实时更新,可以设置定时器或者使用WebSocket技术进行数据推送,然后通过相应的事件监听和数据更新函数来实现图表的动态更新。 综上所述,通过以上步骤,可以使用Echarts获取后端数据,并将数据以图表的形式展示在前端页面中,实现数据的可视化展示。 ### 回答3: ECharts是一款优秀的用于数据可视化的JavaScript图表库,它可以用来展示后端数据。使用ECharts获取后端数据展示需要以下步骤: 1. 发送数据请求:使用JavaScript中的AJAX、Fetch等技术,向后端发送数据请求,获取需要展示的数据。这些数据可以是后端接口返回的JSON、XML或其他格式。 2. 解析数据:接收到后端返回的数据后,进行数据解析,将数据转换为ECharts所需的格式。ECharts支持多种数据格式,如数组、对象等。 3. 初始化图表:在HTML页面中创建一个div元素,用于展示ECharts图表。使用JavaScript代码,将图表初始化为ECharts实例,传入div元素和配置项。 4. 配置图表:在配置项中定义图表的类型、标题、轴、系列等属性,根据需要进行自定义配置。通过配置项,可以决定图表的外观和交互行为。 5. 渲染图表:将解析后的数据和配置项传入ECharts实例的setOption方法中,生成最终的图表。图表将根据数据和配置项进行渲染,呈现出来。 6. 响应式布局:根据需要,可以使用ECharts提供的响应式布局功能,使图表可以根据不同的屏幕大小自适应调整。 通过以上步骤,我们可以轻松地使用ECharts后端获取数据并展示出来。ECharts提供了丰富的图表类型和灵活的配置选项,可以根据需求展示各种各样的数据可视化效果,为数据分析和决策提供有力的支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值