欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-12 23:12:56
...

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

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

可以看到明显有一个问题就是当你的分类数量大于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], 'chartreuse': [127, 255, 0, 1],
    'chocolate': [210, 105, 30, 1], 'coral': [255, 127, 80, 1],
    'cornflowerblue': [100, 149, 237, 1], 'cornsilk': [255, 248, 220, 1],
    'crimson': [220, 20, 60, 1], 'cyan': [0, 255, 255, 1],
    'darkblue': [0, 0, 139, 1], 'darkcyan': [0, 139, 139, 1],
    'darkgoldenrod': [184, 134, 11, 1], 'darkgray': [169, 169, 169, 1],
    'darkgreen': [0, 100, 0, 1], 'darkgrey': [169, 169, 169, 1],
    'darkkhaki': [189, 183, 107, 1], 'darkmagenta': [139, 0, 139, 1],
    'darkolivegreen': [85, 107, 47, 1], 'darkorange': [255, 140, 0, 1],
    'darkorchid': [153, 50, 204, 1], 'darkred': [139, 0, 0, 1],
    'darksalmon': [233, 150, 122, 1], 'darkseagreen': [143, 188, 143, 1],
    'darkslateblue': [72, 61, 139, 1], 'darkslategray': [47, 79, 79, 1],
    'darkslategrey': [47, 79, 79, 1], 'darkturquoise': [0, 206, 209, 1],
    'darkviolet': [148, 0, 211, 1], 'deeppink': [255, 20, 147, 1],
    'deepskyblue': [0, 191, 255, 1], 'dimgray': [105, 105, 105, 1],
    'dimgrey': [105, 105, 105, 1], 'dodgerblue': [30, 144, 255, 1],
    'firebrick': [178, 34, 34, 1], 'floralwhite': [255, 250, 240, 1],
    'forestgreen': [34, 139, 34, 1], 'fuchsia': [255, 0, 255, 1],
    'gainsboro': [220, 220, 220, 1], 'ghostwhite': [248, 248, 255, 1],
    'gold': [255, 215, 0, 1], 'goldenrod': [218, 165, 32, 1],
    'gray': [128, 128, 128, 1], 'green': [0, 128, 0, 1],
    'greenyellow': [173, 255, 47, 1], 'grey': [128, 128, 128, 1],
    'honeydew': [240, 255, 240, 1], 'hotpink': [255, 105, 180, 1],
    'indianred': [205, 92, 92, 1], 'indigo': [75, 0, 130, 1],
    'ivory': [255, 255, 240, 1], 'khaki': [240, 230, 140, 1],
    'lavender': [230, 230, 250, 1], 'lavenderblush': [255, 240, 245, 1],
    'lawngreen': [124, 252, 0, 1], 'lemonchiffon': [255, 250, 205, 1],
    'lightblue': [173, 216, 230, 1], 'lightcoral': [240, 128, 128, 1],
    'lightcyan': [224, 255, 255, 1], 'lightgoldenrodyellow': [250, 250, 210, 1],
    'lightgray': [211, 211, 211, 1], 'lightgreen': [144, 238, 144, 1],
    'lightgrey': [211, 211, 211, 1], 'lightpink': [255, 182, 193, 1],
    'lightsalmon': [255, 160, 122, 1], 'lightseagreen': [32, 178, 170, 1],
    'lightskyblue': [135, 206, 250, 1], 'lightslategray': [119, 136, 153, 1],
    'lightslategrey': [119, 136, 153, 1], 'lightsteelblue': [176, 196, 222, 1],
    'lightyellow': [255, 255, 224, 1], 'lime': [0, 255, 0, 1],
    'limegreen': [50, 205, 50, 1], 'linen': [250, 240, 230, 1],
    'magenta': [255, 0, 255, 1], 'maroon': [128, 0, 0, 1],
    'mediumaquamarine': [102, 205, 170, 1], 'mediumblue': [0, 0, 205, 1],
    'mediumorchid': [186, 85, 211, 1], 'mediumpurple': [147, 112, 219, 1],
    'mediumseagreen': [60, 179, 113, 1], 'mediumslateblue': [123, 104, 238, 1],
    'mediumspringgreen': [0, 250, 154, 1], 'mediumturquoise': [72, 209, 204, 1],
    'mediumvioletred': [199, 21, 133, 1], 'midnightblue': [25, 25, 112, 1],
    'mintcream': [245, 255, 250, 1], 'mistyrose': [255, 228, 225, 1],
    'moccasin': [255, 228, 181, 1], 'navajowhite': [255, 222, 173, 1],
    'navy': [0, 0, 128, 1], 'oldlace': [253, 245, 230, 1],
    'olive': [128, 128, 0, 1], 'olivedrab': [107, 142, 35, 1],
    'orange': [255, 165, 0, 1], 'orangered': [255, 69, 0, 1],
    'orchid': [218, 112, 214, 1], 'palegoldenrod': [238, 232, 170, 1],
    'palegreen': [152, 251, 152, 1], 'paleturquoise': [175, 238, 238, 1],
    'palevioletred': [219, 112, 147, 1], 'papayawhip': [255, 239, 213, 1],
    'peachpuff': [255, 218, 185, 1], 'peru': [205, 133, 63, 1],
    'pink': [255, 192, 203, 1], 'plum': [221, 160, 221, 1],
    'powderblue': [176, 224, 230, 1], 'purple': [128, 0, 128, 1],
    'red': [255, 0, 0, 1], 'rosybrown': [188, 143, 143, 1],
    'royalblue': [65, 105, 225, 1], 'saddlebrown': [139, 69, 19, 1],
    'salmon': [250, 128, 114, 1], 'sandybrown': [244, 164, 96, 1],
    'seagreen': [46, 139, 87, 1], 'seashell': [255, 245, 238, 1],
    'sienna': [160, 82, 45, 1], 'silver': [192, 192, 192, 1],
    'skyblue': [135, 206, 235, 1], 'slateblue': [106, 90, 205, 1],
    'slategray': [112, 128, 144, 1], 'slategrey': [112, 128, 144, 1],
    'snow': [255, 250, 250, 1], 'springgreen': [0, 255, 127, 1],
    'steelblue': [70, 130, 180, 1], 'tan': [210, 180, 140, 1],
    'teal': [0, 128, 128, 1], 'thistle': [216, 191, 216, 1],
    'tomato': [255, 99, 71, 1], 'turquoise': [64, 224, 208, 1],
    'violet': [238, 130, 238, 1], 'wheat': [245, 222, 179, 1],
    'white': [255, 255, 255, 1], 'whitesmoke': [245, 245, 245, 1],
    'yellow': [255, 255, 0, 1], 'yellowgreen': [154, 205, 50, 1]
};

可能又有铁子说了,这些都是rgb颜色,而在你要扩充的集合中使用的是16进制的,难道我要一个个去转换吗?no!看到color集合中都是单引号引着的字符串形式的颜色定义时,就应该可以感觉到这里rgb传进去也是完全没有问题得,果不其然。把这些颜色统统扩充到了我的默认color集合里,问题搞定:

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

最后,扩充后的color集合拿走:

color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgb(250, 235, 215, 1)',
        'rgb(240, 248, 255, 1)', 'rgb(0, 255, 255, 1)', 'rgb(245, 245, 220, 1)', 'rgb(255, 228, 196, 1)',
        'rgb(127, 255, 212, 1)', 'rgb(240, 255, 255, 1)', 'rgb(0, 0, 0, 1)', 'rgb(255, 235, 205, 1)', 
        'rgb(0, 0, 255, 1)', 'rgb(138, 43, 226, 1)', 'rgb(165, 42, 42, 1)', 'rgb(222, 184, 135, 1)', 
        'rgb(95, 158, 160, 1)', 'rgb(127, 255, 0, 1)', 'rgb(210, 105, 30, 1)', 'rgb(255, 127, 80, 1)', 
        'rgb(100, 149, 237, 1)', 'rgb(255, 248, 220, 1)', 'rgb(220, 20, 60, 1)', 'rgb(0, 255, 255, 1)', 
        'rgb(0, 0, 139, 1)', 'rgb(0, 139, 139, 1)', 'rgb(184, 134, 11, 1)', 'rgb(169, 169, 169, 1)', 
        'rgb(0, 100, 0, 1)', 'rgb(169, 169, 169, 1)', 'rgb(189, 183, 107, 1)', 'rgb(139, 0, 139, 1)',
        'rgb(85, 107, 47, 1)', 'rgb(255, 140, 0, 1)', 'rgb(153, 50, 204, 1)', 'rgb(139, 0, 0, 1)',
        'rgb(233, 150, 122, 1)', 'rgb(143, 188, 143, 1)', 'rgb(72, 61, 139, 1)', 'rgb(47, 79, 79, 1)',
        'rgb(47, 79, 79, 1)', 'rgb(0, 206, 209, 1)', 'rgb(148, 0, 211, 1)', 'rgb(255, 20, 147, 1)',
        'rgb(0, 191, 255, 1)', 'rgb(105, 105, 105, 1)', 'rgb(105, 105, 105, 1)', 'rgb(30, 144, 255, 1)',
        'rgb(178, 34, 34, 1)', 'rgb(255, 250, 240, 1)', 'rgb(34, 139, 34, 1)', 'rgb(255, 0, 255, 1)',
        'rgb(220, 220, 220, 1)', 'rgb(248, 248, 255, 1)', 'rgb(255, 215, 0, 1)', 'rgb(218, 165, 32, 1)',
        'rgb(128, 128, 128, 1)', 'rgb(0, 128, 0, 1)', 'rgb(173, 255, 47, 1)', 'rgb(128, 128, 128, 1)',
        'rgb(240, 255, 240, 1)', 'rgb(255, 105, 180, 1)', 'rgb(205, 92, 92, 1)', 'rgb(75, 0, 130, 1)',
        'rgb(255, 255, 240, 1)', 'rgb(240, 230, 140, 1)', 'rgb(230, 230, 250, 1)', 'rgb(255, 240, 245, 1)',
        'rgb(124, 252, 0, 1)', 'rgb(255, 250, 205, 1)', 'rgb(173, 216, 230, 1)', 'rgb(240, 128, 128, 1)',
        'rgb(224, 255, 255, 1)', 'rgb(250, 250, 210, 1)', 'rgb(211, 211, 211, 1)', 'rgb(144, 238, 144, 1)',
        'rgb(211, 211, 211, 1)', 'rgb(255, 182, 193, 1)', 'rgb(255, 160, 122, 1)', 'rgb(32, 178, 170, 1)',
        'rgb(135, 206, 250, 1)', 'rgb(119, 136, 153, 1)', 'rgb(119, 136, 153, 1)', 'rgb(176, 196, 222, 1)',
        'rgb(255, 255, 224, 1)', 'rgb(0, 255, 0, 1)', 'rgb(50, 205, 50, 1)', 'rgb(250, 240, 230, 1)',
        'rgb(255, 0, 255, 1)', 'rgb(128, 0, 0, 1)', 'rgb(102, 205, 170, 1)', 'rgb(0, 0, 205, 1)',
        'rgb(186, 85, 211, 1)', 'rgb(147, 112, 219, 1)', 'rgb(60, 179, 113, 1)', 'rgb(123, 104, 238, 1)',
        'rgb(0, 250, 154, 1)', 'rgb(72, 209, 204, 1)', 'rgb(199, 21, 133, 1)', 'rgb(25, 25, 112, 1)',
        'rgb(245, 255, 250, 1)', 'rgb(255, 228, 225, 1)', 'rgb(255, 228, 181, 1)', 'rgb(255, 222, 173, 1)',
        'rgb(0, 0, 128, 1)', 'rgb(253, 245, 230, 1)', 'rgb(128, 128, 0, 1)', 'rgb(107, 142, 35, 1)',
        'rgb(255, 165, 0, 1)', 'rgb(255, 69, 0, 1)', 'rgb(218, 112, 214, 1)', 'rgb(238, 232, 170, 1)',
        'rgb(152, 251, 152, 1)', 'rgb(175, 238, 238, 1)', 'rgb(219, 112, 147, 1)', 'rgb(255, 239, 213, 1)',
        'rgb(255, 218, 185, 1)', 'rgb(205, 133, 63, 1)', 'rgb(255, 192, 203, 1)', 'rgb(221, 160, 221, 1)',
        'rgb(176, 224, 230, 1)', 'rgb(128, 0, 128, 1)', 'rgb(255, 0, 0, 1)', 'rgb(188, 143, 143, 1)',
        'rgb(65, 105, 225, 1)', 'rgb(139, 69, 19, 1)', 'rgb(250, 128, 114, 1)', 'rgb(244, 164, 96, 1)',
        'rgb(46, 139, 87, 1)', 'rgb(255, 245, 238, 1)', 'rgb(160, 82, 45, 1)', 'rgb(192, 192, 192, 1)',
        'rgb(135, 206, 235, 1)', 'rgb(106, 90, 205, 1)', 'rgb(112, 128, 144, 1)', 'rgb(112, 128, 144, 1)',
        'rgb(255, 250, 250, 1)',  'rgb(0, 255, 127, 1)', 'rgb(70, 130, 180, 1)', 'rgb(210, 180, 140, 1)',
        'rgb(0, 128, 128, 1)', 'rgb(216, 191, 216, 1)', 'rgb(255, 99, 71, 1)', 'rgb(64, 224, 208, 1)',
        'rgb(238, 130, 238, 1)', 'rgb(245, 222, 179, 1)', 'rgb(255, 255, 255, 1)', 'rgb(245, 245, 245, 1)',
        'rgb(255, 255, 0, 1)', 'rgb(154, 205, 50, 1)'
    ],