Echarts树状图节点-第一次加载图片不显示的问题解决

问题

用echarts实现一个树状图，节点图标使用本地图片。第一次加载却不显示，每次点击节点也不显示。

原因

未知，可能是echarts内部bug，待研究，有收获了再来更新。

解决

1.预加载好图片

`

data () {
  return {
    testImg: require('../../../assets/test.png')
  }
}

`

2.第一次加载调用 resize() 改变图表大小方法

3.节点点击事件，每次都调用resize()方法

`

  methods:{
    init () {
      var myChart = echarts.init(document.getElementById("main"));
      var data = {...};
      
      //节点的点击事件，每次都调用resize()方法
      myChart.on('click', () => {
        myChart.resize()
      })
      
      myChart.hideLoading();
      echarts.util.each(data.children, function (data, index) {
        index % 1 === 0 && (data.collapsed = true);
      });
      var option = {...}
      myChart.setOption(option);
      
      // 在首次加载图表后 手动调用一次 resize() 改变图表大小 方法 
      myChart.resize()
    }
  }

`

思路

改变屏幕大小后，图片可以显示出来，于是调用resize()。

然而每次点击的时候都会面临首次加载不显示的问题，于是点击事件里也调用resize()。

以上。