echarts循环饼图，渲染数据出不来

最新推荐文章于 2024-02-22 15:01:25 发布
最新推荐文章于 2024-02-22 15:01:25 发布
阅读量687 收藏 1
点赞数 1
分类专栏： echarts 文章标签： vue.js elementui echarts Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76882889/article/details/129626682
版权

问题：echarts循环渲染饼图，调取接口，渲染数据，饼图出不来

原因：再绘制echarts时候，循环渲染echarts图表时候，出现了bug，是因为var会造成变量提升，虽然再打印roseCharts时候有数据，但是其实没有数据

解决：再循环图表时候，将这一段代码放到定时器中，数据就可以正常渲染出来了

最终样式呈现

^草莓牛乳茶^
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts制作饼图使用ajax传入字典数据饼图不显示
weixin_42074867的博客
04-20 229
传入的参数data_get需要格式如下所示，series的data_get需要是几个key为name、value的字典组成，categorie是一个列表装着所有类别即可。ajax传入参数的格式跟html中echarts写的格式不一致，导致格式不匹配从而不显示，生成类似下述饼图需要传入的参数如下。
echarts 3d饼图资源
05-12
echarts 3d饼图资源
echarts一个div二次渲染数据出现无法渲染问题
qq_42462993的博客
09-01 551
echarts一个div二次渲染数据出现无法渲染问题
ECharts 图表渲染问题图表显示不出来
yingzi__shadow的博客
01-08 2520
2.echarts组件没导入，新版echarts导入有import echarts from 'echarts' 变成import * as echarts from 'echarts'但使用方法不变。3.在create中给数据赋值在mounted()中调用，由于异步请求的原因，可能在调用方法之前，数据还没有填充完全。所以可以在create()赋值完之后调用渲染图像方法。1.显示框（图标显示区域）没设置大小。
ECharts在JAVA WEB中饼图出不来
Knight_Key的博客
11-27 1269
如下图所示，一套操作好了，饼图出不来： 代码如下： var option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' ...
echart动态获取数据不显示
weixin_30251587的博客
05-14 1500
当时写完echart,然后当模拟数据动态显示的时候,把里面的data直接替换成获取回来的数据不显示,后来发现是当页面初始加载的时候就已经取数据了且只取一次,所以就用了一个watch监视,监视变化需要在重新渲染,但是发现一直在发送请求,所以后来就在获取数据之后再创建echart示例就好了呀,代码如下 drawLine() { getLine(this.lineQuery).the...
echarts 3D饼图组件
09-26
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} ...
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
Echarts饼图之数据展示
01-08
Echarts饼图之数据展示 1、组件简介 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形...
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现...
用echarts做饼状图 显示不出来
junj5n的专栏
08-18 8688
在引入Js正确的时候，有可能是id为main的那个 容器没有定义宽和高
v2项目引入echarts并渲染数据，以及解决数据渲染不出来的问题
nxniiii的博客
04-18 361
调后台接口获取到数据赋值给页面需要的list和push进图表需要的数据sex里；2、页面import * as echarts from "echarts";我这里赋值时页面图表数据没有渲染出来，加了个定时器解决。定义图表、初始化、赋值；1、npm i下载echarts。
【已解决】Echarts饼图数据动态渲染无法显示
weixin_44135909的博客
05-17 1772
草稿
echarts vue图表加载动态数据 vue 数据加载完了,数据没有显示问题
liufuling14的博客
08-12 2495
记录一下遇到的问题： 使用echarts +vue 的时候。遇到后台请求的数据 没有别获取拿到。 原因是图表先已经被加载了，vue里 data 默认初始化的数据是[]的，这个时候，后台请求方法还没有将值初始化给data列表里。 第一次加载肯定是拿到空的内容。 比较粗暴的方法。 在生命周期里，使用setTimeout() 等待500毫秒，让然后就可以获取后台数据。图表就能正常加载。 mounted () { // this.drawLine(); // this.getLis
echarts 首次加载不显示问题
weixin_41480836的博客
06-27 1708
let chartDom = document.getElementById('main_1') var myChart1 = echarts.init(document.getElementById('main_1') as HTMLElement); (chartDom as HTMLElement).removeAttribute('_echarts_instance_');初始化时 给dom加上删除这个元素
echarts series中的data属性添加动态数据后不显示问题，一处儿异步细节问题
最新发布
weixin_57237676的博客
02-22 931
当从后端获取到数据后，发现饼图并没有顺利加载数据出来，使用console.log()测试先后执行顺序，会发现饼图的方法会比请求先执行。此时就可以把饼图的方法放入到请求执行结束后。一处儿异步的细节问题，注意一下就好了。
vue echarts饼图封装以及同一个组件2个饼图不加载问题解决
日光之下的博客
12-16 2380
0 环境 系统：win10 前端框架：vue 前端IDE：vscode 1 饼图封装 1 安装echarts npm install echarts --save 2 查看是否安装成功 文件查看 界面查看(win+r --> 输入cmd --> 输入vue ui 等待启动) 3 在main.js中引入echarts import echarts from "echarts"; Vue.prototype.$echarts = echarts; 2 封装组件 1 新建子组
关于echart 饼图显示不出来 挖坑总结
热门推荐
旅途
07-08 2万+
关于echart 饼图显示不出来 挖坑总结 近来公司的移动端app，作业页面，从后台接口返回的是；老师布置一次作业的所有题目信息，在app页面除了展示题目信息之外，还需要统计A\B\C\D,正确\错误等各个选项的选择人数，并用echart饼图显示出来。 按照echart渲染数据的步骤，完成了图表展示的应有对的步骤，但是，饼图却一直没有显示出来，经过好久的折腾，终于找出了问题的出处。...
【ECharts系列】ECharts 图表渲染问题&解决方案
西门吹雪
07-07 1万+
echats 渲染，第一次的时候只出现Y轴数值，不出现X轴数值，切换下页面，X轴数值就能出现。
echarts年龄饼图_ECharts中饼图的操作
06-02
在 ECharts 中绘制饼图需要以下步骤： 1. 引入 ECharts 的 JavaScript 文件。 2. 在 HTML 中创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息，如标题、提示框等。 5. 配置饼图的数据和样式，如饼图的半径、颜色、标签等。 下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码中，我们使用 ECharts 的 `init` 方法初始化了一个图表，并使用 `setOption` 方法配置了饼图的基本信息和数据。其中，`series` 属性中的 `type` 属性指定了图表类型为饼图，`data` 属性指定了饼图的数据，`itemStyle` 属性指定了饼图的样式。 需要注意的是，上述代码中的 ECharts 版本为 5.1.2，如果你使用的是其他版本的 ECharts，可能会有些许差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值