Importing and using Echarts results in [object error] in Internet Explorer

Question

I was working with Echarts in Vuejs. But on using it, it shows error on Internet Explorer. Note: It works fine on Google Chrome.

Here is my code:

<template>
  <ECharts :options="map" style="width:100%; height:300px"></ECharts>
</template>

<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/map";
import "echarts/map/js/world";

export default {
  name: "some-name",
  components: {
    ECharts
  },
  data() {
    return {
      map: {
        tooltip: {
          trigger: "item",
          formatter: "{b}"
        },
        visualMap: {
          min: 0,
          max: 10000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#787878", "#505050", "#383838"]
          }
        },
        series: [
          {
            name: "Apple",
            type: "map",
            mapType: "world",
            roam: true,
            itemStyle: {
              emphasis: {
                label: {
                  show: false
                }
              }
            },
            data: [
              { name: "ABC", value: 100 },
              { name: "DEF", value: 200 },

            ]
          }
        ]
      }
    };
  }
};
</script>

Following error is shown:

[object Error]
SyntaxError: Expected ')'
  {
      [functions]: ,
      __proto__: {
        [functions]: ,
        __proto__: {
            [functions]: ,
            __proto__: {
              [functions]: ,
              __proto__: null
            },
            message: "",
            name: "Error",
            Symbol()_m.k4yj4kr75qs: undefined,
            Symbol()_n.k4yj4kr75qs: undefined,
            Symbol()_o.k4yj4kr75qs: undefined,
            Symbol()_p.k4yj4kr75qs: undefined,
            Symbol()_q.k4yj4kr75qs: undefined,
            Symbol()_u.k4yj4kr75qs: undefined,
            Symbol(foo)_v.k4yj4kr75qs: undefined,
            Symbol(Symbol.dispose)_s.k4yj4kr75qs: undefined,
            Symbol(Symbol.patternMatch)_t.k4yj4kr75qs: undefined,
            Symbol(test)_r.k4yj4kr75qs: undefined
        },
        message: "",
        name: "SyntaxError",
        Symbol()_m.k4yj4kr75qs: undefined,
        Symbol()_n.k4yj4kr75qs: undefined,
        Symbol()_o.k4yj4kr75qs: undefined,
        Symbol()_p.k4yj4kr75qs: undefined,
        Symbol()_q.k4yj4kr75qs: undefined,
        Symbol()_u.k4yj4kr75qs: undefined,
        Symbol(foo)_v.k4yj4kr75qs: undefined,
        Symbol(Symbol.dispose)_s.k4yj4kr75qs: undefined,
        Symbol(Symbol.patternMatch)_t.k4yj4kr75qs: undefined,
        Symbol(test)_r.k4yj4kr75qs: undefined
      },
      description: "Expected ')'",
      message: "Expected ')'",
      name: "SyntaxError",
      number: -2146827282,
      stack: "SyntaxError: Expected ')'
  at ./node_modules/resize-detector/esm/index.js (http://localhost:8080/48.js:1520:1)
  at __webpack_require__ (http://localhost:8080/app.js:767:12)
  at fn (http://localhost:8080/app.js:130:13)
  at eval code (eval code:10:22)
  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/vue-echarts/components/ECharts.vue?vue&type=script&lang=js& (http://localhost:8080/48.js:22:1)
  at __webpack_require__ (http://localhost:8080/app.js:767:12)
  at fn (http://localhost:8080/app.js:130:13)
  at eval code (eval code:2:22)
  at ./node_modules/vue-echarts/components/ECharts.vue?vue&type=script&lang=js& (http://localhost:8080/48.js:1544:1)
  at __webpack_require__ (http://localhost:8080/app.js:767:12)",
      Symbol()_m.k4yj4kr75qs: undefined,
      Symbol()_n.k4yj4kr75qs: undefined,
      Symbol()_o.k4yj4kr75qs: undefined,
      Symbol()_p.k4yj4kr75qs: undefined,
      Symbol()_q.k4yj4kr75qs: undefined,
      Symbol()_u.k4yj4kr75qs: undefined,
      Symbol(foo)_v.k4yj4kr75qs: undefined,
      Symbol(Symbol.dispose)_s.k4yj4kr75qs: undefined,
      Symbol(Symbol.patternMatch)_t.k4yj4kr75qs: undefined,
      Symbol(test)_r.k4yj4kr75qs: undefined
  }

Also on using echarts on IE, page keeps on loading and never stops. I have searched on the internet but didn't find anything helpful. Any kind of solution to this problem would be appreciated. Thanks in advance.

Answer 1

You may try to modify the way of using echarts.

Change

import ECharts from "vue-echarts/components/ECharts.vue";

to

import ECharts from 'vue-echarts'

The first way seems not compatible with IE.