v-charts的下载与引用

news2024/11/23 19:18:20

近期，因项目需要，需用v-charts做一些登录后首页的展示图，按之前的逻辑echarts官网都有API直接拿来用就行了，但是我的项目框架是vue+springboot，我的vue版本是2.6.1，这个v-charts文档在网上搜了搜，属实不多，走了很多弯路，近期做一个总结，希望后续有人用的时候可以帮忙到他们；

一、哪里下载？在github上面，下载巨慢，很烦！ v-charts基于 Vue2.x 的 Echarts 组件https://vue-echarts.github.io/二、如何引用？

引用的方式方法很多，官网上有引用例子，总体上分为三种情况：

1、js方式引用，官网文档上有例子，这里不多介绍；

介绍 (v-charts.js.org)

2、vue方式引用，官网文档上也有例子，同上；

3、全局引用，此场景主要是很多地方使用到他，为方便，我这直接全局引用了；

main.js文件中添加，如果有别的图，直接对应的添加即可；

import 'v-charts/lib/style.css'
import VeLine from 'v-charts/lib/line.common'
import VeRing from 'v-charts/lib/ring.common'
import VePie from 'v-charts/lib/pie.common'
import VeLiquidfill from 'v-charts/lib/liquidfill.common'
import VeGauge from 'v-charts/lib/gauge.common'

Vue.component(VeLine.name, VeLine)
Vue.component(VeRing.name, VeRing)
Vue.component(VePie.name, VePie)
Vue.component(VeLiquidfill.name, VeLiquidfill)
Vue.component(VeGauge.name, VeGauge)

index.vue使用，为方便展示，我这数据截了个图