样式定制与主题

🎯 引言

图表画出来了，但默认配色看多了总觉得差点意思。学会这篇文章，你能掌握调色盘、渐变、标签等样式定制方法，还会用内置 dark 主题和自定义主题一键统一全站图表风格。

🧱 调色盘 color

ECharts 默认给系列分配一组内置颜色（ECharts 6 启用了全新默认主题，配色更现代）。想换配色，用顶层 color 数组覆盖，系列会按顺序取色：

chart.setOption({
    color: ['#5470c6', '#91cc75', '#fac858'],
    // ...
});

✨ 渐变与线条样式

想更出彩，可以用 itemStyle 配合 LinearGradient 做渐变色，这在柱状图里特别常见：

series: [
    {
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#a5b4fc' },
                { offset: 1, color: '#6366f1' },
            ]),
        },
    },
],

LinearGradient 的前四个参数是渐变方向 (x1, y1, x2, y2)，0, 0, 0, 1 表示从上到下。

渐变柱子的真实渲染效果：

上面是柱状图的写法。折线图的构成不一样，它由线条、数据点和填充区域三部分组成，对应另外三个样式属性：

• lineStyle：线条的颜色、宽度。
• itemStyle：数据点小圆圈的颜色。
• areaStyle：折线下方填充区域的颜色（同样支持渐变）。

series: [
    {
        name: '访问量',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        lineStyle: {
            color: '#5470c6',
            width: 3,
        },
        itemStyle: {
            color: '#5470c6',
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(84, 112, 198, 0.4)' },
                { offset: 1, color: 'rgba(84, 112, 198, 0)' },
            ]),
        },
    },
],

线条、数据点、渐变面积三部分配合的真实渲染效果：

🧱 数据标签 label

想让数值直接显示在图形上，用 label：

series: [
    {
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70],
        label: {
            show: true,
            position: 'top',
        },
    },
],

• show: true 显示标签。
• position 控制位置，柱状图常用 'top'，饼图常用 'outside'。

数值直接标注在柱子顶部的真实效果：

🧱 内置 dark 主题

ECharts 内置了一套暗色主题，初始化时传入 'dark' 即可：

const chart = echarts.init(chartRef.value, 'dark');

🧰 自定义主题 registerTheme

当内置主题满足不了品牌要求时，可以注册自己的主题：

import * as echarts from 'echarts';

echarts.registerTheme('myTheme', {
    color: ['#2ec7c9', '#b6a2de', '#5ab1ef'],
    backgroundColor: '#ffffff',
    textStyle: {
        fontFamily: 'PingFang SC, sans-serif',
    },
});

初始化时使用主题名：

const chart = echarts.init(chartRef.value, 'myTheme');

主题对象里可以定义调色盘、背景色、文字样式等，所有用该主题初始化的图表会统一生效。

🧾 小节总结

• 顶层 color 数组是调色盘，系列按顺序取色，适合统一品牌色。
• LinearGradient 可实现渐变，itemStyle / lineStyle / areaStyle 分管图形、线条、填充。
• label.show 可以把数值直接标注在图形上，position 控制位置。
• 内置 'dark' 暗色主题，echarts.registerTheme() 可注册全局自定义主题。
• 样式优先级：系列里的具体配置 > 主题 > 默认样式。

❓ 知识问答

Q1：为什么我在系列里设置了 color，主题色就不生效了？

正常，遵循就近原则：系列内的配置优先级最高，会覆盖主题和调色盘的颜色。

Q2：LinearGradient 的颜色参数是什么格式？

是一个数组，每项 { offset, color }。offset 取值 0 到 1，表示颜色在渐变方向上的位置。

Q3：主题能在初始化之后更换吗？

传统做法是销毁实例后带着新主题重新 init。ECharts 6 对主题能力做了升级，支持更平滑的切换，具体可查阅官方手册。

Q4：label 显示太挤怎么办？

可以只给重点系列开 label，或者调整 position、fontSize，柱状图还可以配合 barWidth 留出空间。

🧪 小练习

把上一篇的“一周销量”柱状图美化一下：

1. 用 LinearGradient 给柱子加上从上到下的渐变，颜色自选。
2. 用 label 把数值显示在柱子顶部。
3. 注册一个名为 'brand' 的主题，调色盘包含三种你喜欢的颜色，并用它初始化图表。

// 请在这里编写代码

🎉 恭喜你掌握了图表美化技能！下一篇我们给图表加上交互：事件响应、区域缩放和数据标注。