美文网首页
vue和echarts同时使用问题

vue和echarts同时使用问题

作者: 一剑无血冯稀饭 | 来源:发表于2018-12-10 13:32 被阅读0次

    原始代码

    html部分

        <div id="app" style="height:550px;width:550px;">
          <div id="test" style="height:100%;width:100%"></div>
        </div>
    

    js部分

    var option= ... //你的配置
    $(document).ready(function() {
      Vue.prototype.$ajax = $.ajax;
      common = new Vue({
        el: '#app',
        data: { 
            chart: null
        },
        mounted() {},
        created: function () {
          this.chart = echarts.init(document.getElementById('test'))
          this.chart.setOption(option)
        },
        methods: {
          getData () {
           
          },
        }
      })
    })
    

    有几率你的图出不来,修改为以下代码

    js部分

    var option= ... //你的配置
    $(document).ready(function() {
      Vue.prototype.$ajax = $.ajax;
      common = new Vue({
        el: '#app',
        data: { 
            chart: null
        },
        mounted() {
          this.chart = echarts.init(document.getElementById('test'))
          this.chart.setOption(option)    
       },
        created: function () {
        },
        methods: {
          getData () {
          },
        }
      })
    })
    

    原因

    mounted 和 updated 的生命周期, 不太一样。
    不过也是看你需求。 其实 按照道理来讲。 mounted 之后, dom 就已经在了。 不过也是看 echart 是不是有自己做什么 这个我不太清楚。
    updated 生命周期是在 每次 data 里面有数据变化的时候 就要 重新 rerender 执行 updated hook。 所以你的代码可能会重复 init

    相关文章

      网友评论

          本文标题:vue和echarts同时使用问题

          本文链接:https://www.haomeiwen.com/subject/nfprhqtx.html