Echarts关系图扩展分类默认颜色数量

最近做的东西中要用到Echarts画关系图,遇到一个挺DT的问题,在gexf文件中指定每个node的所属类别后,如果不为这些node自定义颜色的话,会在生成的画像中会为每一个类别默认设置一个颜色,每个类别的node拥有同一种颜色,如下图:

可以看到明显有一个问题就是当你的分类数量大于11时,颜色会再次重复回去,这样对于分类任务来说是没法接受的,解决方法之一是可以通过我上文提到的去自定义每个node的颜色,同一类的node设置成同种颜色,上面显示分类的颜色会自动同步(亲测有效)。但是我每次类别数量又不知道我怎么设置那么多颜色?而且我自己设置的颜色也没有Echarts默认的好看,怎么解决?干货来了:

既然在生成关系图的设置中没有任何关于默认颜色的设置,那么这个颜色设定必然在自己所引用的echarts.js库中,所以只要耐心一点在echarts.js库中找到对应的部分,然后修改echarts.js库的源码这个问题就解决了。

果然,终于把设置默认颜色的代码揪出来了,我这个版本在代码的20396行,如果找不到,直接关键字搜索即可,估计都一样,如下:

var globalDefault = {
    // backgroundColor: 'rgba(0,0,0,0)',

    // https://dribbble.com/shots/1065960-Infographic-Pie-chart-visualization
    // color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870'],
    // Light colors:
    // color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'],
    // color: ['#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'],
    // Dark colors:
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ],
    ...
}

分类默认的11种颜色对应上面color集合中的11种颜色,因此,我们只要扩充这个集合,就把默认的分类颜色扩充了。那问题又回来了,上哪找这么多颜色?就是这么的巧,在我找这段代码的过程中,发现了echarts.js在另外一个地方已经给我们定义了一堆漂亮的颜色了,我的版本在echarts.js的3648行如下:

var kCSSColorTable = {
    'transparent': [0, 0, 0, 0], 'aliceblue': [240, 248, 255, 1],
    'antiquewhite': [250, 235, 215, 1], 'aqua': [0, 255, 255, 1],
    'aquamarine': [127, 255, 212, 1], 'azure': [240, 255, 255, 1],
    'beige': [245, 245, 220, 1], 'bisque': [255, 228, 196, 1],
    'black': [0, 0, 0, 1], 'blanchedalmond': [255, 235, 205, 1],
    'blue': [0, 0, 255, 1], 'blueviolet': [138, 43, 226, 1],
    'brown': [165, 42, 42, 1], 'burlywood': [222, 184, 135, 1],
    'cadetblue': [95, 158, 160, 1], 'chartreu
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值