菜鸟修行之路–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',// 数据项值8value: 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)"  // 标签文本颜色}}]
}

菜鸟修行之路--Echarts数据可视化知识总结完整版相关推荐

Echarts数据可视化全解注释
全栈工程师开发手册 (作者:栾鹏) github地址:https://github.com/626626cdllp/echarts Echarts数据可视化开发代码注释全解 Echarts数据可视化开 ...
菜鸟修行之路----项目实战：微人事项目之项目概述
菜鸟修行之路----项目实战:微人事项目之项目概述修行之路艰辛,与君共勉!! 从即日起,通过对于github上非常热门的前后端分离开发的开源项目:微人事管理系统的全面学习以及自主手写代码实现 ...
第一本 ECharts 数据可视化书籍出版了！
L说:这是朋友王大伟的著作,推荐大家购买. 我的第一本书终于出版了,书名叫做<ECharts数据可视化:入门.实战与进阶>,目前在当当.京东已经上架,可购买学习! 什么是ECharts E ...
一本 ECharts 数据可视化书籍
对Echarts感兴趣的同学,给大家推荐一本很不错的书籍. PS:文末小z还给大家争取了两本的福利. Apache ECharts (incubating),下文简称ECharts,是由百度捐献给Ap ...
python echarts数据可视化实战
python echarts数据可视化 python echarts数据可视化实战引言词云分析柱状图分析饼图分析总结 python echarts数据可视化实战引言引言上一章我给大家用 ...
爬虫+MySQL+flask+echarts数据可视化
最近在学习数据可视化知识,就拿了小时候玩的洛克王国练了练手,爬取每个精灵的各项属性数据,存入到数据库中,并用flask框架进行可视化出来. 1.首先分析一下整个页面,所有的精灵信息存储在一个ul标签中 ...
echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
Echarts数据可视化grid直角坐标系（xAxis、yAxis）
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWei ...
Echarts数据可视化全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件: Echarts数据可视化visualMap全解 Echarts数 ...
Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...