heiniuhaha.github.com
heiniuhaha.github.com copied to clipboard
韦恩图使用select属性,单机后取消不了填充色
`const { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet } = window.BizCharts; const Slider = window['bizcharts-plugin-slider'];
class Venn extends React.Component { render() { var sets = [{ sets: ["A"], size: 12, label: "20" }, { sets: ["B"], size: 12, label: "10" }, { sets: ["C"], size: 12, label: "4" }, { sets: ["A", "B"], size: 2, label: "7" }, { sets: ["A", "C"], size: 2, label: "9" }, { sets: ["B", "C"], size: 2, label: "127" }, { sets: ["A", "B", "C"], label: "6", size: 4 }]; return
<Chart height={window.innerHeight} padding={10} forceFit data={sets}>
<Tooltip visible={true} />
<Geom
type="venn"
size="size"
style={{
lineWidth: 1,
stroke: "#333",
fill: '#eee'
}}
select={[true, {
mode: 'multiple', // 选中模式,单选、多选
cancelable: true ,
style: { fill:"red"}, // 选中后 shape 的样式
animate: true // 选中是否执行动画,默认执行动画
}]}
tooltip={false}
sets={'sets'} position="x*y">
<Label
content="label"
offset={1}
textStyle={{
fill: '#333'
}} />
</Geom>
</Chart>
;
}
} ReactDOM.render(<Venn />, document.getElementById('mountNode'));`