关于vue3:Vue3Vite引入Echarts50图表库

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'