Echarts option常用属性配置
Echarts option常用属性配置
官网配置项详情：https://echarts.apache.org/zh/option.html#title
成功绘制一个Echarts图表至少包含三部分：x轴xAxis、y轴yAxis、系列列表series。
option = {
xAxis: {
type: 'category', // x坐标轴类型
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 类目数据
},
yAxis: {
type: 'value' // y坐标轴类型
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320], // 数据内容数组
type: 'line' // 图表类型 线形图
}]
};
xAxis常用配置
xAxis：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
show 是否显示坐标轴
show:true / false，Boolean类型，是否显示 x 轴，true显示，false不显示。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
show: true // 显示坐标轴
}],
position 坐标轴位置
position:"top" / "bottom"， 字符串类型，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
position: "bottom" // 坐标轴底部显示
}],
type 坐标轴类型
type:"类型"，字符串类型
类型可取值：
- 'value' 数值轴，适用于连续数据。
- 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
- 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- 'log' 对数轴。适用于对数数据。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
name: "日期" // 坐标轴名称
}],
name 坐标轴名称
name:"x轴自定义名称" 。字符串类型，默认显示在右侧。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
show: true // 显示坐标轴
}],
nameTextStyle 坐标轴名称样式
nameTextStyle 是一个对象，里面包含多个属性，例如：
- color：坐标轴名称的颜色。
- fontSize：字体大小，number类型。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
nameTextStyle: {
color: "rgba(0, 255, 212, 1)",
fontSize: 12
}
}],
axisLine 坐标轴轴线相关设置
axisLine 是一个对象，里面包含多个属性，例如：
- show:true/false 是否显示坐标轴轴线。
- lineStyle 轴线样式设置，是一个对象，里面包含多个属性，例如：
- color：坐标轴轴线颜色。
- width：坐标轴轴线的宽度，number类型。
- type：坐标轴轴线类型。可选类型：'solid'、'dashed'、'dotted'。
- opacity：轴线透明度。number类型，取值范围0~1，0为不绘制轴线。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
axisLine: { // 坐标轴轴线设置
show: true, // 显示坐标轴轴线
lineStyle: { // 轴线样式设置
color: "rgba(238, 10, 10, 1)", // 轴线颜色
width: 1, // 轴线宽度
type: "dashed", // 轴线类型-虚线
opacity: 0.8 // 轴线透明度0.8
}
}
}],
axisTick 坐标轴刻度相关设置
axisTick是一个对象，里面包含多个属性，例如：
- show:true/false，是否显示刻度，boolean类型，true为显示，false为不显示。
- inside:true/false，刻度是否朝内，默认朝外，boolean类型，true朝内，false朝外。
- length：坐标轴刻度长度，number类型。
- lineStyle：刻度样式设置，是一个对象，里面包含多个属性，例如：
- color：刻度线的颜色。
- width：刻度线的宽度，number类型。
- type：刻度线的类型。可选类型：'solid'、'dashed'、'dotted'。
- opacity：刻度线透明度。number类型，取值范围0~1，0为不绘制刻度线。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
axisTick: { // 坐标轴刻度线设置
show: true, // 显示刻度线
inside: false, // 刻度线向外
length: 5, // 刻度线长度
lineStyle: { // 刻度线样式设置
width: 0, // 刻度线宽度
type: "dashed", // 刻度线类型-虚线
opacity: 0.8 // 刻度线透明度
}
}
}],
axisLabel 坐标轴刻度标签相关设置
axisLabel 是一个对象，里面包含多个属性，例如：
- show:true/false，是否显示刻度标签，boolean类型，true显示，false不显示。
inside:true/false，刻度标签是否朝内，boolean类型，true朝内，false朝外。 - rotate：标签旋转角度，number类型，刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
- margin：刻度标签与轴线之间的距离，number类型。
- color：刻度标签文字颜色。
- fontSize：文字字体大小，number类型。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
axisLabel: { // 刻度标签相关设置
show: true, // 显示刻度标签
inside: false, // 刻度标签向外
rotate: 20, // 标签旋转角度
margin: 15, // 标签与轴线间距离
color: "rgba(42, 255, 0, 1)", // 标签字体颜色
fontSize: 16 // 标签字体大小
}
}],
splitLine 坐标轴在 grid 区域中的分隔线
splitLine 是一个对象，里面包含多个属性，例如：
- show:true/false，boolean类型，是否显示分隔线。默认数值轴显示，类目轴不显示。
- lineStyle 分割线样式，是一个对象，里面包含多个属性，例如：
- color：分隔线颜色，字符串或数组类型，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
- width：分隔线宽度，number类型。
- type：分割线的类型。可选类型：'solid'、'dashed'、'dotted'。
- opacity：分割线透明度。number类型，取值范围0~1，0为不绘制分隔线。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
splitLine: { // 分割线设置
show: true, // 显示分割线
lineStyle: { // 分割线样式设置
color: "rgba(85, 255, 0, 1)", // 分割线颜色
width: 2, // 分割线宽度
type: "dashed", // 分割线类型-虚线
opacity: 0.5 // 分割线透明度0.5
}
}
}],
data 类目数据
类目数据，在类目轴（type: 'category'）中有效。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
}],
xAxis基础配置案例
option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {},
xAxis: [{
type: "category", // x坐标轴类型
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
show: true, // 显示x轴
name: "日期", // x轴名称
nameTextStyle: { // 名称样式
color: "rgba(11, 28, 157, 1)", // 颜色
fontSize: 12 // 字体大小
},
axisLine: { // 轴线设置
show: true, // 显示轴线
lineStyle: { // 轴线样式设置
color: "rgba(255, 0, 0, 1)", // 轴线颜色
width: 0, // 轴线宽度
type: "dashed" // 轴线类型-虚线
}
},
axisTick: { // 坐标轴刻度
show: true, // 显示轴刻度
inside: false, // 轴刻度向外
length: 5, // 轴刻度长度
lineStyle: { // 轴刻度样式
width: 1, // 轴刻度宽度
type: "dashed", // 轴刻度虚线
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]
}]
}
yAxis常用配置
直角坐标系 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]
}]
}
title 标题组件
标题组件，包含主标题和副标题。
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 直角坐标系内绘图网格
单个 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%",// 组件离容器右侧的距离
},
bottom grid 组件离容器下侧的距离
grid 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
grid: {
show: true, // 显示直角坐标系网格
left: "10%", // 组件离容器左侧的距离
top: 30, // 组件离容器上侧的距离
right: "20%",// 组件离容器右侧的距离
bottom: 5 // 组件离容器右侧的距离
},
width grid 组件的宽度
grid 组件的宽度。默认自适应。
grid: {
show: true, // 显示直角坐标系网格
width: "80%" // grid 组件宽度
},
height grid 组件的高度
grid 组件的高度。默认自适应。
grid: {
show: true, // 显示直角坐标系网格
height: "50%" // grid 组件高度
},
backgroundColor 网格背景色，默认透明
网格背景色，默认透明。颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'，此配置项生效的前提是，设置了 show: true。
grid: {
show: true, // 显示直角坐标系网格
backgroundColor: "rgba(235, 30, 30, 1)" // 网格背景色
},
borderColor 网格的边框颜色
网格的边框颜色。支持的颜色格式同 backgroundColor。注意：此配置项生效的前提是，设置了 show: true。
grid: {
show: true, // 显示直角坐标系网格
borderColor: "rgba(204, 204, 204, 1)" // 网格边框颜色
},
borderWidth 网格的边框线宽
网格的边框线宽。注意：此配置项生效的前提是，设置了 show: true。
grid: {
show: true, // 显示直角坐标系网格
borderColor: "rgba(204, 204, 204, 1)", // 网格边框颜色
borderWidth: 7 // 网格的边框线宽
},
直角坐标系配置案例
option = {
grid: { // 直角坐标系网格配置
show: true, // 显示直角坐标系网格配置
left: "10%", // 网格距离左侧距离
top: 30, // 网格距离上侧距离
right: "20%", // 网格距离右侧距离
bottom: 5, // 网格距离底部距离
width: "80%", // 网格宽度
height: "50%", // 网格高度
backgroundColor: "rgba(235, 30, 30, 1)", // 网格背景颜色
borderColor: "rgba(204, 204, 204, 1)", // 网格边框颜色
borderWidth: 7 // 网格边框宽度
},
xAxis: [{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
}],
yAxis: [{
type: "value"
}],
series: [{
name: "直接访问",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}]
}
tooltip 提示框组件
show 是否显示提示框组件
show:true/false，Boolean类型，true显示，false不显示。
tooltip: {
show: true // 显示提示框
},
trigger 触发类型
触发类型。字符串类型。
可选值：
- 'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
- 'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
- 'none'：什么都不触发。
tooltip: {
show: true // 显示提示框
trigger: "axis", // 坐标轴触发
},
axisPointer 坐标轴指示器配置项
坐标轴指示器配置项。是一个对象，里面包含了多个属性，例如：
type：指示器类型，可选值：
- 'line' 直线指示器
- 'shadow' 阴影指示器
- 'none' 无指示器
- 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
tooltip: {
trigger: "axis", // 坐标轴触发
axisPointer: {
type: "cross" // 十字准星指示器
}
},
tooltip 提示框组件配置案例
tooltip: {
show: true // 显示提示框
trigger: "axis", // 坐标轴触发
axisPointer: {
type: "cross" // 十字准星指示器
}
},
legend 图例组件
图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
show 是否显示图例组件
show:true/false，Boolean类型，true显示，false不显示。
legend: {
show: true // 显示图例
},
left 图例组件离容器左侧的距离
图例组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
legend: {
show: true, // 显示图例
left: "20%" // 图例组件离容器左侧的距离
},
top 图例组件离容器上侧的距离
图例组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
legend: {
show: true, // 显示图例
top: 10 // 图例组件离容器上侧的距离
},
right 图例组件离容器右侧的距离
图例组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
legend: {
show: true, // 显示图例
right: "15%" // 图例组件离容器右侧的距离
},
bottom 图例组件离容器下侧的距离
图例组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
legend: {
show: true, // 显示图例
bottom: 30 // 图例组件离容器下侧的距离
},
width 图例组件的宽度
图例组件的宽度。默认自适应。number或字符串类型。
legend: {
show: true, // 显示图例
width: "50%" // 图例组件的宽度
},
height 图例组件的高度
图例组件的高度。默认自适应。number或字符串类型。
legend: {
show: true, // 显示图例
height: 10 // 图例组件的高度
},
orient 图例列表的布局朝向
图例列表的布局朝向。可选值：'horizontal'、'vertical'。
legend: {
show: true, // 显示图例
orient: "horizontal" // 图例列表水平布局
},
itemGap 图例每项之间的间隔
图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。number类型。
legend: {
show: true, // 显示图例
orient: "horizontal", // 图例列表水平布局
itemGap: 15 // 图例每项之间的间隔
},
itemWidth 图例标记的图形宽度
图例标记的图形宽度。number类型。
legend: {
itemWidth: 10 // 图例标记的图形宽度
},
itemHeight 图例标记的图形高度
图例标记的图形高度。number类型。
legend: {
itemHeight: 15 // 图例标记的图形高度
},
textStyle 图例的公用文本样式
图例的公用文本样式，是一个对象，里面包含多个属性，例如：
- color：文字颜色。
- fontStyle：文字风格。
- fontWeight：文字粗细。
- fontFamily ：字体系列。
- fontSize：字体大小。
legend: {
textStyle: { // 图例文本样式
color: "rgba(239, 15, 15, 1)", // 文本颜色
fontStyle: "italic", // 字体风格
fontWeight: "bold", // 字体粗细
fontFamily: "serif", // 字体系列
fontSize: 15 // 字体大小
}
},
icon 图例项的 icon
图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
legend: {
icon: "circle" // 图例项的 icon
},
data 图例的数据数组
图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
legend: {
data: ["温度", "湿度"] // 图例的数据数组
},
legend 图例组件配置案例
option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
dataset: {
source: [
["type", "2012", "2013", "2014", "2015", "2016"],
["Forest", 320, 332, 301, 334, 390],
["Steppe", 220, 182, 191, 234, 290]
]
},
legend: {
show: true, // 显示图例
left: "20%", // 图例组件离容器左侧的距离
top: 10, // 图例组件离容器上侧的距离
right: "15%", // 图例组件离容器右侧的距离
bottom: 30, // 图例组件离容器下侧的距离
width: "50%", // 图例组件的宽度
height: 10, // 图例组件的高度
orient: "horizontal", // 图例列表水平布局
itemGap: 15, // 图例每项之间的间隔
itemWidth: 10, // 图例标记的图形宽度
itemHeight: 15, // 图例标记的图形高度
textStyle: { // 图例文本样式
color: "rgba(239, 15, 15, 1)",
fontStyle: "italic",
fontWeight: "bold",
fontFamily: "serif",
fontSize: 15
},
icon: "circle" // 图例项的 icon
},
xAxis: {
type: "category",
axisTick: {
show: false
}
},
yAxis: {},
series: [{
type: "bar"
}, {
type: "bar"
}, {
type: "bar"
}, {
type: "bar"
}]
}
color 调色盘颜色列表
调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
默认为：['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
}
dataZoom-slider 滑动条型数据区域缩放组件
滑动条型数据区域缩放组件（dataZoomSlider）
type
type:'slider'
dataZoom: [{
type: 'slider'
}],
show 是否显示组件
show:true/false，是否显示缩放组件，boolean类型，true显示，false不显示。
dataZoom: [{
show: true // 显示组件
}],
backgroundColor 背景颜色
组件的背景颜色。字符串类型。
dataZoom: [{
show: true,
backgroundColor: "rgba(9, 148, 244, 0)" // 设置缩放组件背景颜色
}],
fillerColor 选中范围填充颜色
选中范围填充颜色，字符串类型。
dataZoom: [{
show: true, // 显示缩放组件
backgroundColor: "rgba(241, 33, 10, 0)", // 设置缩放背景色
fillerColor: "rgba(204, 167, 167, 0.4)" // 设置选中区域背景色
}],
borderColor 边框颜色
边框颜色，字符串类型。
dataZoom: [{
show: true,
backgroundColor: "rgba(241, 33, 10, 0)", // 设置背景颜色
fillerColor: "rgba(204, 167, 167, 0.4)", // 设置选中区域颜色
borderColor: "rgba(176, 58, 91, 1)" // 设置边框颜色
}],
textStyle 文字样式设置
字体设置项，是一个对象，里面包含多个属性，例如：
- color：设置字体颜色，字符串类型。
- fontStyle：设置字体风格，可选值有：'normal'、'italic'、'oblique'。
- fontWeight：字体粗细设置，可选：'normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...
- fontSize：文字大小。
dataZoom: [{
show: true,
textStyle: { // 文字样式设置
color: "rgba(90, 172, 226, 1)", // 文字颜色
fontStyle: "italic", // 文字字体风格
fontWeight: "bold", // 文字粗细
fontSize: 15 // 文字字体大小
}
}],
start 数据窗口范围的起始百分比
数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
dataZoom: [{
show: true,
start: 20 // 数据窗口范围开始百分比
}],
end 数据窗口范围的结束百分比
数据窗口范围的结束百分比。范围是：0 ~ 100。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
dataZoom: [{
show: true,
start: 20, // 数据窗口范围开始百分比
end: 80 // 数据窗口范围结束百分比
}],
left 组件离容器左侧的距离
left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
dataZoom: [{
show: true,
left: "15%" // 容器距离左侧距离
}],
top 组件离容器上侧的距离
dataZoom-slider组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
dataZoom: [{
show: true,
top: 10 // 容器距离上侧距离
}],
right 组件离容器右侧的距离
dataZoom-slider组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
dataZoom: [{
show: true,
right: "20%" // 容器距离右侧距离
}],
bottom 组件离容器下侧的距离
dataZoom-slider组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
dataZoom: [{
show: true,
bottom: 30 // 容器距离下侧距离
}],
dataZoom-slider缩放组件配置案例
option = {
color: ["#3398DB"], // 设置颜色
tooltip: { // 提示框
trigger: "axis"
},
xAxis: { // x轴设置
data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
},
yAxis: { // y轴设置
splitLine: {
show: false
}
},
dataZoom: [{ // 缩放设置
show: true, // 是否显示缩放
backgroundColor: "rgba(241, 33, 10, 0)", // 缩放背景
fillerColor: "rgba(204, 167, 167, 0.4)", // 选中区域背景
borderColor: "rgba(176, 58, 91, 1)", // 边框背景
textStyle: { // 缩放文本设置
color: "rgba(90, 172, 226, 1)", // 文本颜色
fontStyle: "italic", // 文本字体风格
fontWeight: "bold", // 文本字体粗细
fontSize: 15 // 文本字体大小
},
start: 20, // 数据窗口范围的开始百分比
end: 80, // 数据窗口范围的结束百分比
left: "15%", // 组件距离左侧距离
right: "20%", // 组件距离右侧距离
bottom: 30 // 组件距离下侧距离
}],
series: {
name: "Beijing AQI",
type: "bar",
data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
}
}
visualMap 连续型视觉映射组件
连续型视觉映射组件（visualMapContinuous）
type 类型
type:'continuous'/'piecewise'， continuous为连续型，piecewise为分段型。
min 组件的允许的最小值
指定 visualMapContinuous 组件的允许的最小值。number类型，'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
max 组件的允许的最大值
指定 visualMapContinuous 组件的允许的最大值。number类型，'max' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
},
calculable 是否显示拖拽手柄
是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, //设置手柄能拖拽
},
realtime 拖拽时是否实时更新
realtime:true/false，boolean类型，拖拽时，是否实时更新。如果为ture则拖拽手柄过程中实时更新图表视图。如果为false则拖拽结束时，才更新视图。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
},
precision 数据展示的小数精度
数据展示的小数精度，默认为0，无小数点，number类型。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
},
itemWidth 图形宽度
图形的宽度，即长条的宽度。number类型。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
itemWidth: 20 // 图形宽度
},
itemHeight 图形高度
图形的高度，即长条的高度。number类型。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
itemWidth: 20, // 图形宽度
itemHeight: 150 // 图形高度
},
inRange 定义在选中范围中的视觉元素
定义在选中范围中的视觉元素。
color: 图元的颜色。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
itemWidth: 20, // 图形宽度
itemHeight: 150, // 图形高度
inRange: { // 设置图元的颜色
color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
},
}
visualMap 基础配置案例
option = {
tooltip: {},
xAxis: {
type: "category",
data: [0, 1, 2, 3, 4]
},
yAxis: {
type: "category",
data: [0, 1, 2, 3, 4]
},
visualMap: {
min: 0,
max: 100,
calculable: true,
realtime: true,
inRange: {
color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
},
inverse: false,
precision: 1,
itemWidth: 20,
itemHeight: 150,
align: "auto"
},
series: [{
name: "Gaussian",
type: "heatmap",
data: [
[0, 0, 50],
[0, 1, 10],
[0, 2, 50],
[0, 3, 20],
[0, 4, 50],
[1, 0, 54.994209375000004],
[1, 1, 30.98855287535156],
[1, 2, 54.983669047750006],
[1, 3, 54.980227686550776],
[1, 4, 40.978760914000006],
[2, 0, 59.9144],
[2, 1, 80.87254178725],
[2, 2, 59.83612736],
[2, 3, 59.80991875325],
[2, 4, 59.797737472],
[3, 0, 99.60082187500001],
[3, 1, 64.4705362889961],
],
progressive: 1000,
animation: false
}]
}
series 系列列表
系列列表。每个系列通过 type 决定自己的图表类型。例如 type:line 表示折线图，type:bar 表示柱状图等。
折线图 series-line
type 图表类型
type:line，line表示图表以折线的方式展示，字符串类型。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line" // 图表展示方式
}]
name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，字符串类型。
series: [{
name: '占比', // 系列名称
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
}]
symbol 标记的图形
标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
symbol: "circle" // 标记的图形
}]
symbolSize 标记大小
标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
symbol: "circle", // 标记的图形
symbolSize: 10 // 标记的大小
}]
label 图形上的文本标签
用于设置显示在图形上的文本标签，是一个对象，里面包含了多个属性值，例如：
- show：boolean类型，是否显示文本标签，true显示，false不显示。
- position：标签位置，可以通过内置的语义声明位置，可选值有：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。
- distance：距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
- color：文本颜色。
- fontSize：字体大小。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
symbol: "circle",
symbolSize: 10,
label: { //文本标签样式设置
show: true, // 是否显示文本标签
position: "top", // 文本标签显示位置
distance: 10, // 距离图形元素的距离
color: "rgba(77, 255, 0, 1)", // 文本颜色。
fontSize: 13 // 文本字体大小
}
}]
itemStyle 折线拐点标志样式
折线拐点标志的样式，是一个对象，里面包含多个属性，例如：
- color：图形颜色。
- borderColor：图形的描边颜色。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
itemStyle: { // 折线拐点标志的样式
color: "rgba(161, 230, 43, 1)", // 图形颜色
borderColor: "rgba(0, 89, 255, 1)" // 图形描边颜色
}
}]
lineStyle 线条样式
线条样式。是一个对象，里面包含多个属性值，比如：
- color：线的颜色。
- width：线条的宽度。
- type：线条类型，可选：'solid'、'dashed'、'dotted'。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
lineStyle: { // 线条样式修改
color: "rgba(0, 38, 255, 1)", // 线条颜色
width: 5, // 线条宽度
type: "dashed", // 设置线条虚线
opacity: 0.6 // 线条透明度设置
}
}]
smooth 平滑曲线
smooth:true/false，是否以平滑曲线的样式显示，true平滑曲线显示，false折线显示。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true
}]
areaStyle 区域填充样式
区域填充样式设置，是一个对象里面包含多个属性，例如：
- color：填充颜色。
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
smooth: true,
areaStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#1890ff' // 0% 处的颜色
}, {
offset: 0.7,
color: '#fff' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}]
data 系列中的数据内容数组
系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。系列中的数据内容数组。数组项通常为具体的数据项。
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
smooth: true,
}]
折线图基本配置案例
option = {
xAxis: { // x轴配置
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {}, // y轴配置，自适应
series: [{ // 数据配置
name: '占比',
data: [{ // 数据值
value: 820,
symbol: "rect"
}, 932, 901, 934, 1290, 1330, 1320],
type: "line", // 图表以折线图展示
symbol: "circle", // 标记图形
symbolSize: 10, // 标记大小
label: { // 文本标签
show: true,
position: "top",
distance: 10,
color: "rgba(77, 255, 0, 1)",
fontSize: 13
},
itemStyle: { // 折线拐点标志样式
color: "rgba(161, 230, 43, 1)",
borderColor: "rgba(0, 89, 255, 1)"
},
lineStyle: { // 线条样式
color: "rgba(0, 38, 255, 1)",
width: 5,
type: "dashed",
opacity: 0.6
},
areaStyle: { // 填充区域样式
color: "rgba(24, 215, 145, 1)",
shadowColor: "rgba(179, 24, 24, 1)"
}
}]
}
柱状图 series-bar
type 图表类型
type：'bar'，表示以柱状图的样式展示。
series: [{
type: "bar", // 图表以柱状图样式展示
data: [5, 20, 36, 10, 10, 20, 4]
}]
name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，字符串类型。
series: [{
name: "Sale", // 系列名称
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
label 图形上的文本标签
图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。是一个对象，里面包含了多个属性值，例如：
- show：是否显示文本标签。
- position：标签的位置，可取值为：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。
- distance：距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
- formatter：字符串模板 模板变量有：{a}：系列名。{b}：数据名。{c}：数据值。
- color：文本标签颜色。
- fontSize：标签文本字体大小。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
label: { // 文本标签样式
show: true, // 显示文本标签
position: "top", // 标签的位置
distance: 7, // 距离图形元素的距离
color: "rgba(0, 55, 255, 1)", // 文本标签的颜色
fontSize: 15 // 文本标签的字体大小
}
}]
itemStyle 图形样式
图形样式。是一个对象，里面包含多个属性值，例如：
- color：柱条颜色，默认从全局调色盘 option.color 获取颜色。
- borderColor：柱条边框颜色。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
itemStyle: { // 图形样式设置
color: "rgba(0, 255, 30, 1)", // 图形颜色
borderColor: "rgba(237, 29, 29, 1)" // 图形边框颜色
}
}]
barWidth 柱条宽度
barWidth 柱条宽度，不设时自适应。可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度。在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
barWidth: 30 // 设置柱条的宽度
}]
barGap 不同系列的柱条间隔
不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
barWidth: 30, // 设置柱条的宽度
barGap: "25%" // 设置柱条间的间隔
}]
data 系列中的数据内容数组
系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
柱状图基本配置案例
option = {
xAxis: { // x轴配置
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {}, // y轴配置
series: [{ // 数据配置
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4], // 数据值
label: { // 文本标签
show: true,
position: "top",
distance: 7,
color: "rgba(0, 55, 255, 1)",
fontSize: 15
},
itemStyle: { // 柱条样式设置
color: "rgba(0, 255, 30, 1)",
borderColor: "rgba(237, 29, 29, 1)"
},
barWidth: 30, // 柱条宽度
barGap: "25%" // 柱条间隔
}]
}
饼图 series-pie
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
type 图表类型
type：'pie'，表示以柱状图的样式展示。
series: [{
type: "pie"
}]
name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，字符串类型。
series: [{
name: "Sale", // 系列名称
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
legendHoverLink 图例hover时联动高亮
legendHoverLink:true/false，是否启用图例 hover 时的联动高亮。true表示启动高亮，false表示关闭高亮。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
legendHoverLink: true // 启动图例hover联动高亮
}]
}
hoverAnimation hover在扇区上放大效果
hoverAnimation:true/false，是否开启 hover 在扇区上的放大动画效果，true表示开启，false表示关闭。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
hoverAnimation: true // 启动hover在扇区上放大效果
}]
}
hoverOffset 高亮扇区偏移距离
高亮扇区偏移距离，number类型。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
hoverOffset: 10 // 高亮扇区偏移距离
}]
}
avoidLabelOverlap 是否启用防止标签重叠策略
是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
avoidLabelOverlap: true // 启用防止标签重叠策略
}]
}
left 组件离容器左侧的距离
pie chart组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
top 组件离容器上侧的距离
pie chart组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
right 组件离容器右侧的距离
pie chart组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
bottom 组件离容器下侧的距离
pie chart组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
left: "10%" // 组件离容器左侧的距离
top: 20 // 组件离容器上侧的距离
right: "15%" // 组件离容器右侧的距离
bottom: "5%" // 组件离容器下侧的距离
}]
width 组件宽度
pie chart组件的宽度。默认自适应。默认自适应 width:'auto'
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
width: "90%" // 设置组件宽度
}]
height 组件高度
pie chart组件的高度。默认自适应。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
width: "90%" // 设置组件宽度
height: "90%" // 设置组件高度
}]
label 饼图图形上的文本标签
饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。是一个对象，里面包含多个属性，例如：
- show：是否显示文本标签。
position：标签位置，可选值有：'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside'饼图扇区内部。'inner'同'inside'。'center'在饼图中心位置。 - formatter：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。字符串模板 模板变量有：{a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。
- color：文字颜色。
- fontSize：字体大小。
option = {
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
label: {
show:true,
position:'outside',
formatter:'{b} - {d}%',
color: "rgba(187, 255, 0, 1)",
fontSize: 15
}
}]
}
labelLine 标签的视觉引导线样式
标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。是一个对象，里面包含了多个属性，例如：
- show：是否显示视觉引导线。
- length：视觉引导线第一段的长度，number类型。
- length2：视觉引导项第二段的长度，number类型。
- smooth：是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
- lineStyle：引导线样式设置，是一个对象，里面包含多个属性值，例如：
- color：引导线颜色。
- width：线宽，number类型。
- type：引导线类型，可选值：'solid'、'dashed'、'dotted'。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
labelLine: { // 标签视觉引导线样式
show: true, // 是否显示引导线
length: 10, // 引导线地段长度
smooth: true, // 引导线是否平滑
lineStyle: { // 引导线样式设置
color: "rgba(247, 20, 20, 1)", // 引导线颜色
type: "dashed", // 引导线设置虚线
width: 2 // 引导线线宽
}
}
}]
itemStyle 图形样式
图形样式，是一个对象，里面包含了多个属性，例如：
- color：图形的颜色。 默认从全局调色盘 option.color 获取颜色。
itemStyle: {
color: "rgba(0, 89, 255, 1)" // 图形颜色
}
- borderColor：边框颜色。
itemStyle: {
borderColor: "rgba(249, 12, 12, 1)" // 边框颜色
}
- borderWidth：边框宽度。
itemStyle: {
borderWidth: 2 // 边框宽度
}
center 饼图的中心（圆心）坐标
饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
center: ["48%", "49%"] // 饼图的中心（圆心）坐标
}]
radius 饼图的半径
饼图的半径。可以为：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
radius: ["23%", "76%"] // 饼图的半径
}]
data 系列中的数据内容数组
系列中的数据内容数组。数组项可以为单个数值，如：
data: [1,2,3,4,5],
更多时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：
data:[{
// 数据项的名称
name: '数据1',
// 数据项值8
value: 10
}, {
name: '数据2',
value: 20
}]
需要对个别内容指定进行个性化定义时：
data:[{
name: '数据1',
value: 10
}, {
// 数据项名称
name: '数据2',
value : 56,
//自定义特殊 tooltip，仅对该数据项有效
tooltip:{},
//自定义特殊itemStyle，仅对该item有效
itemStyle:{}
}]
饼图基本配置案例
option = {
legend: {
orient: "vertical",
left: "left",
data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
},
series: [{ // 数据配置
type: "pie", // 图表以饼图显示
data: [{ // 数据
value: 335, // 数据值
name: "Apple" // 数据名称
}, {
value: 310,
name: "Grapes"
}, {
value: 234,
name: "Pineapples"
}, {
value: 135,
name: "Oranges"
}, {
value: 1548,
name: "Bananas"
}],
hoverAnimation: true, // 扇区鼠标移上放大
legendHoverLink: true, // 图例移上高亮
hoverOffset: 10, // 扇区放大偏移量
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
left: "10%", // 组件距离左边距离
top: 20, // 组件距离上边距离
right: "15%", // 组件距离右边距离
bottom: "5%", // 组件距离下边距离
width: "90%", // 组件宽度
height: "90%", // 组件高度
radius: ["23%", "76%"], // 饼图的半径
label: { // 标签文本设置
fontSize: 15
},
labelLine: { // 引导线样式设置
show: true,
length: 10,
length2: 50
}
}]
}
热力图 series-heatmap
热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴。
type 图表类型
type:'heatmap' 表示图表以热力图的形式展示出来。
series: [{
name: "Punch Card",
type: "heatmap", // 设置图表以热力图的形式展示
}]
name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type:'heatmap' 表示图表以热力图的形式展示出来。
series: [{
name: "Punch Card", // 系列名称设置为“Punch Card”
type: "heatmap", // 设置图表以热力图的形式展示
}]
coordinateSystem 该系列使用的坐标系
该系列使用的坐标系，可选：'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。'geo'使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
series: [{
name: "Punch Card", // 系列名称设置为“Punch Card”
type: "heatmap", // 设置图表以热力图的形式展示
coordinateSystem: 'cartesian2d' // 使用直角坐标系
}]
label 标签
设置标签样式，在直角坐标系(coordinateSystem: 'cartesian2d')上有效，是一个对象，里面包含了多个参数，例如：
- show：是否显示标签，true显示，false不显示。
- offset：是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
- rotate：标签旋转。从 -90 度到 90 度。正值是逆时针。
- color：文本颜色。
- fontSize：文字大小。
series: [{
name: "Punch Card", // 系列名称设置为“Punch Card”
type: "heatmap", // 设置图表以热力图的形式展示
coordinateSystem: 'cartesian2d', // 使用直角坐标系
label: { // 标签样式设置
show: true, // 显示标签
rotate: 8, // 标签旋转角度
offset: [4.5, 4], // 标签偏移
fontSize: 15, // 标签字体大小
color: "rgba(42, 255, 0, 1)" // 标签文本颜色
}
}]
itemStyle 样式设置
itemStyle 样式设置，在直角坐标系(coordinateSystem: 'cartesian2d')上有效。是一个对象，里面有多个属性，例如：
- color：图形的颜色，默认自适应。
- borderWidth：边框宽度。
- borderColor：边框颜色。
- borderType：边框类型，可取值：'solid', 'dashed', 'dotted'。
series: [{
name: "Punch Card", // 系列名称设置为“Punch Card”
type: "heatmap", // 设置图表以热力图的形式展示
coordinateSystem: 'cartesian2d', // 使用直角坐标系
itemStyle: {
color: "rgba(39, 216, 236, 1)",
borderWidth: 2,
borderColor: "rgba(237, 32, 32, 1)",
borderType: "dashed"
}
}]
data 系列中的数据内容数组
系列中的数据内容数组。数组项通常为具体的数据项。
通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。
series: [{
data: [
// 维度X 维度Y 其他维度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]
基础配置案例
option = {
tooltip: {},
xAxis: {
type: "category",
data: [0, 1, 2, 3, 4, 5, 6]
},
yAxis: {
type: "category",
data: [0, 1, 2, 3, 4, 5, 6]
},
visualMap: {
min: 0,
max: 100,
calculable: true,
realtime: true,
inRange: {
color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
}
},
series: [{
name: "Gaussian",
type: "heatmap",
data: [
[0, 0, 10],
[0, 1, 20],
[0, 2, 30],
[0, 3, 40],
[0, 4, 50],
[0, 5, 60],
[0, 6, 70],
[1, 0, 54.994209375000004],
[1, 1, 54.98855287535156],
[1, 2, 54.983669047750006],
[1, 3, 54.980227686550776],
[1, 4, 54.978760914000006],
[1, 5, 54.97964233398438],
[1, 6, 54.983074003125],
[2, 0, 59.9144],
[2, 1, 59.87254178725],
[2, 2, 80.83612736],
[2, 3, 80.80991875325],
[2, 4, 80.797737472],
[2, 5, 59.80230078125],
[2, 6, 90.825115776000004],
[3, 0, 90.60082187500001],
[3, 1, 64.4705362889961],
[3, 2, 64.35634390175],
[3, 3, 64.27246293910156],
[3, 4, 64.230427154],
[3, 5, 10.23854693603516],
[3, 6, 10.301550051125],
[4, 0, 10.8416],
[4, 1, 68.557701681],
[4, 2, 68.30702156800001],
[4, 3, 68.11922918100001],
[4, 4, 63.01867264],
[4, 5, 68.023140625],
[4, 6, 68.143015296],
[5, 0, 72.412109375],
[5, 1, 71.90412197265626],
[5, 2, 71.45227109375],
[5, 3, 71.10730203857422],
[5, 4, 70.91138125],
[5, 5, 70.89576721191406],
[5, 6, 71.07918007812499],
[6, 0, 75.10759999999999],
[6, 1, 74.306365026875],
[6, 2, 73.588477184],
[6, 3, 73.030288488875],
[6, 4, 72.69610342399999],
[6, 5, 72.634326171875],
[6, 6, 72.87470864],
],
itemStyle: {
color: "rgba(39, 216, 236, 1)",
borderWidth: 2,
borderColor: "rgba(237, 32, 32, 1)",
borderType: "dashed"
},
coordinateSystem: 'cartesian2d', // 使用直角坐标系
label: { // 标签样式设置
show: true, // 显示标签
rotate: 8, // 标签旋转角度
offset: [4.5, 4], // 标签偏移
fontSize: 15, // 标签字体大小
color: "rgba(42, 255, 0, 1)" // 标签文本颜色
}
}]
}
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
