Vue3+Vite引入Echarts5.0圖表庫

1 概述

環境Vue3+Vite，需要引入ECharts庫。

2 嘗試

目前ECharts已更新到5.0版本，在Vue中引入並不難，npm/cnpm安裝后在需要的組件中引入：

import echarts from 'echarts'

即可。

但，

問題是這是以前的版本可行的，更新到5.0版本后需要使用其他方法。

另一方面官方文檔是使用require引入：

但是，這是在Webpack的情況下，在Vite中並不能直接使用require，官方issue有討論，明說了require不支持，這是一個Node的特性，建議使用import：

3 解決方案

先安裝：

npm install --save echarts
#或
cnpm install --save echarts

安裝后在需要使用的組件中使用import引入：

import * as echarts from 'echarts'
...
mounted(){
	var myChart = echarts.init(document.getElementById('main'))
	//...
}

這樣就能正常使用了。

最重要的就是將以前的

import echarts from 'echarts'

改為

import * as echarts from 'echarts'