在vue中使用echarts图表教程

安康全是山

于 2019-12-06 15:46:00 发布

阅读量1.9k

点赞数 2

分类专栏： vue教程

本文链接：https://blog.youkuaiyun.com/k912120/article/details/103424099

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

勿喷：作为非开发人员，我真的不懂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,

最低0.47元/天解锁文章