环形图 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)  ## 相关文档 [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)