H5端引入echart 视图更新的大坑
1、主要是写移动端引入echart折线图重置数据的时候遇到的样式错乱的坑,效果图如下
2、项目是每次请求数据重置图表,以下会在代码列出错误的地方
//HTML部分
<div id="main" style="width:100%!important;"></div>
//JS部分
//在mounted初始化图表
myChart = echarts.init(document.getElementById('main'))
//窗口变化时候更新视图
window.onresize = function () {
myChart.resize()
}
//赋值图表数据,视图更新的坑就在于这个setOption的第二个参数 true,如果是在PC端,则没什么影响,但是如果在移动端,我是用了rem布局,引入了淘宝的flexible.js
myChart.setOption(this.optionGauge,true)
3、如果在移动端在初始化页面的时候,setOption可以传入第二个参数true,但是在重新赋值的时候不能写进这个参数,会导致视图样式错误,本来设置300的高度,重置数据后,比如我的如下:
4、myChart.setOption(this.optionGauge,true)中的true是更新视图层的作用,具体为啥会导致在移动端出现这种情况,小弟也不清楚,哪位大佬懂的话,提点一下 ,谢谢,希望能帮助到大伙!