Echarts配置项-1

最新推荐文章于 2025-06-13 17:24:07 发布

原创最新推荐文章于 2025-06-13 17:24:07 发布 · 8.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #配置项 #全局配置

Echarts 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了Echarts的配置项setOption()，重点关注全局配置部分，包括标题组件、图例组件、直角坐标系的网格、X轴和Y轴的设置。Echarts3.0相较于2.0支持多标题和多个grid组件，同时图例组件支持滚动显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置项setOption()

配置项地址

这里配置的是前面代码中的option的内容，里面的配置有全局、有局部的，代码格式都一样，
主要记住每个项在哪里可以用，需要用的时候再找对应的位置看配置。

配置项里面有很多组件，比如 **标题组件** 、 **图例组件** 、 **dataZoom组件**等，
所以在需求上可以分开引入不同的包，也可以自己去配置自己需要的包，按需下载嘛

PS: 配置项是以对象形式来书写代码的，注意每个结尾用逗号隔开（','全英文半角），不能使用分号（';'）

全局配置

title 标题组件

包含主标题、副标题。在Echarts中2.0不支持多标题，而3.0可以支持，见下图

Echarts官网实例

这里写图片描述

PS: 多标题必须使用数组的形式，这个组件使用一般，看需求，
    建议可以看看富文本操作 rich 属性

legend 图例组件

展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。Echarts3中支持滚动图例（垂直、水平）

垂直图例实例水平图例实例

这里写图片描述

PS: 图例一般使用在不同系列的数据情况

grid 直角坐标系内绘图网格组件

单个grid中内最多可以放上下两个X轴，左右两个Y轴。可以在网格上绘制折线图、柱状图、散点图（气泡图）
在2.0中只能放一个gird组件，而3.0中可以存在多个grid组件，也是以数组的形式添加，见下图

PS: 这里的两个X轴与两个Y轴说的是实例的上左下右四个边，红色的边框为grid的边，
    也就是上面说的 x 轴与 y 轴，黑色的为grid的边框阴影。
    用于辅助理解他最多两个轴的原因，见下图

红色的边框为grid的边，也就是说的 x 轴与 y 轴，黑色的为grid的边框阴影，用于辅助理解他最多两个轴的原因

多个grid组件实例

这里写图片描述

PS: 可以用 grid 组件把多个ID的实例放在一起，建议最好是有关联的实例。
    且使用 grid 组件的时候需要用 gridIndex 与 xAxisIndex yAxisIndex 配合使用，
    保证他们的 Number 值相同

xAxis: [
    {gridIndex: 0, min: 0, max: 20},
    {gridIndex: 1, min: 0, max: 20},
    {gridIndex: 2, min: 0, max: 20},
    {gridIndex: 3, min: 0, max: 20}
],
yAxis: [
    {gridIndex: 0, min: 0, max: 15},
    {gridIndex: 1, min: 0, max: 15},
    {gridIndex: 2, min: 0, max: 15},
    {gridIndex: 3, min: 0, max: 15}
],
而在series中配置
series: [
    {
        xAxisIndex: 0,
        yAxisIndex: 0,
    },
    {
        xAxisIndex: 1,
        yAxisIndex: 1,
    },
    {
        xAxisIndex: 2,
        yAxisIndex: 2,
    },
    {
        xAxisIndex: 3,
        yAxisIndex: 3,
    },
]

xAxis 直角坐标系 grid 中的 x 轴

一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

PS: 记住，上面我们说了grid配置中最多两个X轴，而这里说的多个X轴，是指在xAxis中配置的，
    而不是在grid中配置，见下图

这里写图片描述

PS: xAxis属于常用系列，可以多看看。

yAxis 直角坐标系 grid 中的 y 轴

一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

PS: yAxis 跟 xAxis 差不多。

每日一更Echarts，每日一点小积累…