vue viser g2 v-chart 环状图文档未提到的点

今天在ant desgin vue项目中使用v-chart做环形图的时候遇到了好多问题,viser 官方文档里面根本找不到想要的答案

Viser的官网文档貌似没有人维护,只有一些简单的示例可以查看使用,但是如果想实现一些功能还是需要去git看issue!

viser 官网: Viser

问题1:我想修改环形图的颜色。

我进入他的git网址之后才在issue里面找到了修改的方法

相关issue :https://github.com/viserjs/viser/issues/549

文档实例中color一栏使用的就是item,默认的颜色变化

<div style="width: 100%;margin: 0 auto">
    <v-chart :forceFit="true" :height="height" :data="data" :width="width" :scale="scale">
      <v-tooltip :showTitle="false" dataKey="item*percent"/>
      <v-axis />
      <v-legend dataKey="item"/>
      <v-pie position="percent" :color="color" :vStyle="pieStyle" :label="labelConfig" :on-click="handlePieClick"/>
      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
    </v-chart>
  </div>

data() {
    return {
      scale,
      pieStyle: {
        stroke: "#fff",
        lineWidth: 1,
      },
      labelConfig: ['percent', {
        formatter: (val, item) => {
          return item.point.item + ': ' + val+ ' (' + item.point.count + ')';
        }
      }],
      color:['item', ['#1890FF', '#191970', '#48D1CC', '#C71585', '#FF0000']]
    };
 }

问题2:我想是环状图每一个扇叶点击跳转页面

在文档中根本找不到对应的点击事件方法,起初我用@click,后来我使用,原生js,document去监听canvas里面的div,两种方法都无效。后来我也是在git中找到了对应的issue。抱着试一试的心态发现有用!

issue :https://github.com/viserjs/viser/issues/507

methods: {
    handlePieClick(event) {
      console.log('Clicked item:', event); // 打印被点击的数据,你可以根据需要执行其他操作
  }

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值