在vue中使用echarts图表教程

最新推荐文章于 2025-02-28 14:20:02 发布

原创

最新推荐文章于 2025-02-28 14:20:02 发布 · 1.9k 阅读

收录于

当前文章被以下社区和专栏收录：

本文记录了一位非开发人员在Vue项目中使用ECharts遇到的问题及解决方案。初学者在按照官网教程操作后，发现图表无法显示。经过技术大佬指点，发现问题在于Vue的单页面应用特性以及对mounted钩子函数的理解。解决方案包括正确引入ECharts和利用mounted生命周期钩子确保图表在DOM渲染完成后初始化。

勿喷：作为非开发人员，我真的不懂vue的生命周期和钩子函数，我只关心怎么样达到目的，但正因为不懂，所以及其容易走弯路，易入坑。

问题：我想在vue项目中使用echarts图表，第一步就是去官网找教程，官网教程看起来很容易的样子，没有多想，先按着来。

 <div id="newEcharts" style="width:500px;height:220px;"></div>

<script>
    var echarts = require('echarts');

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: {
        text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
</script>

结果如下：一片空白。除了样式的宽高，什么也没有，既不报错，也不显示

方案：请教公司的技术大佬后，她一眼就看出了问题，整个解决过程不到1分钟。

我犯的错：（1）vue是单页面，只能直接引入一个script标签，其他的需要去创建。