Echarts5按需加载，你没注意过的引入错误方式

先看报错信息

1.浏览器错误提示

error in mounted hook: "TypeError: utils_Echarts__WEBPACK_IMPORTED_MODULE_9_.init is not a function"

2.vscode 运行提示

报错原因：读取不到echarts.init 属性

查看代码 utils/echarts.js

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入各种图表，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {TitleComponent,...} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([
    BarChart,
    PieChart,
    LineChart,
    TitleComponent,
    ...,
    CanvasRenderer
  ])
export default echarts

相关引入

import * as echarts from '@/utils/Echarts'

this.myChartTrend = echarts.init(document.getElementById('Transaction-trend-echarts'))

仔细看看是不是发现不了什么错误！

报错原因

import * as echarts from xxx 不支持 export default使用，还不会报错，只有引用时相关对象引用才有报错

解决办法

在相关引用组件改为 import echarts from '@/utils/Echarts'