vue想整合echarts，图表怎么没显示出来？

• Z时代
• 2024-03-13
• 分类：IT

网页我还有用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是有正确赋值的,但就是没显示出来,控制台也没报错。各位大佬，这个是怎么一回事？来解一下惑

回答：

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

回答：

先看下#myChart的元素宽高

回答：

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

this.$nextTick(() => {
    this.initChart();
})

回答：

试试这个库 vuecharts3

以上是 vue想整合echarts，图表怎么没显示出来？ 的全部内容， 来源链接： utcz.com/p/933380.html