作者：tha1es | 来源：互联网 | 2023-09-18 17:59
实现如下图，Legend样式，并且能够点击切换chartletchartInsnull;constgetG2Instancechart{chartInschart;};class
实现如下图，Legend样式，并且能够点击切换chart
let chartIns = null;
const getG2Instance = chart => {
chartIns = chart;
};
class Count extends React.Component {
render（）{
return (
<
Chart
height={
320}
padding={[
30,
60,
30,
60]}
scale=
{zdscale}
data=
{zdNumDv}
onGetG2Instance={getG2Instance}
forceFit
>
<
Legend
position=
"top-right"
custom={
true}
allowAllCanceled={true}
items={[
{
value: "次数",
marker: {
symbol: "square",
fill: "#1292FF",
radius: 6
}
},
{
value: "人数",
marker: {
symbol: "square",
fill: "#FFAF11",
radius: 6,
}
}
]}
onClick={ev => {
const item = ev.item;
const value = item.value;
const checked = ev.checked;
const geoms = chartIns.getAllGeoms();
for (let i = 0; i ) {
const geom =
geoms[i];
if (geom.getYScale().field ===
value) {
if (
checked) {
geom.show();
} else {
geom.hide();
}
}
}
}}
/>
"statDatetime" label={label} />
{/* */}
<Axis
name="armCount"
grid={null}
label={{
textStyle: {
fill: "#fdae6b",
fontSize: ‘12‘,
},
formatter(val) {
return val > 10000 ? val / 10000 + ‘万‘ : val;
},
}}
/>
"interval" position="statDatetime*licount" color="l (90) 0:rgba(60, 174, 255, 1) 1:rgba(16, 107, 255, 1)" />
<Geom
type="line"
position="statDatetime*armCount"
color="#fdae6b"
size={3}
shape="smooth"
/>
)
}
}
京公网安备 11010802041100号