今天在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); // 打印被点击的数据,你可以根据需要执行其他操作
}