elementui 使用echarts报错

echarts 使用时候报错:init方法

export 'default' (imported as 'echarts') was not found in 'echarts'
Cannot read property 'init' of undefined

这种原因是你安装了5.0以上版本的echarts。

1.卸载5.0以上版本的echarts

npm uninstall echarts

2.安装指定版本的echarts

npm install echarts@4.8.0

这里安装5.0以下版本都行,之后就是正常操作了。。。。。。

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

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

// 配置成全局组件
Vue.prototype.$echarts = echarts
复制代码
<template>
    <div id="chartColumn" style="width: 100%; height: 400px;">
    </div>

</template>
<script>
        import echarts from 'echarts'
        export default {
            data(){
                return {
                    chartColumn: null
                }
            },
            mounted() {
                this.drawLine();
            },
            methods: {
                drawLine(){
                    this.chartColumn = echarts.init(document.getElementById('chartColumn'));

                    this.chartColumn.setOption({
                      title: { text: 'Column Chart' },
                      tooltip: {},
                      xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                      },
                      yAxis: {
                        type: 'value'
                      },
                      series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                      }]
                });
                }
            }
        }
    </script>
复制代码

 

posted @   创客未来  阅读(263)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示