近期,因项目需要,需用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使用,为方便展示,我这数据截了个图
<ve-line :data="chartData"></ve-line>其他图也是一样的方式方法;
下一篇介绍一下复杂场景下图表的使用