菜鸟修行之路–Echarts数据可视化知识总结完整版
前言：
阅读本手册的人员应具备一定的echarts基础、JavaScript相关知识以及SQL基础基础知识！！！！！
本手册为总结性手册，若想详细了解，学习echarts数据可视化相关知识，请访问echarts官网。
echarts官网：https://echarts.apache.org/zh/option.html#title
1. Echarts option常用属性配置
成功绘制一个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' // 图表类型 线形图
}]
};
1.1xAxis常用配置
xAxis：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
1.1.1 show 是否显示坐标轴
show:true / false，Boolean类型，是否显示 x 轴，true显示，false不显示。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
show: true // 显示坐标轴
}],
1.1.2 position 坐标轴位置
position:“top” / “bottom”， 字符串类型，默认 grid 中的第一个 x 轴在 grid 的下方（‘bottom’），第二个 x 轴视第一个 x 轴的位置放在另一侧。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
position: "bottom" // 坐标轴底部显示
}],
1.1.3 type 坐标轴类型
type:“类型”，字符串类型
类型可取值：
- ‘value’ 数值轴，适用于连续数据。
- ‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
- ‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- ‘log’ 对数轴。适用于对数数据。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
name: "日期" // 坐标轴名称
}],
1.1.4 name 坐标轴名称
name:“x轴自定义名称” 。字符串类型，默认显示在右侧。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
show: true // 显示坐标轴
}],
1.1.5 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
}
}],
1.1.6 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
}
}
}],
1.1.7 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 // 刻度线透明度
}
}
}],
1.1.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 // 标签字体大小
}
}],
1.1.9 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
}
}
}],
1.1.10 data 类目数据
类目数据，在类目轴（type: ‘category’）中有效。
xAxis: [{
type: "category", // 坐标轴类型-类目轴
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 类目数据
}],
1.1.11 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]
}]
}
1.2 yAxis常用配置
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
其常用配置项与 xAxis 相同。
1.2.1 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]
}]
}
1.3title 标题组件
标题组件，包含主标题和副标题。
1.3.1 show 是否显示标题组件
show:true/false，boolean类型，true为显示，false为不显示。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
show: true // 显示标题组件
}
}
1.3.2 text 主标题文本
text:“主标题文本内容”，字符串类型，设置主标题文本，支持使用 \n 换行。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
show: true // 显示标题组件
}
}
1.3.3 subtext 副标题文本
subtext:“副标题文本”，字符串类型，支持使用 \n 换行。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
subtext: "这是副标题文本", // 设置副标题文本
show: true // 显示标题组件
}
}
1.3.4 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" // 主标题字体系列
},
}
}
1.3.5 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" // 副标题字体系列
},
}
}
1.3.6 textAlign 整体水平对齐
textAlign 设置整体（包括 text 和 subtext）的水平对齐。可选值：‘auto’、‘left’、‘right’、‘center’。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
subtext: "这是副标题文本", // 设置副标题文本
show: true, // 显示标题组件
textAlign: "center" // 居中对齐
}
}
1.3.7 textVerticalAlign
textVerticalAlign 设置整体（包括 text 和 subtext）的垂直对齐。可选值：‘auto’、‘top’、‘bottom’、‘middle’。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
subtext: "这是副标题文本", // 设置副标题文本
show: true, // 显示标题组件
textVerticalAlign: "middle" // 垂直居中
}
}
1.3.8 itemGap 主副标题之间的间距
itemGap：主副标题之间的间距，number类型。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
subtext: "这是副标题文本", // 设置副标题文本
show: true, // 显示标题组件
itemGap: 15 // 主副标题间距
}
}
1.3.9 left title组件离容器左侧的距离
title组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
1.3.10 top title组件离容器上侧的距离
title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
1.3.11 right title 组件离容器右侧的距离
title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
1.3.12 bottom title 组件离容器下侧的距离
title 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
option = {
title: {
text: "这是主标题文本", // 设置主标题文本
subtext: "这是副标题文本", // 设置副标题文本
show: true, // 显示标题组件
left: "20%", // 组件离容器左侧的距离
top: "10%", // 组件离容器上侧的距离
right: 20, // 组件离容器右侧的距离
bottom: 30 // 组件离容器底部的距离
}
}
1.3.13 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 // 标题组件距离底部距离
}
}
1.4 grid 直角坐标系内绘图网格
单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
1.4.1show 是否显示直角坐标系网格
show:true/false，是否显示直角坐标系网格，boolean类型，true显示，false不显示。
grid: {
show: true // 显示直角坐标系网格
}
1.4.2 left grid 组件离容器左侧的距离
组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
grid: {
show: true, // 显示直角坐标系网格
left: "10%" // 组件离容器左侧的距离
},
1.4.3 top grid 组件离容器上侧的距离
grid 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
grid: {
show: true, // 显示直角坐标系网格
left: "10%", // 组件离容器左侧的距离
top: 30 // 组件离容器上侧的距离
},
1.4.4 right grid 组件离容器右侧的距离
grid 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。
grid: {
show: true, // 显示直角坐标系网格
left: "10%", // 组件离容器左侧的距离
top: 30, // 组件离容器上侧的距离
right: "20%",// 组件离容器右侧的距离
},
1.4.5 bottom grid 组件离容器下侧的距离
grid 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。
grid: {
show: true, // 显示直角坐标系网格
left: "10%", // 组件离容器左侧的距离
top: 30, // 组件离容器上侧的距离
right: "20%",// 组件离容器右侧的距离
bottom: 5 // 组件离容器右侧的距离
},
1.4.6 width grid 组件的宽度
grid 组件的宽度。默认自适应。
grid: {
show: true, // 显示直角坐标系网格
width: "80%" // grid 组件宽度
},
1.4.7 height grid 组件的高度
grid 组件的高度。默认自适应。
grid: {
show: true, // 显示直角坐标系网格
height: "50%" // grid 组件高度
},
1.4.8 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)" // 网格背景色
},
1.4.9 borderColor 网格的边框颜色
网格的边框颜色。支持的颜色格式同 backgroundColor。注意：此配置项生效的前提是，设置了 show: true。
grid: {
show: true, // 显示直角坐标系网格
borderColor: "rgba(204, 204, 204, 1)" // 网格边框颜色
},
1.4.10 borderWidth 网格的边框线宽
网格的边框线宽。注意：此配置项生效的前提是，设置了 show: true。
grid: {
show: true, // 显示直角坐标系网格
borderColor: "rgba(204, 204, 204, 1)", // 网格边框颜色
borderWidth: 7 // 网格的边框线宽
},
1.4.11 直角坐标系配置案例
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]
}]
}
1.5 tooltip 提示框组件
1.5.1 show 是否显示提示框组件
show:true/false，Boolean类型，true显示，false不显示。
tooltip: {
show: true // 显示提示框
},
1.5.2 trigger 触发类型
触发类型。字符串类型。
可选值：
- ‘item’：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
- ‘axis’：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
- ‘none’：什么都不触发。
tooltip: {
show: true // 显示提示框
trigger: "axis", // 坐标轴触发
},
1.5.3 axisPointer 坐标轴指示器配置项
坐标轴指示器配置项。是一个对象，里面包含了多个属性，例如：
type：指示器类型，可选值：
- ‘line’ 直线指示器
- ‘shadow’ 阴影指示器
- ‘none’ 无指示器
- ‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
tooltip: {
trigger: "axis", // 坐标轴触发
axisPointer: {
type: "cross" // 十字准星指示器
}
},
1.5.4 tooltip 提示框组件配置案例
tooltip: {
show: true // 显示提示框
trigger: "axis", // 坐标轴触发
axisPointer: {
type: "cross" // 十字准星指示器
}
},
1.6 legend 图例组件
图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
1.6.1 show 是否显示图例组件
show:true/false，Boolean类型，true显示，false不显示。
legend: {
show: true // 显示图例
},
1.6.2 left 图例组件离容器左侧的距离
图例组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
legend: {
show: true, // 显示图例
left: "20%" // 图例组件离容器左侧的距离
},
1.6.3 top 图例组件离容器上侧的距离
图例组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
legend: {
show: true, // 显示图例
top: 10 // 图例组件离容器上侧的距离
},
1.6.4 right 图例组件离容器右侧的距离
图例组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
legend: {
show: true, // 显示图例
right: "15%" // 图例组件离容器右侧的距离
},
1.6.5 bottom 图例组件离容器下侧的距离
图例组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
legend: {
show: true, // 显示图例
bottom: 30 // 图例组件离容器下侧的距离
},
1.6.6 width 图例组件的宽度
图例组件的宽度。默认自适应。number或字符串类型。
legend: {
show: true, // 显示图例
width: "50%" // 图例组件的宽度
},
1.6.7 height 图例组件的高度
图例组件的高度。默认自适应。number或字符串类型。
legend: {
show: true, // 显示图例
height: 10 // 图例组件的高度
},
1.6.8 orient 图例列表的布局朝向
图例列表的布局朝向。可选值：‘horizontal’、‘vertical’。
legend: {
show: true, // 显示图例
orient: "horizontal" // 图例列表水平布局
},
1.6.9 itemGap 图例每项之间的间隔
图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。number类型。
legend: {
show: true, // 显示图例
orient: "horizontal", // 图例列表水平布局
itemGap: 15 // 图例每项之间的间隔
},
1.6.10 itemWidth 图例标记的图形宽度
图例标记的图形宽度。number类型。
legend: {
itemWidth: 10 // 图例标记的图形宽度
},
1.6.11 itemHeight 图例标记的图形高度
图例标记的图形高度。number类型。
legend: {
itemHeight: 15 // 图例标记的图形高度
},
1.6.12 textStyle 图例的公用文本样式
图例的公用文本样式，是一个对象，里面包含多个属性，例如：
- color：文字颜色。
- fontStyle：文字风格。
- fontWeight：文字粗细。
- fontFamily ：字体系列。
- fontSize：字体大小。
legend: {
textStyle: { // 图例文本样式
color: "rgba(239, 15, 15, 1)", // 文本颜色
fontStyle: "italic", // 字体风格
fontWeight: "bold", // 字体粗细
fontFamily: "serif", // 字体系列
fontSize: 15 // 字体大小
}
},
1.6.13 icon 图例项的 icon
图例项的 icon。ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’。
legend: {
icon: "circle" // 图例项的 icon
},
1.6.14 data 图例的数据数组
图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ‘’（空字符串）或者 ‘\n’（换行字符串）用于图例的换行。如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
legend: {
data: ["温度", "湿度"] // 图例的数据数组
},
1.6.15 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"
}]
}
1.7 color 调色盘颜色列表
调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
默认为：[’#c23531’,’#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,’#749f83’, ‘#ca8622’, ‘#bda29a’,’#6e7074’, ‘#546570’, ‘#c4ccd3’]
option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
}
1.8 dataZoom-slider 滑动条型数据区域缩放组件
滑动条型数据区域缩放组件（dataZoomSlider）
1.8.1 type
type:'slider’
dataZoom: [{
type: 'slider'
}],
1.8.2 show 是否显示组件
show:true/false，是否显示缩放组件，boolean类型，true显示，false不显示。
dataZoom: [{
show: true // 显示组件
}],
1.8.3 backgroundColor 背景颜色
组件的背景颜色。字符串类型。
dataZoom: [{
show: true,
backgroundColor: "rgba(9, 148, 244, 0)" // 设置缩放组件背景颜色
}],
1.8.4 fillerColor 选中范围填充颜色
选中范围填充颜色，字符串类型。
dataZoom: [{
show: true, // 显示缩放组件
backgroundColor: "rgba(241, 33, 10, 0)", // 设置缩放背景色
fillerColor: "rgba(204, 167, 167, 0.4)" // 设置选中区域背景色
}],
1.8.5 borderColor 边框颜色
边框颜色，字符串类型。
dataZoom: [{
show: true,
backgroundColor: "rgba(241, 33, 10, 0)", // 设置背景颜色
fillerColor: "rgba(204, 167, 167, 0.4)", // 设置选中区域颜色
borderColor: "rgba(176, 58, 91, 1)" // 设置边框颜色
}],
1.8.6 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 // 文字字体大小
}
}],
1.8.7 start 数据窗口范围的起始百分比
数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
dataZoom: [{
show: true,
start: 20 // 数据窗口范围开始百分比
}],
1.8.8 end 数据窗口范围的结束百分比
数据窗口范围的结束百分比。范围是：0 ~ 100。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
dataZoom: [{
show: true,
start: 20, // 数据窗口范围开始百分比
end: 80 // 数据窗口范围结束百分比
}],
1.8.9 left 组件离容器左侧的距离
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
dataZoom: [{
show: true,
left: "15%" // 容器距离左侧距离
}],
1.8.10 top 组件离容器上侧的距离
dataZoom-slider组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
dataZoom: [{
show: true,
top: 10 // 容器距离上侧距离
}],
1.8.11 right 组件离容器右侧的距离
dataZoom-slider组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
dataZoom: [{
show: true,
right: "20%" // 容器距离右侧距离
}],
1.8.12 bottom 组件离容器下侧的距离
dataZoom-slider组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
dataZoom: [{
show: true,
bottom: 30 // 容器距离下侧距离
}],
1.8.13 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]
}
}
1.9 visualMap 连续型视觉映射组件
连续型视觉映射组件（visualMapContinuous）
1.9.1 type 类型
type:‘continuous’/‘piecewise’， continuous为连续型，piecewise为分段型。
1.9.2 min 组件的允许的最小值
指定 visualMapContinuous 组件的允许的最小值。number类型，‘min’ 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
1.9.3 max 组件的允许的最大值
指定 visualMapContinuous 组件的允许的最大值。number类型，‘max’ 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
},
1.9.4 calculable 是否显示拖拽手柄
是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, //设置手柄能拖拽
},
1.9.5 realtime 拖拽时是否实时更新
realtime:true/false，boolean类型，拖拽时，是否实时更新。如果为ture则拖拽手柄过程中实时更新图表视图。如果为false则拖拽结束时，才更新视图。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
},
1.9.6 precision 数据展示的小数精度
数据展示的小数精度，默认为0，无小数点，number类型。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
},
1.9.7 itemWidth 图形宽度
图形的宽度，即长条的宽度。number类型。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
itemWidth: 20 // 图形宽度
},
1.9.8 itemHeight 图形高度
图形的高度，即长条的高度。number类型。
visualMap: {
min: 3, // 设置组件的允许的最小值
max: 99, // 设置组件的允许的最大值
calculable: true, // 设置手柄能拖拽
realtime: true, // 拖拽时实时更新
precision: 1, // 小数精度
itemWidth: 20, // 图形宽度
itemHeight: 150 // 图形高度
},
1.9.9 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"]
},
}
1.9.10 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
}]
}
2.ECharts - 使用 dataset 管理数据
2.1 dataSet简介
ECharts 4 提供 数据集（dataset）组件来单独声明数据，具有如下特点：
- 能够贴近这样的数据可视化常见思维方式：基于数据（
dataset组件来提供数据），指定数据到视觉的映射（由 encode 属性来指定映射），形成图表。 - 数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。
- 数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。
- 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
2.2 映射
概略而言，可以进行如下映射：
-
指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。
-
指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 series.encode 属性，以及 visualMap 组件（如果有需要映射颜色大小等视觉维度的话）来配置。
如果没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：
X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；
三个柱图系列，一一对应到 dataset.source 中后面每一列。
2.2.1 按行/按列做映射
使用者可以灵活得配置：数据如何对应到轴和图形系列。
用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：
- ‘column’: 默认值。系列被安放到
dataset的列上面。 - ‘row’: 系列被安放到
dataset的行上面。
使用实例：
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}
对应效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jn8lGsVG-1607651706887)(/image-20201209104629008.png)]
2.2.2 维度（dimension）
常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。
维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。
如下示例：
dataset: {
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
'score'、'amount'、'product' 就是维度名。从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false 表明第一行（列）开始就直接是数据。
2.2.2.1 维度定义
维度的定义，也可以使用单独的 dataset.dimensions 或者 series.dimensions 来定义，这样可以同时指定维度名，和维度的类型（dimension type）
示例如下：
dataset: {
dimensions: [
{name: 'score'},
// 可以简写为 string，表示维度名。
'amount',
// 可以在 type 中指定维度类型。
{name: 'product', type: 'ordinal'}
],
source: [...]
},
...
2.2.2.2 维度类型
大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。
维度类型（dimension type）可以取这些值：
'number': 默认，表示普通数据。'ordinal': 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 ‘ordinal’ 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。'time': 表示时间数据。设置成'time'则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 ‘2017-05-10’，会自动被解析。如果这个维度被用在时间数轴（axis.type 为'time'）上，那么会被自动设置为'time'类型。时间类型的支持参见 data。'float': 如果设置成'float'，在存储时候会使用TypedArray，对性能优化有好处。'int': 如果设置成'int'，在存储时候会使用TypedArray，对性能优化有好处。
2.3 数据到图形的映射（encode）
使用encode进行映射
encode 声明的基本结构如下：
- 冒号左边是坐标系、标签等特定名称，如
'x','y','tooltip'等， - 冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。
代码示例：
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
}
encode 支持的属性：
// 在任何坐标系和系列中，都支持：
encode: {
// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
tooltip: ['product', 'score']
// 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
seriesName: [1, 3],
// 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
itemId: 2,
// 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
itemName: 3
}
// 直角坐标系（grid/cartesian）特有的属性：
encode: {
// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
x: [1, 5, 'score'],
// 把“维度0”映射到 Y 轴。
y: 0
}
// 单轴（singleAxis）特有的属性：
encode: {
single: 3
}
// 极坐标系（polar）特有的属性：
encode: {
radius: 3,
angle: 2
}
// 地理坐标系（geo）特有的属性：
encode: {
lng: 3,
lat: 2
}
// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
value: 3
}
映射示例：
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
xAxis: {},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
}
}
]
};
效果截图：
2.4 视觉通道（颜色、尺寸等）的映射
使用 visualMap 组件进行视觉通道的映射。详见 visualMap 文档的介绍
简单示例如下：
option = {
visualMap: [
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 visualMap
...
},
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
...
}
],
...
}
2.5 默认的映射规则
ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 encode 也可以出现图表（一旦给出了 encode，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：
- 在坐标系中（如直角坐标系、极坐标系等）
- 如果有类目轴（axis.type 为 ‘category’），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。
- 如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。
- 如果没有坐标系（如饼图）
- 取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。
默认的规则不能满足要求时，就可以自己来配置 encode，也并不复杂。
2.6 常见映射示例
第三列设置为 X 轴，第五列设置为 Y 轴
series: {
// 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。
encode: {x: 2, y: 4},
...
}
第三行设置为 X 轴，第五行设置为 Y 轴
series: {
encode: {x: 2, y: 4},
seriesLayoutBy: 'row',
...
}
第二列设置为标签
关于标签的显示 label.formatter，现在支持引用特定维度的值，例如：
series: {
label: {
// `'{@score}'` 表示 “名为 score” 的维度里的值。
// `'{@[4]}'` 表示引用序号为 4 的维度里的值。
formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'
}
}
让第 2 列和第 3 列显示在提示框（tooltip）中
series: {
encode: {
tooltip: [1, 2]
...
},
...
}
数据里没有维度名，那么怎么给出维度名
dataset: {
dimensions: ['score', 'amount'],
source: [
[89.3, 3371],
[92.1, 8123],
[94.4, 1954],
[85.4, 829]
]
}
把第三列映射为气泡图的点的大小
var option = {
dataset: {
source: [
[12, 323, 11.2],
[23, 167, 8.3],
[81, 284, 12],
[91, 413, 4.1],
[13, 287, 13.5]
]
},
visualMap: {
show: false,
dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。
min: 2, // 需要给出数值范围，最小数值。
max: 15, // 需要给出数值范围，最大数值。
inRange: {
// 气泡尺寸：5 像素到 60 像素。
symbolSize: [5, 60]
}
},
xAxis: {},
yAxis: {},
series: {
type: 'scatter'
}
};
2.3 数据格式
多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 dataset.source 中，在不少情况下可以免去一些数据处理的步骤。
普通dataSet示例：
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
}
**对象数组(key_value)**示例：
dataset: [{
// 按行的 key-value 形式（对象数组），这是个比较常见的格式。
source: [
{product: 'Matcha Latte', count: 823, score: 95.8},
{product: 'Milk Tea', count: 235, score: 81.4},
{product: 'Cheese Cocoa', count: 1042, score: 91.2},
{product: 'Walnut Brownie', count: 988, score: 76.9}
]
}, {
// 按列的 key-value 形式。
source: {
'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
'count': [823, 235, 1042, 988],
'score': [95.8, 81.4, 91.2, 76.9]
}
}]
2.4 支持dataSet的相关图形
目前并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。
| 图形名称 | 类型 |
|---|---|
| 折线图 | line |
| 柱状图 | bar |
| 饼图 | pie |
| 散点图 | scatter |
| 涟漪散点图 | effectScatter |
| 平行坐标系 | parallel |
| K线图 | candlestick |
| 地图 | map |
| 漏斗图 | funnel |
| 自定义系列图 | custom |
2.5 dataSet使用实例
基础类型实现
option: {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {}
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
使用dataSet
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
效果截图：
2.5.1 将普通类型的数据转化为dataSet并且进行数据源的适配
echarts官网的基础类型示例：
详细示例网址：https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall
option = {
title: {
text: '雨量流量关系图',
subtext: '数据来自西安兰特水电测控技术有限公司',
left: 'center',
align: 'right'
},
grid: {
bottom: 80
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
legend: {
data: ['流量', '降雨量'],
left: 10
},
dataZoom: [
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
],
xAxis: [
{
//数据量太大，省略部分显示
type: 'category',
boundaryGap: false,
axisLine: {onZero: false},
data: [
'2009/6/12 2:00', /** 。。。。。 **/, '2009/10/18 7:00', '2009/10/18 8:00'
].map(function (str) {
return str.replace(' ', '\n');
})
}
],
yAxis: [
{
name: '流量(m^3/s)',
type: 'value',
max: 500
},
{
name: '降雨量(mm)',
nameLocation: 'start',
max: 5,
type: 'value',
inverse: true
}
],
series: [
{
name: '流量',
type: 'line',
animation: false,
areaStyle: {},
lineStyle: {
width: 1
},
//标记区域
markArea: {
silent: true,
data: [[{
xAxis: '2009/9/12\n7:00'
}, {
xAxis: '2009/9/22\n7:00'
}]]
},
data: [
0.97,0.96,/** 。。。。。 **/,0.45,0.45
]
},
{
name: '降雨量',
type: 'line',
yAxisIndex: 1,
animation: false,
areaStyle: {},
lineStyle: {
width: 1
},
markArea: {
silent: true,
data: [
[{
xAxis: '2009/9/10\n7:00'
}, {
xAxis: '2009/9/20\n7:00'
}]
]
},
data: [
0,0,0,0,/** 。。。。。 **/,0.001,0,0,0
]
}
]
};
将其将转化为dataSet
option = {
title: {
text: '雨量流量关系图',
subtext: '数据来自西安兰特水电测控技术有限公司',
left: 'center',
align: 'right'
},
grid: {
bottom: 80
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
legend: {
data: ['流量', '降雨量'],
left: 10
},
dataZoom: [
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
],
dataset: {
// 提供一份数据。数据量太大，省略一部分
source: [
['2009/6/12 2:00',0.97,0],
[ '2009/6/12 3:00',0.96,0],
/* 。。。。。。*/
[ '2009/10/18 6:00',0.45,0],
[ '2009/10/18 7:00',0.45,0],
[ '2009/10/18 8:00',0.45,0]
]
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {onZero: false},
}
],
yAxis: [
{
name: '流量(m^3/s)',
type: 'value',
max: 500
},
{
name: '降雨量(mm)',
nameLocation: 'start',
max: 5,
type: 'value',
inverse: true
}
],
series: [
{
name: '流量',
type: 'line',
animation: false,
areaStyle: {},
lineStyle: {
width: 1
},
markArea: {
silent: true,
data: [[{
xAxis: '2009/9/12 7:00'
}, {
xAxis: '2009/9/22 7:00'
}]]
}
},
{
name: '降雨量',
type: 'line',
yAxisIndex: 1,
animation: false,
areaStyle: {},
lineStyle: {
width: 1
},
markArea: {
silent: true,
data: [
[{
xAxis: '2009/9/10 7:00'
}, {
xAxis: '2009/9/20 7:00'
}]
]
}
}
]
};
示例效果：
通过数据库导入dataSet格式：
{
"dimensions": [
"date_time",
"flow",
"snowfall"
],
"source": [
{
"date_time": 1244743200000,
"flow": 0.97,
"snowfall": 0
},
{
"date_time": 1244746800000,
"flow": 0.96,
"snowfall": 0
},
/** 。。。。**/
//后面省略
效果截图：
示例二：
更多示例参见echarts官网：https://echarts.apache.org/examples/zh/index.html#chart-type-scatter
2.6 综述
对于echarts的数据源适配问题，首先考虑转化为dataSet数据源，并且在根据维度进行行或者列的选择。
重点：学会将echarts官网示例的option配置中的普通data转化为对应的dataSet数据集表现形式。z
3.常见图形配置实例
系列列表。每个系列通过 type 决定自己的图表类型。例如 type:line 表示折线图，type:bar 表示柱状图等。
3.1折线图 series-line
3.1.1 type 图表类型
type:line，line表示图表以折线的方式展示，字符串类型。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line" // 图表展示方式
}]
3.1.2 name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，字符串类型。
series: [{
name: '占比', // 系列名称
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
}]
3.1.3 symbol 标记的图形
标记的图形。ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
symbol: "circle" // 标记的图形
}]
3.1.4 symbolSize 标记大小
标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
symbol: "circle", // 标记的图形
symbolSize: 10 // 标记的大小
}]
3.1.5 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 // 文本字体大小
}
}]
3.1.6 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)" // 图形描边颜色
}
}]
3.1.7 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 // 线条透明度设置
}
}]
3.1.8 smooth 平滑曲线
smooth:true/false，是否以平滑曲线的样式显示，true平滑曲线显示，false折线显示。
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true
}]
3.1.9 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
}
}
}]
3.1.10 data 系列中的数据内容数组
系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。系列中的数据内容数组。数组项通常为具体的数据项。
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
smooth: true,
}]
3.1.11 折线图基本配置案例
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)"
}
}]
}
3.2 柱状图 series-bar
3.2.1 type 图表类型
type：‘bar’，表示以柱状图的样式展示。
series: [{
type: "bar", // 图表以柱状图样式展示
data: [5, 20, 36, 10, 10, 20, 4]
}]
3.2.2 name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，字符串类型。
series: [{
name: "Sale", // 系列名称
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
3.2.3 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 // 文本标签的字体大小
}
}]
3.2.4 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)" // 图形边框颜色
}
}]
3.2.5 barWidth 柱条宽度
barWidth 柱条宽度，不设时自适应。可以是绝对值例如 40 或者百分数例如 ‘60%’。百分数基于自动计算出的每一类目的宽度。在同一坐标系上，此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效，并且是对此坐标系中所有 ‘bar’ 系列生效。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
barWidth: 30 // 设置柱条的宽度
}]
3.2.6 barGap 不同系列的柱条间隔
不同系列的柱间距离，为百分比（如 ‘30%’，表示柱子宽度的 30%）。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
barWidth: 30, // 设置柱条的宽度
barGap: "25%" // 设置柱条间的间隔
}]
3.2.7 data 系列中的数据内容数组
系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
3.2.8 柱状图基本配置案例
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%" // 柱条间隔
}]
}
3.3 饼图 series-pie
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
3.3.1 type 图表类型
type：‘pie’，表示以柱状图的样式展示。
series: [{
type: "pie"
}]
3.3.2 name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，字符串类型。
series: [{
name: "Sale", // 系列名称
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
3.3.3 legendHoverLink 图例hover时联动高亮
legendHoverLink:true/false，是否启用图例 hover 时的联动高亮。true表示启动高亮，false表示关闭高亮。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
legendHoverLink: true // 启动图例hover联动高亮
}]
}
3.3.4 hoverAnimation hover在扇区上放大效果
hoverAnimation:true/false，是否开启 hover 在扇区上的放大动画效果，true表示开启，false表示关闭。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
hoverAnimation: true // 启动hover在扇区上放大效果
}]
}
3.3.5 hoverOffset 高亮扇区偏移距离
高亮扇区偏移距离，number类型。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
hoverOffset: 10 // 高亮扇区偏移距离
}]
}
3.3.6 avoidLabelOverlap 是否启用防止标签重叠策略
是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
avoidLabelOverlap: true // 启用防止标签重叠策略
}]
}
3.3.7 left 组件离容器左侧的距离
pie chart组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
3.3.8 top 组件离容器上侧的距离
pie chart组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
3.3.9 right 组件离容器右侧的距离
pie chart组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
3.3.10bottom 组件离容器下侧的距离
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%" // 组件离容器下侧的距离
}]
3.3.11 width 组件宽度
pie chart组件的宽度。默认自适应。默认自适应 width:‘auto’
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
width: "90%" // 设置组件宽度
}]
3.3.12 height 组件高度
pie chart组件的高度。默认自适应。
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}],
width: "90%" // 设置组件宽度
height: "90%" // 设置组件高度
}]
3.3.13 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
}
}]
}
3.3.14 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 // 引导线线宽
}
}
}]
3.3.15 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%"] // 饼图的中心（圆心）坐标
}]
3.3.16 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%"] // 饼图的半径
}]
3.3.17 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:{}
}]
3.3.18 饼图基本配置案例
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
}
}]
}
3.4 热力图 series-heatmap
热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴。
3.4.1 type 图表类型
type:‘heatmap’ 表示图表以热力图的形式展示出来。
series: [{
name: "Punch Card",
type: "heatmap", // 设置图表以热力图的形式展示
}]
3.4.2 name 系列名称
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type:‘heatmap’ 表示图表以热力图的形式展示出来。
series: [{
name: "Punch Card", // 系列名称设置为“Punch Card”
type: "heatmap", // 设置图表以热力图的形式展示
}]
3.4.3 coordinateSystem 该系列使用的坐标系
该系列使用的坐标系，可选：'cartesian2d’使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。'geo’使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
series: [{
name: "Punch Card", // 系列名称设置为“Punch Card”
type: "heatmap", // 设置图表以热力图的形式展示
coordinateSystem: 'cartesian2d' // 使用直角坐标系
}]
3.4.4 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)" // 标签文本颜色
}
}]
3.4.5 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"
}
}]
3.4.6 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]
]
}]
3.4.7 热力图基础配置案例
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)" // 标签文本颜色
}
}]
}
为一个『维度』。
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]
]
}]
3.4.7 热力图基础配置案例
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)" // 标签文本颜色
}
}]
}
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
