vue 使用 v-charts 实现环形图

v-charts 文档直达v-charts 有环形图的示例demo但这不是我想要的效果,需要自己调整一下样式下图是我调整之后的样子,我隐藏了自带的legend,环形图里面的颜色改成了渐变色1、安装v-chartsnpm i v-charts echarts -S2、在main.js 引入环形图因为我现在里面只用到了环形图,所以我只引入了这一个。// main.jsimpor...
摘要由CSDN通过智能技术生成

v-charts 文档直达

v-charts 有环形图的示例demo
在这里插入图片描述
但这不是我想要的效果,需要自己调整一下样式

下图是我调整之后的样子,我隐藏了自带的legend,环形图里面的颜色改成了渐变色

在这里插入图片描述

1、安装v-charts

npm i v-charts echarts -S

2、在main.js 引入环形图

因为我现在里面只用到了环形图,所以我只引入了这一个。

// main.js
import VeRing from 'v-charts/lib/ring.common'// 环形图

Vue.component(VeRing.name, VeRing)

3、页面使用环形图

HTML:

    <ve-ring
      height="250px"
      width="350px"
      :data="chartData"
      :extend="chartExtend"
      :settings=
  • 5
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值