最近做的东西中要用到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