【ECharts】引入后页面不显示 切换数据后二次点击后视图才更新

页面引入echarts后，页面不显示echarts图

在mounted中添加定时器，延迟创建echarts
  mounted() {
    setTimeout(() => {
      this.getEchartData1();
      this.getEchartData2();
    }, 1000);
  },

时间可以再500-1500之间

添加定时器后即可使echarts找到dom，并渲染dom

echarts调用后端接口，点击下拉框切换数据后，点击第二次图表才更新

setTimeout和$nextTick在实际项目中的区别

最近做的大数据可视化需要通过切换城市，地图根据城市进行更新，按理说更新百度地图center的中心点经纬度即可，但是切换城市之后直接给center赋值，地图没有更新，可能是因为地图渲染慢的问题，我想应该要渲染完成后在赋值应该是可以的，于是想到了通过$nextTick再给center赋值

this.$nextTick(() => {

 this.center = this.$store.state.city.location;

});

这种方式的结果是还是不会马上更新，但是在页面比如敲以空格等重新保存一下页面，即再一次更新dom时才会更新，我觉得有点奇怪了，于是上网查了一下，官方说

nextTick：将回调延迟到下次DOM更新循环之后执行，实际以成都市大数据可视化中心为例，默认成都市，比如切换成长沙市，地图还是为成都市，再次切换城市为石家庄市，地图现在市长沙市的，总是会慢一步，这就是他执行回调时间的问题

最后我换成了setTimeout就可以了，给地图中心点center赋新值，地图会立即更新：

this.timeout = setTimeout(() => {

     this.center = this.$store.state.city.location;

}, 300);

setTimeout：将回调延迟到指定时间之后执行

nextTick和setTimeout两者回调执行的前提条件不相同

解决方法

  methods: {
    // echarts月/天切换
    echartsChange(data) {
      this.$nextTick(() => {
        const { value } = data;
        this.isMonth = value;
        this.getEchartData1();
        setTimeout(() => {
          this.getEchartData1();    //添加定时器，在调用接口后，再次重新执行echarts图所在的方法，数据即可及时更新
        }, 500);
      });
    },

窗口放大缩小echarts图标动态改变大小

关键代码

      window.addEventListener('resize', function() {
        myChart.resize();
      });

示例

//折线图    
getEchartData1() {
      // this.thisChart.clear();
      this.analyseData();
      var chartDom = document.getElementById('chartBox');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: this.echartsY
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.echartsX,
            type: 'line',
            lineStyle: {
              color: '#47b8ff' // 改变折线颜色
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let str = '<span>' + params[0].name + '</span><br/>';
            for (let i = 0; i < params.length; i++) {
              str += params[i].marker + '：<span style="float:right;font-weight:600">' + fmoney(params[i].value);
            }
            return str;
          }
        }
      };
      option && myChart.setOption(option, true);
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    },