echarts图在小程序中显示偶尔会样式错乱

Question

小程序中引用echarts图表,会样式错乱,审查有宽高

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这是小程序配置文件
function initChart(canvas, width, height) {
// var that = this
console.log(this)
chart = echarts.init(canvas, null, {

width: width,
height: height

});
canvas.setChart(chart);
var xData = ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
var colorList = ['#218BEE', '#FE6C52']
var data = {

意向客户: that.data.callrate,
接通率: that.data.iclvelCount

}
let option = {

tooltip: { //鼠标移入弹出提示
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  //弹出格式自定义   formatter:(params)=>{}
},
legend: {
  x: 'left',
  data: Object.keys(data)
},
grid: {
  left: '10%',
  right: '1%',
},
xAxis: {
  data: xData,
  axisLabel: {
    inside: false,
    textStyle: {
      color: "#000"
    }
  },
  axisTick: {
    show: false
  },
  splitLine: { //切割线
    show: false,
    lineStyle: {
      color: '#ccc'
    }
  },
  axisLine: { //周线
    show: false,
    lineStyle: {
      color: '#ccc'
    }
  },
},
yAxis: {
  axisLine: {
    show: false,
    lineStyle: {
      color: '#ccc'
    }
  },
  splitLine: {
    show: false
  },
  axisTick: {
    show: false
  },
  axisLabel: {
    textStyle: {
      color: "#999"
    }
  }
},
series: [
  {
    type: "bar",
    name: '意向客户',
    barWidth: 6, //宽度
    data: data['意向客户']
  },
  {
    type: 'bar',
    name:'接通率',
    barWidth: 6, //宽度
    data: data['接通率']
  }
],
color: colorList

}

chart.setOption(option);
return chart;
}
data里面初始化

ec: {
  onInit: initChart
}

这是wxml
<view class="echarts" wx:if="{{isEcharts}}">

<ec-canvas id='mychart-dom-bar' canvas-id="mychart-bar" ec="{{ ec }}" style='width: 100%;height: 100%;'></ec-canvas>

</view>

你期待的结果是什么？实际看到的错误信息又是什么？

描述][2