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 @ 2021-06-05 10:54  创客未来  阅读(248)  评论(0编辑  收藏  举报