1、如何实现自定义图例?
给 <Legend/>设置items,如下:
<Legend
custom={true}
allowAllCanceled={true}
items={[
{
value: "waiting",
marker: {
symbol: "square",
fill: "#3182bd",
radius: 5
}
},
{
value: "people",
marker: {
symbol: "hyphen",
stroke: "#ffae6b",
radius: 5,
lineWidth: 3
}
}
]}
/>
参见:
2、如何改变图例大小?
<Legend
useHtml
g2-legend-marker={{
width: '36px',
height: '20px',
borderRadius: '12px',
margin: '16px',
// background: 'linear-gradient(blue, pink)',
}}
itemTpl={'<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}" style="cursor: pointer;font-size: 16px;"><i class="g2-legend-marker" style="width:20px;height:10px;border-radius:5px;display:inline-block;margin-right:10px;background-color: {color};"></i><span class="g2-legend-text">{value}</span></li>'}
/>
样式:
.bar{
:global{
.item-0{
.g2-legend-marker{
background:linear-gradient(#5EBBFC,#6868F8);
}
}
.item-1{
.g2-legend-marker{
background:linear-gradient(#8362FF,#E672FF);
}
}
}
}
这块有点麻烦:
如果不用useHtml,只能单纯的改掉marker,所以后来结合了useHTML和itemTpl以及自定义样式
更新分界线
问题一:如何实现渐变色?
问题起源:
看官网API截图:
但实际上,并没有什么用,最终显示的颜色给人的感觉是整个图是渐变色,如下:
对官网demo的失望,一度让我以为渐变色只是一个传说,结果,在同事的帮忙下(在git上搜索),原来渐变色要这么写:
color= {['l(100) 0:#5EBBFC 0.5:#FF0000 1:#6868F8']}
附上官网链接:https://bizcharts.net/products/bizCharts/api/graphic (一定要耐心看到最后,否则是找不到的,这还是同事告诉我,一度以为渐变色只存在于git的提问中,没想到官网竟然有,只是位置嘛,不太好猜)
附:环形渐变示例
问题二:如何改变图例?
还是先看官方文档:
然鹅,当设置shape属性时,不但达不到预期效果,而且编辑器给出警告:
后来,经过一番不懈的看文档看文档,才发现:
所以,可以通过marker来设置图例中图标的类型,所以……,是我阅读能力不好了呗……
问题三:如何改变图例大小?
官文:
不用想了,和之前的shape一样……
至于怎么解决,目前还么有研究出来,只能说自己阅读理解能力太差了,后续更新
--------------------------------------------------感伤分界线--------------------------------------------
做一名前端开发真的太不容易了,首先是技术的变化,真的是太快了,技术栈更新快,图像库更新快,组件库也更新快,虽然说只要理解一种,再怎么变都是‘不离其宗’的,但是还是有一些变化挺大的,还是需要学习的;其次是需求变化,做后端时,从来没有发现需求变化对开发有多么大的影响,感觉就是增加一个字段减少一个字段的事情(也可能是做的不深入吧),自从转了前端,才发现,不变,是不可能的,这辈子都不可能的,需求在变,交互在变,没想到最后连UI 设计也要不停的变化,一直以为只有需求是可以频繁变化的,交互偶尔可变,UI一旦设计了就确定了,没想到现在遭遇的是UI频繁的变来变去,一会改个颜色一会拆分个模块,一会觉得这个标题应该放在外面,一会又觉得放在里面好……虽说这变化前端工作量不大,但真的很心累,心中一百万个草泥马,就不能有个确定的吗?答案是否定的,不能……最后,接口也会变,什么数据类型呀,返回数据的方式呀,尽管我在一开始就做了一些封装,就是怕后期改动,结果,还是要改,所幸,这次对接的后端同事还不错,要是遇到一个不好说话的后端同事,那肯定有时一把心酸泪了……
前端是一个很没有安全感的职业,我经常在想,花费了很久解决的问题,之后呢?之后会留下什么?好像,时间久了,自己都会忘记了,顶多有点印象,这个问题我遇到过,但是怎么解决的,太久了,不太记得了……趁着记忆还没溜走,尽量抽空记下来吧,或许,这就是唯一留下的了,或许,以后会说:这个问题我遇到过,我找找怎么解决的……
面对如此多变的UI设计,真的被刺激到了,加班加点的心血,在还没有出襁褓就被莫名的重做了,真的对自己的选择越来越怀疑了,对某些也越来越失望了,或许有一天,敲代码不再是我的兴趣,而单单只是职业,仅此而已。