H5端引入echart 视图更新的大坑

H5端引入echart 视图更新的大坑

1、主要是写移动端引入echart折线图重置数据的时候遇到的样式错乱的坑,效果图如下
H5端引入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的高度,重置数据后,比如我的如下:
H5端引入echart 视图更新的大坑

4、myChart.setOption(this.optionGauge,true)中的true是更新视图层的作用,具体为啥会导致在移动端出现这种情况,小弟也不清楚,哪位大佬懂的话,提点一下 ,谢谢,希望能帮助到大伙!

上一篇:【微信小程序】使用echarts实现一个界面动态刷新多个柱状图


下一篇:创建echarts的基本模板