首页 > 其他 > 详细

bizcharts 修改legend样式

时间:2021-06-25 13:28:33      阅读:37      评论:0      收藏:0      [点我收藏+]

实现如下图,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>
        )
    }
}

 

bizcharts 修改legend样式

原文:https://www.cnblogs.com/rachelch/p/14930205.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!