做数据可视化的时候，最让人头秃的不是写代码，而是调样式。特别是搞3D地图的时候，那种五颜六色像打翻了调色盘一样的效果，真的让人想砸键盘。很多刚接触echarts geo3d随机颜色需求的朋友，第一反应就是让程序随机生成颜色。结果呢？生成的地图红红绿绿，有的亮得刺眼，有的暗得看不清，整体看起来既廉价又混乱。今天咱们不整那些虚头巴脑的理论，就聊聊怎么让这玩意儿看起来稍微像样点。
我见过太多人直接拿Math.random()去生成RGB值，然后赋给series里的itemStyle。这绝对是误区。随机颜色之所以丑，是因为它缺乏逻辑关联。比如你给不同的省份或者区域上色，如果完全随机，相邻的两个区域可能一个是深红，一个是亮绿，对比度太大，看着眼睛疼。而且，3D模型本身就有光影效果，如果颜色本身饱和度太高，叠加上去之后，高光部分会过曝，阴影部分又太黑，细节全没了。
我的经验是，所谓的“随机”，其实应该是“有控制的随机”。首先，你得定一个主色调。比如你们公司品牌色是蓝色系，那你就在蓝色系里找差异。不要从整个色轮里随机，那样出来的颜色肯定不协调。你可以选定一个HSL色相值，比如H=200，然后让S（饱和度）和L（亮度）在一定范围内波动。这样出来的颜色，虽然看起来不一样，但整体感觉是统一的。
具体怎么操作呢？别去死磕那些复杂的算法。你可以先准备一组预设好的渐变色，或者一组相近的色值数组。然后在渲染每个区域的时候，从这个数组里随机抽取一个。听起来简单，但效果比纯随机好太多了。我有个项目，给全国各省市的3D地图上色，一开始也是瞎搞，后来我做了个色板，选了5种不同深浅的蓝色，随机分配。结果领导看了说：“嗯，这个看起来专业多了。”
还有个坑要注意，就是颜色的透明度。3D地图因为有多层叠加，如果颜色完全不透明，底下的纹理或者背景就看不见了。建议给颜色加个alpha通道，比如rgba(r,g,b,0.8)，这样层次感就出来了。而且，不要所有区域都用同样的透明度，可以根据数据的大小，动态调整透明度。数据大的区域颜色深一点，数据小的浅一点，这样视觉重心自然就出来了。
再说说那个echarts geo3d随机颜色的实现细节。很多时候大家卡在不知道哪里改配置。其实很简单，就是在series的data数组里，给每个item加一个itemStyle。不要试图用全局的color去控制，那样没法实现差异化。你可以写个辅助函数，专门生成符合你色调要求的颜色值。比如：
function getRandomColor(baseHue) {
var s = 50 + Math.random() * 30;
var l = 40 + Math.random() * 20;
return 'hsl(' + baseHue + ',' + s + '%,' + l + '%)';
}
这样生成的颜色，既保留了随机性，又不会跑偏。当然，这只是个简单的例子，实际项目中可能需要更复杂的逻辑，比如根据数据值的大小来调整颜色的深浅，这样才有数据可视化的意义，不然纯随机就失去了数据的价值。
最后想说，做图表不是为了炫技，而是为了清晰传达信息。echarts geo3d随机颜色也好，固定颜色也罢，最终目的都是让数据说话。如果你为了追求所谓的“随机美感”，导致数据难以辨认，那就是本末倒置了。多试试，多调调，找到那个平衡点，比死记硬背代码管用得多。别怕麻烦，视觉体验这东西，差之毫厘谬以千里。
