Echarts init 为 undefined 解决方法

最新推荐文章于 2024-04-25 23:36:17 发布

苑谁谁

最新推荐文章于 2024-04-25 23:36:17 发布

阅读量5.8k

点赞数 6

文章标签： echarts

本文链接：https://blog.csdn.net/weixin_42322529/article/details/111818123

版权

问题描述

echarts 使用时候报错

export 'default' (imported as 'echarts') was not found in 'echarts'

Cannot read property 'init' of undefined

问题图片

在这里插入图片描述

解决方法

1. 卸载5.0或当前版本的echarts

npm uninstall echarts

2. 安装低版本或其他兼容版本

npm install echarts@4.8.0

3. main.js入口文件对组件进行全局配置

// 引入 echarts 插件
import echarts from 'echarts'

// 配置成全局组件
Vue.prototype.$echarts = echarts

4. 组件内使用

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:600px;height:400px;"></div>
    
    <script type="text/javascript">
    
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

5. 最终效果图片

我发现这个问题之后也是在网上搜了半天，没找到答案，就自己试着解决，欸想到试着试着就试出来了，希望能帮到遇到同样问题的小伙伴儿。嘻嘻。

苑谁谁

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
8
评论
Echarts init 为 undefined 解决方法

Echarts 使用时候报错export 'default' (imported as 'echarts') was not found in 'echarts'和Cannot read property 'init' of undefined 的解决方法。
复制链接

扫一扫