位置: IT常识 - 正文
解决echarts获取数据不渲染的问题(echarts获取不到宽和高)
发布时间：2024-01-03推荐整理分享解决echarts获取数据不渲染的问题(echarts获取不到宽和高)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:echarts获取option并修改,echarts获取option,echarts获取option,echarts获取不到宽和高,echart获取当前区域的数据,echart获取当前区域的数据,echart获取当前区域的数据,echarts获取option,内容如对您有帮助，希望把文章链接给更多的朋友！
本菜鸟第一次接到echarts的需求，就搞了整整一天，需求是这样的：①单线图表，只有一个系列。②多线图表，根据返回的数据系列生成不同的折现，形成一个堆叠折线图。③选单天的话，那么就以24小时为横坐标；如果是选择了一段时间，那么这个时间范围就以天为单位作为横坐标。
于是乎，请求接口数据花了五分钟，调试问题七小时属于是，这个过程中，有异步的问题、监听外部切换时间范围的问题、刷新数据时要先初始化原来的数据的问题，数据对应的问题等等。
好记性不如烂笔头，在此简单记录一下吧。
踩坑与解决 一.首先是异步问题问题：
接口请求回来了数据，并且格式也已经全部处理成和死数据一样了，然而，死数据可以显示，接口请求回来的数据却一直不能挂到图表上去。最后才发现，每次都是先渲染了图表，我的数据才回来。
什么是异步请求和什么是同步请求？
1. 同步请求：客户端向服务端发送请求，服务端响应以后客户端才渲染页面 2. 异步请求：客户端向服务端发送请求，客户端不等服务端响应就行行页面渲染，一般做页面的局部刷新。
造成上面原因就是我的页面向服务端发送请求，页面不等服务端响应就已经渲染图表，尽管后面数据请求成功但此时页面已经渲染成功，页面此时只知道他所渲染图表时数据为空，所以不会显示数据。
最终用一个很不正规的方法解决了问题：
mounted () { setTimeout(() => { this.init() }, 500) }, 二.其次是外部时间范围切换，数据不会自动刷新的问题问题：
由于时间选择器写在父组件里面，图表放在子组件里面，我用 searchParams当props传进来，但是发现只有第一次打开才会渲染，后面再在外面切换时间范围，子组件的图表没变化，方法也没调用。
解决：
最终用watch解决，给图表的div加一个id，然后每次切换时间，就刷新图表。
注意：每次刷新都要把列表清空，不然会越push列表越长，图表越刷新越密集。
watch: { searchParams: { deep: true, immediate: true, handler () { this.dataList = [] this._getTrend() setTimeout(() => { this.init(document.getElementById('tendency_')) }, 500) } } },子组件中：
props: { searchParams: Object,}父组件中：
<tendency v-if="activeName=='vnode'" :search-params="searchParams"></tendency> searchParams: { startDate: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'), endDate: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') },小白狂踩坑系列
上一篇：ghoststarttrayapp.exe是什么进程 有什么作用 ghoststarttrayapp进程查询
下一篇：lorena.exe是什么进程 有什么用 lorena进程查询(rnbrcache.exe是什么意思)
