echarts画图时折线点渲染不上去

已于 2022-11-22 11:10:54 修改
阅读量588 收藏
点赞数
文章标签： echarts 前端 javascript
于 2022-11-14 15:57:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liugaoyuans/article/details/127848761
版权

CSDNhttps://mp.csdn.net/mp_blog/creation/editor/127746841有echarts画图数据写死都没出来的可以看看这篇文章

先看问题：在使用echarts画折线统计图的时候，数据一开始是写死的，先把折线图的效果做出来，再把接口数据渲染上去，但是看下面

 横纵坐标已经从后台接口拿到了，并渲染上去了，折线点也从后台拿到了是数组，但是可以看到页面上点并没有被渲染上去，就这个错误，困扰我好久，现在看问题根本原因

先看一下打印，从后台拿到的数组，打印再页面上是不是和写死的数据一模一样，但这只是表象

 

因为从后台接口拿到的是一整个对象，是字符串类型，所以需要转换为数组才有效

 

 成果

小雄芯
关注
echarts 折线图渲染到页面
仲广绪的博客
04-25 932
#main { width:100%; height:500px; } 页面 <div id=“main"></div> js ## **这是我根据自己需求写的，使用的时候需要修改一些地方** var date = []; //日期 var number = []; //数量 var names...
vue中使用echarts画图之鼠标移入删除重绘
m0_38081413的博客
12-17 1485
当用echarts画图的时候，有时候需要在echart画出的canvas上面做二次操作，如鼠标移入的时候删除该列，然后再重新展示删除后的数据，比如柱状图，要取得每一个柱状的具体位置和宽度，具体如下： 一、根据数据绘制图形 drawCanvas(server){ let _this = this; let echarts = require('echarts'); ...
echarts初次渲染出不来效果
youshuang1207的博客
03-28 2480
解决echarts获取数据不渲染的问题
Vivien_CC的博客
09-22 7703
本菜鸟第一次接到echarts的需求，就搞了整整一天，需求是这样的：①单线图表，只有一个系列。②多线图表，根据返回的数据系列生成不同的折现，形成一个堆叠折线图。③选单天的话，那么就以24小时为横坐标；如果是选择了一段时间，那么这个时间范围就以天为单位作为横坐标。于是乎，请求接口数据花了五分钟，调试问题七小时属于是，这个过程中，有异步的问题、监听外部切换时间范围的问题、刷新数据时要先初始化原来的数据的问题，数据对应的问题等等。好记性不如烂笔头，在此简单记录一下吧。
(echarts)vue中循环生成多个相同的echarts图表，但数据动态、第一次渲染失败问题
最新发布
nyf_unknow的博客
03-28 863
【代码】(echarts)vue中循环生成多个相同的echarts图表，但数据动态。
echarts初次渲染不出来
u014788505的博客
09-17 4155
// 解决数据初始渲染不出来的问题 setTimeout(()=>{ this.initChart() },1000)
百度画图echarts
01-06
ECharts支持多种图表类型，包括折线图、柱状图、饼图、散点图、K线图等，同时也提供了丰富的自定义选项，可以满足各种复杂的数据展示需求。 ECharts的特点在于其易用性、高性能和良好的兼容性。它使用简单，通过...
Layer+Echarts构建弹出层折线图
热门推荐
vili_sky的博客
12-22 3万+
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。 ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。 现在使用Layer和Echarts构建弹出层折线图。
echarts文档入门知识点
weixin_43803387的博客
03-01 2237
目录 一、数据可视化 二、Echarts总描述 三、Echarts可视化步骤 ## 文档怎么看 一、数据可视化 相关可视化工具有：Matlab Echarts D3.js Pathon语言相关可视化库 R语言相关可视化库 Highcharts...... 二、Echarts总描述 echart是可视化工具，提供很多可视化库，个人和商用免费。不仅支持key-value键值对存储数据，还支持TypeArray格式数据。同时可以通过下载GL插件制作更加绚丽的三维可视化图表。 支持ca.
echarts-demo
04-09
3. **良好的性能**：ECharts 使用Canvas作为渲染引擎，对大数据量的处理表现出色，同时优化了渲染效率，确保在大规模数据下仍能流畅运行。 4. **灵活定制**：ECharts 允许开发者自定义每个图表的样式，包括颜色、...
解决echarts数据二次渲染不成功的问题
11-20
最近在使用echarts做报表需求，二次生成报表时数据合并,无法正确显示。 第一次渲染： 第二次渲染： 可以看到这里的echarts项的series变为2个(如上图)，但是渲染后的效果series项还是和第一次相同。 解决办法： 应该设置mychart.setoption({},true); 原因： chart.setOption(option,notMerge,lazyUpdate); option:图表的配置项和数据 notMerge:可选，是否不跟之前设置的option进行合并，默认为false，即合并。（这里是导致二次渲染不成功的根本） lazyUpdate:可选，在设置完
echarts折线图数据更新后 不重新渲染
w_ziShan的博客
09-30 1526
echarts折线图
echarts折线图最后一位不显示的问题及重影问题
Wuxingli2的博客
04-04 6915
1、echarts折线图最后一位无法显示数据的问题，将xAxis:  boundaryGap: false,改成true就解决了。2、在某些安卓盒子上使用echarts会有重影的问题，将animation改为false就可以了...
echarts在vue项目中引用初次加载会报错,重新加载则正常显示折线图
liugaoyuans的博客
11-08 1055
显示错误Cannot read properties of undefined (reading 'getAttribute')
启动项目时，echarts渲染失败，在created，mounted，updated中。
weixin_48606973的博客
06-09 1041
用echarts做报表的时候，只能通过按钮的形式启动报表。无论把echarts.init放在created，mounted还是updated中都无法完成自启动。echart报错:TypeError: Cannot read properties of null (reading ‘getAttribute‘)“数据undefined等等报错。 附上完整代码：...
vue使用echarts时created里拿到的数据无法渲染问题
前端成长之路
07-19 3664
**问题描述:在vue里使用echart时，created里请求的数据，但是却无法渲染；** **原因分析：** 通过vue插件调试，数据确实已经拿到了，但是却无法渲染，数据拿到，但是无法渲染，推断应该是执行顺序出了问题，获取的数据在渲染之后才拿到的。 **初步怀疑是await的问题**，加入验证代码测试一下...
关于 echarts 渲染不成功， 但是刷新后渲染成功的问题
Undaunted‘s Blog
05-09 1209
写了四个echarts , 发现第一次打开没问题，但是从其他页面跳转过来就有问题了，只显示一个，后三个都显示不了，但是刷新后又没问题了。
Echars 动态生成数据与为0的数据不显示(折线图)
cocosum
09-12 9314
1、贴个效果图 2、讲个 自己的小思路: 准备自己统计的数据: 如下图(代码很简单): // 首先我们需要一个data // data里面需要什么数据？ // 1、每日的日期 2、每日日期对应的商品名称 3、每日日期对应的商品名称销售总数量 // 比如: // goodsName days count // 老干妈 ...
Vue 用 echarts画图时tooltip.formatter参数params不会更新
05-13
在 Vue 中使用 Echarts 时，如果遇到tooltip不更新的问题，可以检查以下几个方面： 1. 确认数据已经更新 首先要确定数据已经更新，这可以通过打印或者在页面上显示数据进行确认。 2. 确认tooltip.formatter中的params参数 在tooltip.formatter中，params参数是一个数组，它包含了当前图表的数据。如果params没有更新，则可能是因为params没有正确的绑定到Vue的数据上。可以使用Vue的watch属性来监听数据的变化，然后手动更新params参数。 3. 使用Vue的ref属性 使用Vue的ref属性来获取图表实例，然后通过实例来更新tooltip.formatter的params参数。在mounted生命周期钩子函数中，可以获取到实例，然后在数据更新之后，手动调用实例的setOption方法来更新图表。 ``` <template> <div ref="chart" style="width: 100%; height: 100%;"></div> </template> <script> import echarts from 'echarts'; export default { name: 'EchartsDemo', data() { return { chartData: [], }; }, mounted() { this.chart = echarts.init(this.$refs.chart); this.chart.setOption(this.getOption()); }, methods: { getOption() { return { tooltip: { trigger: 'axis', formatter: (params) => { return `x:${params[0].value[0]} y:${params[0].value[1]}`; }, }, series: [ { type: 'scatter', data: this.chartData, }, ], }; }, updateChartData() { // 更新数据 this.chartData = [ [1,2], [2,3], [3,4] ]; // 手动更新tooltip.formatter中的params参数 this.chart.setOption({ tooltip: { formatter: (params) => { return `x:${params[0].value[0]} y:${params[0].value[1]}`; }, }, series: [ { type: 'scatter', data: this.chartData, }, ], }); }, }, }; </script> ``` 以上是一些可能的解决方案，如果还不能解决问题，可以提供更多的信息以便进一步排查。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值