前端做图表总被吐槽太丑？echarts这5个设计原则让数据一眼看懂
你是不是也遇到过这种情况——花了半天时间搭好一个图表，满怀期待地发给产品经理，结果只换来一句”感觉不太对”。
别急着改代码，先坐下来聊聊。
图表丑，往往不是技术问题，而是设计逻辑的问题。ECharts本身给了你足够的自由度，但自由过头就容易变成”想放啥就放啥”，结果图表变成了大杂烩，眼睛不知道该往哪看。
今天不聊技术细节，聊聊那些让图表从”能用”变成”好看”的关键设计原则。这些都是我从各种翻车现场里摸爬滚打出来的经验，有些是踩坑换来的教训，有些是参考了成熟数据产品的设计思路。
一、留白不是浪费空间，是给数据呼吸的缝隙
我第一次认真理解”留白”这个词，是在对比两个仪表盘的时候。
一个是某内部系统的监控大盘，密密麻麻填满了各种曲线、柱状图、数字，整个页面像被塞满的抽屉。另一个是某知名数据平台的展示页，同样面积的数据量，但看起来就是”透气”。
区别就在留白。
ECharts里控制留白的属性主要集中在grid对象上：
option = {
grid: {
left: '10%',
right: '5%',
top: '15%',
bottom: '10%',
containLabel: true // 确保坐标轴标签不会被裁切
}
}
很多人习惯把grid的各边值设得很小，觉得”能多展示一点数据就多展示一点”。但这样做的后果是图表看起来拥挤，读者需要费力地分辨每个元素的边界。
留白的本质是引导视觉焦点。当某个区域是空的，眼睛会自然地向有内容的区域聚焦。如果你把所有空间都填满，读者反而会迷失方向。
一个实用的判断标准：如果你的图表需要在手机屏幕上也能看清楚，那它在桌面端至少应该留出20%左右的空白区域。这个比例听起来很大，但实际效果是立竿见影的。
二、颜色不是越多越丰富，而是越克制越专业
很多前端同学在做图表配色时，会不自觉地陷入”彩虹陷阱”——每个系列都用不同的颜色，争取让每个数据系列都”出彩”。
结果出来的图表，往往像一个被打翻的调色盘。
颜色的首要功能是区分，而不是装饰。当你的图表里出现了超过6种颜色，读者的认知负担就会显著增加。人类短期记忆能同时处理的项目数量大约是7个，图表颜色一多，大脑就超负荷了。
ECharts的调色板可以通过color属性自定义：
option = {
color: ['#1890ff', '#52c41a', '#faad14', '#f5222d'],
// 通常4-5个颜色就够用了
}
这里有一个实用的配色思路：主次分明。
你可以把图表中的颜色分成三类：
- 主色：用于最重要、最核心的数据系列，用饱和度高、识别度强的颜色
- 辅色：用于次要数据系列，用相对柔和的颜色
- 中性色：用于背景、网格线、坐标轴等装饰性元素，用灰度色系
举个例子，假设你在做一个销售数据看板，有三个系列：月度销售额、季度目标、去年同期对比。
这时候你可以这样分配颜色：
- 月度销售额用蓝色（主色，读者最关心）
- 季度目标用橙色（辅色，需要关注但不是最核心）
- 去年同期对比用浅灰色（中性色，作为参考基准）
这样做的好处是，读者一眼就能看出”哪个最重要”。而不是所有颜色都 equally important，最后谁都不突出。
另一个常见的错误是使用高饱和度的颜色做背景或辅助元素。比如用鲜红色做网格线，用亮绿色做坐标轴文字。这些颜色的视觉重量太大，会抢夺主数据的注意力。背景、网格线、坐标轴这些元素，最好用#f0f0f0、#e0e0e0这类浅灰色，它们的存在感应该尽可能低。
三、标题不是越详细越好，而是越精准越好
“2024年Q3华东地区各城市月度销售额趋势分析”
这样的标题，我见过太多。
标题的作用是什么？是让读者在0.5秒内知道这个图表在讲什么。而不是让读者读完标题之后，还需要再花5秒理解图表内容。
ECharts里标题通过title组件配置：
option = {
title: {
text: '华东地区月度销售额趋势',
subtext: '单位：万元',
left: 'center',
top: 10,
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
},
subtextStyle: {
fontSize: 12,
color: '#999'
}
}
}
一个好的标题结构应该是：核心结论 + 必要限定。
比如上面的例子，更好的写法可能是：
title: {
text: '销售额连续三月下滑',
subtext: '华东地区 | 2024年7-9月',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
color: '#333'
}
}
你发现区别了吗？第一个标题是”描述性的”，告诉读者图表里有什么。第二个标题是”结论性的”，直接告诉读者应该关注什么。
在业务场景中，看图表的人往往已经知道这张图大概在讲什么。他们需要的是快速定位关键信息。所以标题应该服务于这个目标，而不是重复图表已有的信息。
一个实用的技巧：把你的标题想象成新闻的标题。好的新闻标题不是在说”今天某地发生了某事”，而是在说”某地发生了什么值得关注的事”。
四、坐标轴不是越满越好，而是越干净越好
坐标轴是图表的骨架，但很多图表的坐标轴承担了太多不该承担的功能。
比如：
- 在Y轴上标注了大量不必要的刻度值
- 网格线密密麻麻，像一张渔网
- 坐标轴文字过长，挤在一起
ECharts中坐标轴的配置非常灵活，但也正因如此，很容易被过度配置：
option = {
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
axisLabel: {
fontSize: 12,
color: '#666'
},
axisLine: {
lineStyle: {
color: '#ddd' // 用浅灰色，降低存在感
}
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed', // 虚线比实线更柔和
color: '#eee' // 浅灰色网格线
}
},
axisLabel: {
formatter: '{value}万' // 单位统一写在标签里，不要单独放标题
}
}
}
坐标轴设计的核心原则是：降低视觉噪音。
网格线的作用是帮助读者对齐数据点和刻度值，而不是填满整个图表区域。如果网格线太密、颜色太深，反而会干扰读者对数据本身的关注。
一个简单的判断方法：当你遮住网格线之后，是否还能大致读出每个数据点的值？如果能，说明网格线的密度是合理的。
另一个常被忽视的细节是坐标轴标题的位置和样式。很多图表会在Y轴左侧或顶部添加单位说明，比如”销售额（万元）”。这种做法本身没有错，但更好的方式是把单位直接融入刻度标签中，比如上面代码里的formatter: '{value}万'。这样既节省了空间，又让每个数值都自带单位，读者不需要在图表不同位置来回寻找信息。
五、数据不是越全越好，而是越相关越好
这是最重要、也最难做到的一条原则。
做图表的时候，我们很容易陷入一个误区：数据越多，图表越”完整”。于是我们把历史数据、预测数据、对比数据、明细数据全部塞进一张图里，期望读者能”一目了然”。
但结果往往是：一目了然之后，什么也没记住。
ECharts支持丰富的图表类型和数据系列，但这不代表你应该把所有类型都用在一张图里：
option = {
series: [
{
name: '实际销售额',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '目标销售额',
type: 'line',
data: [150, 150, 150, 150, 150, 150, 150],
// 目标线用虚线，和实际数据区分开
lineStyle: { type: 'dashed' }
}
]
}
在这个例子里，只有两个系列：实际和销售目标。没有去年同期、没有预测值、没有各地区细分、没有其他维度的数据。
为什么？因为这张图想回答的问题是：实际销售有没有达标？
如果一张图想回答五个问题，它最终可能一个都回答不清楚。
一个实用的方法是在做图表之前，先问自己：这张图要传达的核心信息是什么？
把这个信息写下来，然后审视每一个数据系列，问自己：这个系列对传达核心信息有帮助吗？如果没有，删掉它。如果有，保留它。
这种做法可能会让图表看起来”数据不够多”，但好的图表从来不是以数据量为荣的。好的图表是以信息传达效率为荣的。
写在最后
图表设计这件事，说到底是在处理一个矛盾：信息密度和可读性之间的矛盾。
信息密度太低，图表显得空洞，读者会觉得”就这？”；信息密度太高，图表显得拥挤，读者会觉得”看不懂”。
ECharts给了你无限的可能，但真正的好图表，往往是在克制中诞生的。
留白多一点，颜色少一点，标题准一点，坐标轴干净一点，数据聚焦一点。
这五条原则听起来简单，但真正用到项目里的时候，每一个都需要你主动去”做减法”。因为默认状态下，ECharts倾向于让你把所有功能都打开、把所有数据都展示、把所有颜色都用上。
而你的任务，是反过来：把不必要的东西拿掉，让必要的东西说话。
下次被吐槽图表丑的时候，别急着换主题、换配色、换插件。先停下来想想：这张图的核心信息是什么？我现在做的每一个调整，是在帮助传达这个信息，还是在分散读者的注意力？
想清楚这个问题，图表自然就好看。