安装echarts命令_【今日学习】UVUECli使用ECharts教程

迈不过友情╰ 2023-01-07 03:56 126阅读 0赞

![37f61979b178e3f7ee60c5e9e52c805d.png][]

**什么？干货？**

**U****VUECli使用ECharts教程**

**你****Get到了吗？**

![596f80451b766159d5e030b303dd449b.png][]

0 1首先先安装需要的插件

输入命令：

npm install echarts -S

![47290eddaf7de5198d3604596abf896d.png][]

接着在main.js的文件中进行配置：                  ![4567f9325f0bb3733b63c0f56062be32.png][]

接下来在对应的页面中加上UI：

并编写初始化的函数：

![c516226a68f6ceec527ee541039702cb.png][]

![07938cd09a108529cd4ee4a8621317fd.png][]

接下来在初始化的时候调用该函数吧：

![96823ef520c14ee8bf8a382c2e94394a.png][]

0 2参数配置

这时候我们需要查看官网咯：

https://echarts.apache.org/zh/tutorial.html\#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

官网中也有明确的使用方式介绍哦，这边就不做赘述了。

![2ac796808428d8a81ad1576956f47815.gif][]

往期精彩回顾

## **➤ 获得10k+的offer技巧大曝光，不得不收藏** ##

## **➤ ** 不畏疫情 逆风而战 ——此片献予传一卓跃全体师生 ##

## **➤ ** 学贵有疑，疑则进也 | JF2002班线上茶话会 ##

## **➤ 就业有保障|新大陆支付专场招聘会再度来袭！** ##

![da38a57afc7271d276a97e8b58e0ac44.gif][]

[37f61979b178e3f7ee60c5e9e52c805d.png]: /images/20221119/04bdb655bb8548719a4d4a84f0d02611.png
[596f80451b766159d5e030b303dd449b.png]: /images/20221119/2b9408ae045948c2ab815b4aa6a139dc.png
[47290eddaf7de5198d3604596abf896d.png]: https://img-blog.csdnimg.cn/img_convert/47290eddaf7de5198d3604596abf896d.png
[4567f9325f0bb3733b63c0f56062be32.png]: https://img-blog.csdnimg.cn/img_convert/4567f9325f0bb3733b63c0f56062be32.png
[c516226a68f6ceec527ee541039702cb.png]: https://img-blog.csdnimg.cn/img_convert/c516226a68f6ceec527ee541039702cb.png
[07938cd09a108529cd4ee4a8621317fd.png]: https://img-blog.csdnimg.cn/img_convert/07938cd09a108529cd4ee4a8621317fd.png
[96823ef520c14ee8bf8a382c2e94394a.png]: https://img-blog.csdnimg.cn/img_convert/96823ef520c14ee8bf8a382c2e94394a.png
[2ac796808428d8a81ad1576956f47815.gif]: https://img-blog.csdnimg.cn/img_convert/2ac796808428d8a81ad1576956f47815.gif
[da38a57afc7271d276a97e8b58e0ac44.gif]: https://img-blog.csdnimg.cn/img_convert/da38a57afc7271d276a97e8b58e0ac44.gif