vue想整合echarts,图表怎么没显示出来?

网页我还有用element-ui,这里html的代码

<el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="1" name="1">
        <div id="myChart"></div> 
    </el-tab-pane>
    <el-tab-pane label="2" name="2">
    </el-tab-pane>
    ... 其他页签
</el-tabs>

js:

new Vue({
    // ... 初始化那些代码
    methods: {
        initChart: (){
            let dom = document.getElementById('myChart');
            let chart = echarts.init(dom);
            let option = { ... }
            axios.get('/XXX',{})
                .then(function (res) {
                    debugger
                    let data = res.data.data;
                    option.series[0].data = data.values;
                    chart.setOption(option);
                }
        }
    }
});

我有debugger,走到chart.setOption(option); option是有正确赋值的,但就是没显示出来,控制台也没报错。各位大佬,这个是怎么一回事?来解一下惑

阅读 2k
4 个回答

就这两张图我是啥都没看出来
你有在你的项目中测试过官方demo吗
官方demo能跑再来考虑你的数据能不能跑

先看下#myChart的元素宽高

不知道你的initChart是在什么时候调用的
我的建议是先确认dom有没有获取到

this.$nextTick(() => {
    this.initChart();
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题