ECharts v6.0发布，新布局，新主题，新功能

大家好，我是农村程序员，独立开发者，行业观察员，前端之虎陈随易。我会在这里分享关于 独立开发、编程技术、思考感悟 等内容，欢迎关注。

技术群与交朋友请在个人网站联系我，网站 1️⃣：chensuiyi.me，网站 2️⃣：me.yicode.tech。

如果你觉得本文有用，一键三连 (点赞、评论、转发)，就是对我最大的支持~

碎碎念：曾几何时，我也是 ECharts 的日常用户，当时在外包公司，监控大屏+数据图表 就是 ECharts 的主场，虽然现在很久没接触了，但对 ECharts 一直在持续关注。顺便说一个我的观点，很多人问过我怎么接外包，怎么接单的问题，这里我分享一个思路。你只要把 ECharts 用得炉火纯青，在网上发一些自己写的图表效果，案例，你绝对不会差项目和单子，这个思路值得给本文来个三连。

话不多说，接下来分享 ECharts 6.0 的变动尝鲜版，为什么是尝鲜版？因为这篇文章是正式发布 6.0 后6分钟开始写的，官方博文还没发，是我根据更新日志跟踪每个 issue 分析研究写出的文章，关注我，可以收获第一手技术资讯哦。

新的主题布局

上图中，左侧 2 个是 ECharts 5 效果，右侧 2 个是 ECharts 6 效果。

可以看到，v5 版本的 标题(title) 和 图例(legend) 在宽度较窄的时候，会挤压到一起，导致混乱和覆盖。

那么 v6 版本，则将 标题(title) 放到图表上方，图例(legend) 放到图表下方，这样不仅不会相互影响，而且整体还更协调，更好看了。

新的主题颜色

还是老规矩，左侧是 v5，右侧是 v6，分别展示了 1-9 个数据的不同颜色效果。

除了布局变成了 上下结构 外，颜色也有了较为明显的区别，整体来说就是 颜色更深了，辨识度更高 了。

颜色设计是一个非常重要的点，要保证区分度，同时又能保持整体的和谐，是表达图表专业度的重要指标。

上图是冷暖色调的展示，可以发现，冷暖色调一致的颜色，组合在一起更加和谐。

而最下方的冷暖色调混合，效果则差了一些。

同时，新的主题色，在 灰度 效果下，区别会更加明显。

另外呢，第三个数据颜色从 橙黄色 变成了 深灰色，可以查看前面有 4 个数据的图表进行对比，整体更加和谐，看起来不那么突兀。

动态更新主题

js 复制代码

echarts.registerTheme('dark', darkTheme);
const chart = echarts.init(dom, 'dark');

之前版本

主题只能在图表初始化之前设置，图表创建后无法动态更改主题。

现在可以

使用 chart.setTheme('themeName') 或 chart.setTheme(themeObject) 动态更改已注册主题的主题。
如果使用 themeName，则可以应用图表创建之前或之后注册的主题。
主题更改会立即应用，而无需调用 setOption。

使用示例：

js 复制代码

// 注册主题
echarts.registerTheme('dark', darkTheme);
const chart = echarts.init(dom);
chart.setTheme('dark');

// 动态住蹙额主题，在图表创建后
echarts.registerTheme('forest', forestTheme);
chart.setTheme('forest');

// 以上操作等于
chart.setTheme(forestTheme);
// 唯一的区别是 forestTheme 是一个匿名对象，因此不能被其他图表重复使用。

// 直接使用主题对象
chart.setTheme({
    backgroundColor: '#333',
    title: {
        textStyle: {
            color: '#fff'
        }
    }
});

图表缩略图

对于地图、图表、树状图、桑基图等系列，数据形状有时可能过大，无法在图表中不重叠地显示。

有些图表支持漫游 (不支持桑基图)，但用户可能无法了解当前可见数据与整体数据之间的关系。

缩略图在这些情况下非常有用，可以让用户直观地了解整个系列的整体形状和当前可见区域。

通用图表和组件

条形图

，隐藏了 类别 轴的 axisTick(刻度)，大多数情况下，距离关系已经能够表达距离信息，移除 axisTick(刻度) 使视觉效果更连续，并减少不必要的冗余信息，网格底部留出更多空间，以防止图例有两行时重叠。

折线图

增加了 lineStyle.width 和 symbolSize，使整体外观更加现代和自信，原来的 symbolSize 与线宽过于接近，缺乏区分性，因此不美观。

以前用的时候，确实有这个问题，还得手动调整大小，线宽，现在直接默认了，方便。

饼图

减小 radius 以增加更多空白，提升美观度并避免与其他组件重叠，增加 labelLine 宽度。

原来的看起来像 大头爸爸，现在的看起来像 小头儿子，后者更加协调好看，Nice！

散点图

漏斗图

树形图

原布局左右采用百分比定位，现改为固定像素大小，且该大小与其他组件 (如热力图控件、工具箱等) 的边距一致。

原 breadcrumb 导航深灰色背景在视觉上过重，但逻辑上并非主要信息，因此改为浅灰色背景。

旭日图

原先下钻返回节点使用第一个主题色，导致默认视图从第二个主题色开始，与其他图表看起来有区别，因此修改为下钻节点使用灰色。

主题河图

由于是随机数据，所以看起来不太相似，但这张图表实际上并没有显著的变化。

时间线

调整颜色，避免使用可能被误认为禁用状态的灰色。

重新绘制图标 SVG，以保持宽度一致，移除描边和阴影，因为 ECharts 的整体设计是扁平化的，如果阴影无法避免误解，则应避免使用。

数据缩放和工具箱

调整颜色，以避免使用可能被误认为是禁用状态的灰色。

视觉地图和日历

ECharts 5 使用了红黄渐变色，但这种颜色仅出现在 VisualMap 中，与整体设计缺乏关联。

为了与其他图表更加一致，并避免红色带来的警示含义 (因为数值越大并不总是意味着效果越好或越差)，我们将其调整为与第一个主题色相关的渐变色。

VisualMap 控件的侧面留白更多，该距离与其他组件的边距一致。日历颜色略有调整。

地图

ECharts 5 地图中的黄色高亮背景在其他任何地方都没有使用，与整体设计不太协调。

其实，这种高亮类似于条形图强调后的颜色提升，只是颜色过浅会比较难看，所以改成了稍微深一点的背景色。

暗色模式

部分暗色效果。

markPoint markLine markArea 支持 z 选项

如图，折线图可以位于柱状图的前面或后面。

支持轴标签的工具提示

当坐标轴的标签内容比较长，或者被隐藏时，现在可以显示坐标轴标签的完整名称提示了。

新和弦系列

其他值包括 target (使用目标颜色作为边缘颜色) 和 source (使用源颜色作为边缘颜色)。

新的矩阵坐标

可以与其一起使用热图、饼图、图形、自定义等多个系列。

更多应用。

可重复使用的自定义系列

制作可重复使用的自定义系列：

js 复制代码

const renderItem = (params, api) => {
    return {
        type: 'circle',
        shape: {
            cx: api.coord([api.value(0), api.value(1)])[0],
            cy: api.coord([api.value(0), api.value(1)])[1],
            r: api.value(2) * (params.itemPayload.scale || 1)
        },
        style: {
            fill: api.visual('color'),
            opacity: params.itemPayload.opacity() || 1
        }
    };
};
echarts.registerCustomSeries('bubble', renderItem);

使用上述自定义系列：

js 复制代码

const option = {
    xAxis: {},
    yAxis: {},
    series: {
        type: 'custom',
        renderItem: 'bubble',
        itemPayload: {
            scale: 2,
            opacity: () => Math.random() * 0.5 + 0.5
        },
        data: [
            [11, 22, 20],
            [33, 44, 40],
            [18, 24, 10]
        ]
    }
};