echarts ajax调用数据显示问题 option.data.length<1 报错

网上搜到的某大神解决方案:

折腾了一天,原来是ajax调用数据再还回时的时间,要落后于echarts画图开始的时间,所以导致有时图像能够显示,有时不能够显示,要纠正这个错误,我是把echarts画图的代码,放到了ajax 的success函数里,即,等数据调回来处理完成后,再进行画图,这样就避免了数据不存在的问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现echarts数据库动态获取数据的功能,可以通过以下步骤进行操作: 1. 创建一个包含饼图的HTML页面。可以使用Echarts官方提供的CDN链接引入echarts库。 2. 在页面中创建一个包含饼图的div元素,指定一个唯一的id,用于将图表渲染到该div中。 3. 编写JavaScript代码。首先,使用ajax或fetch等方法向后端发送请求,获取数据库中的数据。可以使用XMLHttpRequest对象或是现代的Fetch API。 4. 在请求成功的回调函数中,将获取到的数据进行处理,以符合echarts饼图指定的数据格式。通常需要将数据转换为一个数组,数组中每个元素包含name和value属性,分别表示饼图的每一块的名称和数值。 5. 创建echarts实例,并配置饼图的相关参数。可以设置饼图的标题、图例、颜色等样式。 6. 将处理后的数据传入到echarts实例中,通过setOption方法设置饼图的数据。 7. 最后,调用echarts实例的方法将图表渲染到指定的div元素中。 示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts饼图动态获取数据示例</title> <!-- 引入Echarts库 --> <script src="https://cdn.staticfile.org/echarts/5.0.0/echarts.min.js"></script> </head> <body> <div id="pieChart" style="width: 600px; height: 400px;"></div> </body> <script> // 使用ajax请求后端数据 var xhr = new XMLHttpRequest(); xhr.open("GET", "后端API地址", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); // 数据处理 var pieData = []; for (var i = 0; i < data.length; i++) { var item = {}; item.name = data[i].name; item.value = data[i].value; pieData.push(item); } // 创建echarts实例 var pieChart = echarts.init(document.getElementById("pieChart")); // 配置饼图参数 var option = { title: { text: '动态获取数据饼图示例' }, series: [{ type: 'pie', data: pieData }] }; // 设置饼图数据 pieChart.setOption(option); } } xhr.send(); </script> </html> ``` 需要注意的是,示例代码仅给出了基本的动态获取数据并展示饼图的逻辑。具体的后端API地址、数据处理逻辑以及样式调整等,需要根据实际情况进行适配和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值