v-charts的下载与引用

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

一、哪里下载? 在github上面,下载巨慢,很烦!       v-charts基于 Vue2.x 的 Echarts 组件icon-default.png?t=N7T8https://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>

其他图也是一样的方式方法;

 下一篇介绍一下复杂场景下图表的使用

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值