环形图 hover 的时候，如何配置边框的样式？-灵析社区
只想躺平环形图的交互中，当指针悬停在环形图的扇区上时，如何改变扇区的边框颜色、边框粗细、调整扇区的半径大小以及改变扇区的填充透明度？ 除此之外，如何处理其他扇区，即非悬停状态下的扇区的样式？
九久九解决方案 Solution
VChart图表已经提供了对应的功能，VChart对图元上的各种常用交互抽象为了图元的状态，将图元的状态分为了以下几种：
* "hover" 指针悬浮状态，图元被鼠标指针悬浮时的状态。
* "hover_reverse" 非指针悬浮状态，当有图元进入了 "hover" 状态时，其他图元的状态。
* "selected" 选中状态，图元被选中时的状态。
* "selected_reverse" 非选中状态，当有图元进入了 "selected" 状态时，其他图元的状态。
* "dimension_hover" 维度悬浮状态，鼠标指针悬浮在某一段 "x" 轴区域内时的状态。
* "dimension_hover_reverse" 非维度悬浮状态，当有图元进入了 "dimension_hover" 状态时，其他图元的状态。
如果想要hover到环形图时，改变图元的样式，可以在pie配置中，设置图元的hover状态。
"参考文档：图元的状态" (https://link.segmentfault.com/?enc=4br93sktdSo6XcOBVwTd7w%3D%3D.IoUu2K8MWS0dmWnRKkSBtILKZDZJhXAPOptjAyGYYhpRnnJ2%2B2yRs%2BABb7pG%2BkOZBscaYHp8QR%2Br%2F538iic2u1IREPcRI%2BA1CJv%2FP7BpL%2FU%3D)
代码示例 Code Example
在以下示例中，"pie.state"中设置了4个状态
1. "hover": 指针悬浮到的图元， 显示描边，填充透明度变低，扩展外半径。
2. "hover_reverse"：其它未悬浮到的图元，缩小外半径。
3. "selected"：指针选中的图元，扩大内半径和外半径。
4. "selected_reverse"：其它未选中的图元，填充透明度变低。
import { useEffect, useRef } from "react";
import VChart from "@visactor/vchart";
export const Chart = () => {
const containerRef = useRef(null);
useEffect(() => {
const spec = {
type: "pie",
data: [
{
id: "data",
values: [
{ type: "oxygen", value: "46.60" },
{ type: "silicon", value: "27.72" },
{ type: "aluminum", value: "8.13" },
{ type: "iron", value: "5" },
{ type: "calcium", value: "3.63" },
{ type: "sodium", value: "2.83" },
{ type: "potassium", value: "2.59" },
{ type: "others", value: "3.5" },
],
},
],
valueField: "value",
categoryField: "type",
outerRadius: 0.8,
innerRadius: 0.5,
padAngle: 0.5,
pie: {
state: {
hover: {
stroke: "#0FF",
lineWidth: 1,
fillOpacity: 0.9,
outerRadius: 0.85,
},
hover_reverse: {
outerRadius: 0.7,
innerRadius: 0.5,
},
selected: {
outerRadius: 0.85,
innerRadius: 0.6,
},
selected_reverse: {
fillOpacity: 0.25,
},
},
},
};
const vchart = new VChart(spec, {
dom: containerRef.current,
onError: console.error
});
vchart.renderAsync();
return () => vchart.release();
}, []);
return (
);
};
结果展示 Results
在线示例："https://codesandbox.io/s/pie-hover-llxwgy?file=/src/App.js" (https://link.segmentfault.com/?enc=LhG%2BtDnWssmtn3pmJRoH0Q%3D%3D.xAcegZgGeIADrpfJy0j7sPgek6%2FaIxGQTYhJyM4zjYgFtY0tSC%2FAY9HDqw42NC%2FapthrHJ49%2BGVeyb6kksMiNA%3D%3D)
Online Demo: "https://codesandbox.io/s/pie-hover-llxwgy?file=/src/App.js" (https://link.segmentfault.com/?enc=2S2gI0dvbRrTZDoG7MMo3g%3D%3D.WGxw5Q4kATn25b6pa8fWK%2Fvcl4YfRMbqjB%2BSwdcUGROgvDfO4cjzPkTZD%2B85%2FunI0CELrsk9JtPxDadwEXuw7w%3D%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241230/8f3cf5e33fd0413c30ddd286ed909978.png)
相关文档
"VChart
Github" (https://link.segmentfault.com/?enc=v7rsrngIIwliW56Dc9I6GQ%3D%3D.lKmcuUn%2Bg6cCfVhVsFcN%2BZCjivx5BMjgtzXqv%2BERg2UsKQRnDknJ3Nyc86ZQcTht)
"图元状态教程" (https://link.segmentfault.com/?enc=rK%2F2pdy3QPGOMorUAZrhoQ%3D%3D.B81Ix0iZ7o%2Bf0x6AeAia2BHEFLLRAQ11hOIOOs8mWgXKqlBHCSQOqzJpypGXeu72hMP9kVLqgQ6RW%2FLMOb6EgWYltV5sYohY3ot9bNOdyyQ%3D)
"图表示例" (https://link.segmentfault.com/?enc=Gz27F6KP9LZucXsfeFDKMQ%3D%3D.2pnfMRKZzulR2gPP%2B2gvVBuF%2FOWnUgqIgNfosqXOIce92b5memkvwZ4lkeHoUHhLbzNujxSsWqZZSJ6QBQOrxA%3D%3D)