bizcharts 修改legend樣式

實現如下圖，Legend樣式，並且能夠點擊切換chart

let chartIns = null; const getG2Instance = chart => { chartIns = chart; }; class Count extends React.Component {
    render（）{
        return (
            <div>
                <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 < geoms.length; i++) { const geom = geoms[i]; if (geom.getYScale().field === value) { if (checked) { geom.show(); } else { geom.hide(); } } } }} />
                  <Axis name="statDatetime" label={label} />
                  {/* <Axis name="liCount" label={label} /> */}
                  <Axis
                    name="armCount"
                    grid={null}
                    label={{
                      textStyle: {
                        fill: "#fdae6b",
                        fontSize: '12',
                      },
                      formatter(val) {
                        return val > 10000 ? val / 10000 + '萬' : val;
                      },
                    }}
                  />
                  <Tooltip />
                  <Geom type="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"
                  />
                </Chart>
            </div>
        )
    }
}

 另外, 需要注意,  如果數據使用的是英文, 而Legend 需要用中文, 點擊事件需要做下處理, 如下:

　　　　　　　　　　　　onClick={ev => {
                      const item = ev.item;
                      const value = item.value;
                      const checked = ev.checked;
                      const geoms = chartIns.getAllGeoms();
                      let valueEn = ''; if(value == '次數'){ valueEn = 'liCount'; }else{ valueEn = 'armCount'; } for (let i = 0; i < geoms.length; i++) {
                        const geom = geoms[i];
                        if (geom.getYScale().field === valueEn) {
                          if (checked) {
                            geom.show();
                          } else {
                            geom.hide();
                          }
                        }
                      }
                    }}
                  />