vue2引入vue-echarts@6.7.3报错TypeError: Object(...) is not a function怎么解决？

[cooper1x]

请确认

• 我可以确认这个问题无法在 ECharts 项目本身中复现。

您是如何将 Vue-ECharts 引入项目的？

通过 ES 模块 import

版本信息

➜ npm ls vue echarts vue-echarts
xxxxxxxx@1.0.0 /Users/xxxxxxxx(xxxx是项目名称和路径)
├─┬ @vue/cli-plugin-babel@3.12.1
│ └─┬ @vue/babel-preset-app@3.12.1
│   └─┬ @vue/babel-preset-jsx@1.4.0
│     └── vue@2.6.14 deduped
├─┬ avue-plugin-ueditor@0.1.7
│ └── vue@2.6.14 deduped
├─┬ echarts-gl@2.0.9
│ └── echarts@5.6.0 deduped
├── echarts@5.6.0
├─┬ element-ui@2.15.14
│ └── vue@2.6.14 deduped
├─┬ vue-axios@2.1.5
│ └── vue@2.6.14 deduped
├─┬ vue-echarts@6.7.3
│ ├── echarts@5.6.0 deduped
│ ├─┬ vue-demi@0.13.11
│ │ └── vue@2.6.14 deduped
│ └── vue@2.6.14 deduped
├── vue@2.6.14
└─┬ vuex@3.6.2
  └── vue@2.6.14 deduped

问题详情

访问 vue 页面报错：

main.js:2 TypeError: Object(...) is not a function
    at eval (index.esm.min.js:10:2780)
    at ./node_modules/vue-echarts/dist/index.esm.min.js (0.js:250:1)
    at __webpack_require__ (app.js:838:30)
    at fn (app.js:130:20)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/webpack-code-inspector-plugin/dist/loader.js?!./src/components/echarts/BarChartComponent.vue?vue&type=script&lang=js:6:69)
    at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/webpack-code-inspector-plugin/dist/loader.js?!./src/components/echarts/BarChartComponent.vue?vue&type=script&lang=js (page.js:11:1)
    at __webpack_require__ (app.js:838:30)
    at fn (app.js:130:20)
    at eval (BarChartComponent.vue:1:1)
    at ./src/components/echarts/BarChartComponent.vue?vue&type=script&lang=js (page.js:456:1)

package.json 配置如下：

{
  "name": "xxxxx",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    ...
  },
  "dependencies": {
    "@babel/preset-env": "^7.26.9",
    "@vue/composition-api": "^1.7.2",
    "avue-plugin-ueditor": "^0.1.4",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "clipboard": "^2.0.11",
    "crypto-js": "^4.0.0",
    "echarts": "^5.5.1",
    "echarts-gl": "2.0.9",
    "element-ui": "^2.15.6",
    "js-audio-recorder": "^1.0.7",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "marked": "^0.7.0",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "pinyin-pro": "^3.26.0",
    "portfinder": "^1.0.23",
    "postcss-url": "^8.0.0",
    "recorder-core": "^1.3.25011100",
    "script-loader": "^0.7.2",
    "uuid": "^3.4.0",
    "vue": "2.6.14",
    "vue-axios": "^2.1.2",
    "vue-echarts": "^6.7.2",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1",
    "webrtc-adapter": "^9.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-service": "^3.1.4",
    "chai": "^4.1.2",
    "code-inspector-plugin": "^0.20.0",
    "node-sass": "npm:sass@^1.85.0",
    "sass-loader": "^10.0.5",
    "vue-template-compiler": "2.6.14",
    "vue-video-player": "^5.0.2",
    "webpack-bundle-analyzer": "^3.0.3"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

引入的子组件是这样写的：

<template>
  <div class="vCharBar">
    <v-chart
      :auto-resize="true"
      autoresize
      :data="data"
      :option="defaultOption"
    />
  </div>
</template>

<script>
import { use, graphic } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart from "vue-echarts";
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
export default {
  name: "vCharBar",
  components: { VChart },
  props: {
    option: {
      type: Object,
      default: function () {
        return {
          legendShow: true,
        };
      },
    },
    data: {
      type: Object,
      default: function () {
        return {
          categories: ["4时", "8时", "12时", "16时", "20时", "24时"],
          series: [
            {
              name: "工单量",
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
            {
              name: "环比趋势",
              data: [82, 93, 90, 34, 12, 33, 32],
            },
          ],
        };
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {
    defaultOption() {
      let that = this;
      var xAxis = {
        type: "category",
        // boundaryGap: false,
        data: this.data.categories,
        axisLabel: that.option.axisLabel || {
          interval: 0, // 展示全部x轴数据
        },
      };
      return {
        grid: {
          left: "3%",
          right: this.option.right || "4%",
          top: this.option.top || "26%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          show:
            this.option.legendShow != undefined ? this.option.legendShow : true,
          data: this.data.series.map((v) => v.name),
          right: this.option.legendRight || "0",
          top: "20",
        },
        xAxis: xAxis,
        yAxis: [
          {
            type: "value",
            name: this.option.yAxisName1 || "件",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: that.option.yAxisName2 || "%",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        dataZoom: that.option.dataZoom
          ? that.option.dataZoom
          : {
              show: false,
            },
        series: [
          {
            name: that.data.series[0].name,
            data: that.data.series[0].data,
            type: "bar",
            barWidth: that.option.barWidth || "25%",
            emphasis: {
              barBorderRadius: that.option.barBorderRadius || 0,
            },
            itemStyle: {
              normal: {
                barBorderRadius: that.option.barBorderRadius || 0,
                label: {
                  show:
                    that.option.barLabelShow != undefined
                      ? that.option.barLabelShow
                      : false,
                  position: "top",
                  textStyle: {
                    color: "black",
                    fontSize: 12,
                  },
                },
                color: new graphic.LinearGradient(0, 0, 1, 1, [
                  {
                    offset: 0,
                    color: that.option.barItemStyle
                      ? that.option.barItemStyle[0]
                      : "rgba(152, 187, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: that.option.barItemStyle
                      ? that.option.barItemStyle[1]
                      : "rgba(57, 121, 242, 1)",
                  },
                ]),
              },
            },
          },
          {
            name: that.data.series[1].name,
            data: that.data.series[1].data,
            type: "line",
            itemStyle: {
              color: that.option.lineColor || "#EEB86B",
            },
            yAxisIndex: 1,
            // areaStyle: {
            //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: "rgba(238,184,107,0.8)",
            //     },
            //     {
            //       offset: 1,
            //       color: "rgba(238,184,107,0.3)",
            //     },
            //   ]),
            // },
          },
        ],
      };
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.vCharBar {
  width: 100%;
  height: 100%;
}
</style>

问题复现

暂时没有，线上 demo 报错了，正在解决，麻烦先看看我的配置有没有问题呢