本文详细介绍了Echarts中图表配置的各种参数，包括标题组件（主标题、副标题、样式等）、直角坐标系网格（显示、位置调整）、Y轴配置以及折线图、柱状图的基础配置。内容涵盖标题的文本样式、对齐方式，网格的尺寸和颜色，坐标轴的标签、分割线和数据窗口配置，以及折线图的平滑曲线和区域填充，柱状图的宽度和间隔等。
opacity: 0.8 // 透明度0.8
}
},
axisLabel: { // 轴标签设置
show: true, // 显示轴标签
inside: false, // 标签向外
rotate: 20, // 标签旋转角度
margin: 15, // 标签距离轴线距离
color: “rgba(42, 255, 0, 1)”, // 轴标签字体颜色
fontSize: 16 // 轴标签字体大小
},
splitLine: { // 分割线设置
show: true, // 显示分割线
lineStyle: { // 分割线样式设置
color: “rgba(85, 255, 0, 1)”, // 分割线颜色
width: 2, // 分割线宽度
type: “dashed”, // 分割线类型-虚线
opacity: 0.5 // 分割线透明度
}
}
}],
yAxis: [{
type: “value”
}],
series: [{
name: “直接访问”,
type: “bar”,
barWidth: “60%”,
data: [10, 52, 200, 334, 390, 330, 220]
}]
}
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
其常用配置项与 xAxis 相同。
yAxis配置案例
option = {
color: [“#3398DB”],
tooltip: {
trigger: “axis”,
axisPointer: {
type: “shadow”
}
},
grid: {},
xAxis: [{
type: “category”,
data: [“Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”, “Sun”]
}],
yAxis: [{
type: “value”, // y坐标轴类型
show: true, // 显示y轴
name: “数量”, // y轴名称
nameTextStyle: { // 名称样式
color: “rgba(255, 17, 0, 1)”,
fontSize: 12
},
axisLine: { // y轴轴线设置
show: true,
lineStyle: {
color: “rgba(255, 242, 0, 1)”,
width: 0.5
}
},
axisTick: { // y轴刻度线设置
show: true,
length: 5
},
axisLabel: { // y轴标签设置
show: true
},
splitLine: { // y轴分割线设置
show: true,
lineStyle: {
color: “rgba(218, 29, 29, 1)”,
width: 0.5
}
}
}],
series: [{
name: “直接访问”,
type: “bar”,
barWidth: “60%”,
data: [10, 52, 200, 334, 390, 330, 220]
}]
}
标题组件，包含主标题和副标题。
show 是否显示标题组件
show:true/false，boolean类型，true为显示，false为不显示。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
show: true // 显示标题组件
}
}
text 主标题文本
text:“主标题文本内容”，字符串类型，设置主标题文本，支持使用 \n 换行。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
show: true // 显示标题组件
}
}
subtext 副标题文本
subtext:“副标题文本”，字符串类型，支持使用 \n 换行。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true // 显示标题组件
}
}
textStyle 主标题文字样式
textStyle 是一个对象，里面包含了多个属性，例如：
-
color：标题文字颜色。
-
fontStyle：主标题文字字体风格。‘normal’、‘italic’、‘oblique’
-
fontWeight：主标题文字字体粗细，‘normal’、‘bold’、‘bolder’、‘lighter’
-
fontFamily：主标题文字字体系列，‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
-
fontSize：主标题文字字体大小，number类型。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true, // 显示标题组件
textStyle: { // 设置主标题样式
fontSize: 20, // 主标题字体大小
color: “rgba(119, 255, 0, 1)”, // 主标题字体颜色
fontStyle: “italic”, // 主标题字体风格-意大利斜体
fontWeight: “bold”, // 主标题字体粗细-加粗
fontFamily: “Courier New” // 主标题字体系列
},
}
}
subtextStyle 副标题文字样式
subtextStyle 是一个对象，里面包含了多个属性，例如：
-
color：副标题文字颜色
-
fontStyle：副标题文字字体的风格。字符串类型，值可选’normal’、‘italic’、‘oblique’。
-
fontWeight：副标题文字字体粗细，字符串类型，可选值’normal’、‘bold’、‘bolder’、‘lighter’
-
fontFamily：副标题文字的字体系列。可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
-
fontSize：副标题文字大小，number类型。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true, // 显示标题组件
subtextStyle: { // 副标题文本样式
fontSize: 15, // 副标题字体大小
color: “rgba(0, 13, 255, 1)”, // 副标题字体颜色
fontStyle: “normal”, // 副标题字体风格-默认
fontWeight: “lighter”, // 副标题字体粗细-加粗
fontFamily: “monospace” // 副标题字体系列
},
}
}
textAlign 整体水平对齐
textAlign 设置整体（包括 text 和 subtext）的水平对齐。可选值：‘auto’、‘left’、‘right’、‘center’。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true, // 显示标题组件
textAlign: “center” // 居中对齐
}
}
textVerticalAlign
textVerticalAlign 设置整体（包括 text 和 subtext）的垂直对齐。可选值：‘auto’、‘top’、‘bottom’、‘middle’。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true, // 显示标题组件
textVerticalAlign: “middle” // 垂直居中
}
}
itemGap 主副标题之间的间距
itemGap：主副标题之间的间距，number类型。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true, // 显示标题组件
itemGap: 15 // 主副标题间距
}
}
left title组件离容器左侧的距离
title组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
top title组件离容器上侧的距离
title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
right title 组件离容器右侧的距离
title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
bottom title 组件离容器下侧的距离
title 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
option = {
title: {
text: “这是主标题文本”, // 设置主标题文本
subtext: “这是副标题文本”, // 设置副标题文本
show: true, // 显示标题组件
left: “20%”, // 组件离容器左侧的距离
top: “10%”, // 组件离容器上侧的距离
right: 20, // 组件离容器右侧的距离
bottom: 30 // 组件离容器底部的距离
}
}
title 配置案例
option = {
title: { // 标题配置
text: “这是主标题文本”, // 主标题文本
subtext: “这是副标题文本”, // 副标题文本
left: “20%”, // 标题组件距离左侧距离
top: “10%”, // 标题组件距离上部距离
textStyle: { // 标题文本样式设置
fontSize: 20, // 标题文本字体大小
color: “rgba(119, 255, 0, 1)”, // 标题文本字体颜色
fontStyle: “italic”, // 标题文本字体风格
fontWeight: “bold”, // 标题文本字体粗细
fontFamily: “Courier New” // 标题文本字体系列
},
subtextStyle: { // 副标题样式设置
fontSize: 15, // 副标题字体大小
color: “rgba(0, 13, 255, 1)”, // 副标题字体颜色
fontStyle: “normal”, // 副标题字体风格
fontWeight: “lighter”, // 副标题字体粗细
fontFamily: “monospace” // 副标题字体系列
},
show: true, // 显示标题
textAlign: “center”, // 标题水平居中
textVerticalAlign: “middle”, // 标题垂直居中
itemGap: 15, // 主副标题间距
right: 20, // 标题组件距离右侧距离
bottom: 30 // 标题组件距离底部距离
}
}
单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
show 是否显示直角坐标系网格
show:true/false，是否显示直角坐标系网格，boolean类型，true显示，false不显示。
grid: {
show: true // 显示直角坐标系网格
}
left grid 组件离容器左侧的距离
组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
grid: {
show: true, // 显示直角坐标系网格
left: “10%” // 组件离容器左侧的距离
},
top grid 组件离容器上侧的距离
grid 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
grid: {
show: true, // 显示直角坐标系网格
left: “10%”, // 组件离容器左侧的距离
top: 30 // 组件离容器上侧的距离
},
right grid 组件离容器右侧的距离
grid 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。
grid: {
show: true, // 显示直角坐标系网格
left: “10%”, // 组件离容器左侧的距离
top: 30, // 组件离容器上侧的距离
right: “20%”,// 组件离容器右侧的距离
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
