vue安装使用echarts报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

最新推荐文章于 2024-05-06 09:49:31 发布

原创最新推荐文章于 2024-05-06 09:49:31 发布 · 537 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #echarts #npm

vue-element 专栏收录该内容

16 篇文章

订阅专栏

本文解决了一个在Vue项目中安装ECharts遇到的问题：安装最新版本导致的使用错误，并提供了安装指定版本4.9.0的具体步骤。同时分享了如何在Vue组件中初始化并展示柱状图的实例。

vue安装echarts
按官网方法安装npm install echarts --save
使用报错
"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
研究后发现是官网直接安装的版本过高（5.0.0）
需要卸载后安装4.9.0
具体操作如下
1卸载

npm uninstall echarts

2安装4.9.0版本

npm install echarts@4.9.0

运行成功
附引用实例

<template>
  <div>
   <div id="myChart" :style="{ width: '100%', height: '400px' }"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
     
    };
  },
  methods: {
    //柱状图
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      this.$http
        .post("后台接口地址")
        .then(res => {
          if (res.data.msg == "success") {
            myChart.setOption({
              title: {},
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: {
                type: "category",
                data: '数据',
                axisLabel: {
                  textStyle: {
                    fontSize: 14
                  }
                }
              },
              yAxis: {
                max: 100,
                interval: 20
              },
              series: [
                {
                  name: "综合评分",
                  type: "bar",
                  barWidth: "80",
                  showBackground: true,
                  backgroundStyle: {
                    color: "rgba(110, 193, 244, 0.2)"
                  },
                  itemStyle: {
                    normal: {
                      color: "#29aed7"
                    }
                  },
                  data: '数据'
                }
              ]
            });
          }
        });
    },
  },

  mounted() {

    this.drawLine();

};
</script>