关于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'

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据