这篇文章主要介绍了解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新；
2.解决办法：
数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLine()函数，发现视图更新了，完美解决。
补充知识：vue echarts line动态刷新数据组件
我就废话不多说了，大家还是直接看代码吧~
<div class="echartLine-wrap"> <div class="echartLine-title"> <div class="text"> <div>{{echartData.title}}</div><div>{{echartData.title2}}</div><div>{{echartData.title3}}</div></div></div><div id="myChart"></div></div> .line-html { width: 83.5px; height: 38px; text-align: center; background: url("../assets/line_btn_bj.png-600") no-repeat; background-size: 83.5px 38px; line-height: 42px; box-sizing: border-box; position: relative; font-size: 9px; padding-right: 2px; box-sizing: border-box; .active { width: 5px; height: 5px; border-radius: 50%; background: #fff; display: inline-block; margin-left: 3px; mar<em>本文来源gao.dai.ma.com搞@代*码(网$</em>gin-bottom: 1.5px; box-sizing: border-box; } > span:nth-child(3) { background: url("../assets/time_bj.png-600") no-repeat; background-size: 38.5px 14px; position: absolute; top: -5px; left: 23px; right: 0; bottom: 0; box-sizing: border-box; } > span:nth-child(4) { position: absolute; top: -19px; left: 2px; right: 2px; bottom: 0; font-size: 8px; box-sizing: border-box; } } .echartLine-wrap { width: 100%; height: 100%; .echartLine-title { width: 100%; color: #fff; display: flex; flex-direction: row; justify-content: start; align-items: center; padding-bottom: 13px; > img { width: 7.5px; height: 14px; margin-right: 8.5px; box-sizing: border-box; } > .text { text-align: left; display: flex; flex-direction: row; justify-content: start; font-size: 12px; line-height: 1; align-items: baseline; > div:nth-child(2) { font-size: 15px; margin: 0 5px 0 10px; font-weight: bold; box-sizing: border-box; } } } #myChart { width: 100%; height: 165px; } }
调用
//html //index.js echartData: { title: "溶氧", title2: 3, title3: "毫克/升", XData: [1,2,3,4,5,6,7,8,9], YData: [12,34,56,66,65,77,12,11,33,44], areaStyleColor: { fromColor: "#1AB8F9", toColor: "rgba(63,227,236,0.1)" }, itemStyle: { color: "#1AB8F9" } }
以上这篇解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
转载请注明原文链接：解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
