bizchart中遇到的问题

 

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
                }
              }
            ]}
/>

参见：

    https://bizcharts.net/products/bizCharts/demo/detail?id=g2-double-axes&selectedKey=%E6%A6%82%E8%A7%88

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设计，真的被刺激到了，加班加点的心血，在还没有出襁褓就被莫名的重做了，真的对自己的选择越来越怀疑了，对某些也越来越失望了，或许有一天，敲代码不再是我的兴趣，而单单只是职业，仅此而已。