1 overview

Environment Vue3+Vite, need to introduce ECharts library.

2 try

ECharts has been updated to version 5.0, it is not difficult to introduce in Vue, NPM/CNPM after installation in the required components:

import echarts from 'echarts'
Copy the code

Can.

But,

The problem is that this worked with previous versions, and updates to version 5.0 require other methods.

The official documentation, on the other hand, uses require to introduce:

However, in the case of Webpack, require cannot be used directly in Vite. There is a discussion on the official issue, which explicitly states that require is not supported. This is a Node feature, so it is recommended to use import:

3 Solution

First installation:

npm install --save echarts
# or
cnpm install --save echarts
Copy the code

Use import to import components that need to be used after installation:

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

So it works.

The most important thing is to put the previous

import echarts from 'echarts'
Copy the code

Instead of

import * as echarts from 'echarts'
Copy the code