图例legend
- 前言：
- 1.[配置项手册](https://echarts.apache.org/zh/option.html#title)
- 2.[使用手册可以快速入门](https://echarts.apache.org/handbook/zh/get-started/)
- 3.
- 4.
- 一、图例legend
- 1.1 设置图例的位置 （上下左右）
- 1.1.1 上下（五种写法）可选值：'20'(px)、'20%'，'left'，'center'，'right'
- 1.1.2 左右 （五种写法）可选值：'20'(px)，'20%'，'top'，'middle'，'bottom'
- 1.2 图例的数据
- 1.3 图例的类型（固定型 or 滑动型）
- 1.4 图例组件
- 1.4.1 长宽的设置
- 1.4.2 图例组件的形状
- 1.4.3 图例组件之间的距离
- 1.4.4 图例组件的文字样式
- 1.4.5 图例组件的颜色设置
- 1.5 图例图标的布局朝向
- 1.6 图例组件列表的样式
- 1.7 图例和组件的位置（谁左谁右）
- 二、xy轴的设置
- 2.1 是否显示坐标轴show(boolean)
- 2.2 坐标轴类型 type
- 2.3 axisLabel坐标轴刻度相关配置
- 2.3.1 是否显示刻度标签 axisLabel.show
- 2.3.2 格式化刻度标签内容
- 2.3.3 强制坐标轴刻度间距 interval
- 2.3.4 正常设置坐标轴的刻度间距（长度）axisTick.length
- 2.3.5 axisTick.show是否显示坐标轴刻度
- 2.3.6 坐标轴刻度线样式
- 2.3.7 坐标轴刻度对应的文字样式
- 2.3.8 刻度与标签的距离 margin
- 2.4 splitLine 分割线
- 2.4.1 Axis.splitLine.show（是否显示分割线）
- 2.4.2 分割线样式（颜色 分割线的类型：虚线，点...... 线的粗细）
- 2.4.3 分割线刻度 interval
- 2.5 坐标轴名字
- 2.5.1 坐标轴名字位置 nameLocation
- 2.6 坐标轴刻度最大值 最小值
- 2.7 坐标轴名称与轴线之间的距离 nameGap
- 2.8 坐标轴名字旋转 nameRotate
- 2.9 是否反向坐标轴
- 2.10 坐标轴内容的样式设置 nameTextStyle
- 2.10.1 color坐标轴名字的颜色
- 2.10.2 坐标轴文字样式
- 2.11 坐标轴线
- 2.11.1 坐标轴线样式
- 2.11.2 是否显示坐标轴线（就是xy轴线）show
- 2.11.3 坐标轴线两端的设置
- 2.12 数据的展示内容样式data
- 2.13 分割范围 splitArea
- 2.13.1 是否显示 splitArea.show
- 2.13.2 分割范围样式（颜色 透明度）splitArea.areaStyle
- 2.14 设置双y轴
- 三、tooltip 图表提示框
- 3.1 汇总
- 3.2 悬浮框样式
- 3.3 悬浮框内文字样式
- 3.4
- 四、series页面展示的数据
- 4.1 公共属性
- 4.1.1 tyep 设置图的类型
- 4.2 饼状
- 4.2.1 内外半径大小
- 4.3 折线图
- 4.3.1 拐点设置
- 4.3.1.1 拐带形状symbol 大小symbol
- 4.3.1.1 拐带样式设置（颜色 边框 边框颜色 边框大小 折线：虚线 实线）series.itemStyle
- 4.3.2 线的光滑设置
- 4.3.3 折线的线样式修改 series.lineStyle
- 4.3.4 折线图的堆叠设置
- 4.4 柱状图
- 4.4.1 柱子的样式（宽度 背景颜色）
- 4.4.2 data的设置
- 4.4.3 柱子的itemStyle属性 (柱体圆角 颜色渐变设置)
- 4.4.4 柱状条相关设置
- 4.5 雷达图
- 4.6
- 五、grid 图表离容器的距离
- 5.1 常见属性
- 总结： 未完待续......
- 类目轴与非类目轴的概念:
前言：
1.配置项手册
2.使用手册可以快速入门
3.
4.
一、图例legend
1.1 设置图例的位置 （上下左右）
1.1.1 上下（五种写法）可选值：‘20’(px)、‘20%’，‘left’，‘center’，‘right’
legend: {
left: '',
right: '',
},
1.1.2 左右 （五种写法）可选值：‘20’(px)，‘20%’，‘top’，‘middle’，‘bottom’
legend: {
top: '',
bottom: '',
},
1.2 图例的数据
legend:{
data: ['一级报警', '二级报警', '三级报警', '四级报警', '五级报警'],
}
1.3 图例的类型（固定型 or 滑动型）
legend: {
type:'plain',// 固定型 默认图例
},
legend: {
tyepe:'scroll',// 滑动型 图例（适用于 图例很多的时候）
},
1.4 图例组件
1.4.1 长宽的设置
legend:{
itemWidth: 10,
itemHeight: 10,
}
1.4.2 图例组件的形状
icon: 'circle',
1.4.3 图例组件之间的距离
itemGap:40
1.4.4 图例组件的文字样式
textStyle: {
color: 'red',
fontSize: '20px',
fontWeight: 700,
fontFamily: '微软雅黑',
fontStyle: 'normal',
}
可以一个一个设置 or 写成空的形式，那么图例组件将和文字一个颜色
textStyle: {
color: [],
fontSize: '20px',
fontWeight: 700,
fontFamily: '微软雅黑',
fontStyle: 'normal',
}
1.4.5 图例组件的颜色设置
color:['','','','',]
1.5 图例图标的布局朝向
可选择值如下：
- ‘horizontal’：横向
- ‘vertical’：纵向
legend:{
orient: 'vertical',
}
1.6 图例组件列表的样式
-
backgroundColor 背景颜色
-
borderColor 边框颜色
-
borderWidth 边框宽度
-
padding 内边距
legend: {
backgroundColor: '#fac858',
borderColor: '#5470c6',
borderWidth: '200',
}
1.7 图例和组件的位置（谁左谁右）
align:'auto',// 默认
align:'left',
align:'right',
二、xy轴的设置
2.1 是否显示坐标轴show(boolean)
show:'true'
2.2 坐标轴类型 type
type:'value'
2.3 axisLabel坐标轴刻度相关配置
2.3.1 是否显示刻度标签 axisLabel.show
axisLabel:{
show:''true,
}
2.3.2 格式化刻度标签内容
2.3.3 强制坐标轴刻度间距 interval
interval:10,
2.3.4 正常设置坐标轴的刻度间距（长度）axisTick.length
axisTick:{
length:100
}
2.3.5 axisTick.show是否显示坐标轴刻度
2.3.6 坐标轴刻度线样式
axisTick:{
lineStyle: {
color: '#FFF', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
}
2.3.7 坐标轴刻度对应的文字样式
axisLabel:{
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
}
2.3.8 刻度与标签的距离 margin
axisLabel:{
margin: 10, // 刻度标签与轴线之间的距离
}
2.4 splitLine 分割线
2.4.1 Axis.splitLine.show（是否显示分割线）
splitLine.show:{
show:'true'
}
2.4.2 分割线样式（颜色 分割线的类型：虚线，点… 线的粗细）
splitLine:{
color: ['#ccc'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
2.4.3 分割线刻度 interval
splitLine:{
interval:'10',// 0的话 就表示没有间隔
}
2.5 坐标轴名字
name:'这是x轴',
2.5.1 坐标轴名字位置 nameLocation
nameLocation:'start'
2.6 坐标轴刻度最大值 最小值
max:100,
min:100,
2.7 坐标轴名称与轴线之间的距离 nameGap
nameGap:15
2.8 坐标轴名字旋转 nameRotate
nameRotate: 10,
2.9 是否反向坐标轴
inverse: false, // 是否是反向坐标轴
2.10 坐标轴内容的样式设置 nameTextStyle
2.10.1 color坐标轴名字的颜色
nameTextStyle:{
color:'',
}
2.10.2 坐标轴文字样式
nameTextStyle:{
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
}
2.11 坐标轴线
2.11.1 坐标轴线样式
axisLine:{
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
}
2.11.2 是否显示坐标轴线（就是xy轴线）show
2.11.3 坐标轴线两端的设置
axisLine:{
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
}
2.12 数据的展示内容样式data
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
},
2.13 分割范围 splitArea
2.13.1 是否显示 splitArea.show
2.13.2 分割范围样式（颜色 透明度）splitArea.areaStyle
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
}
2.14 设置双y轴
例子：
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
怎么对应？？？给数据添加yAxisIndex:0 1 2 3…(没写该属性默认是0)
series: [
{
name: '蒸发量',
type: 'bar',
yAxisIndex: 0,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
yAxisIndex: 0,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
三、tooltip 图表提示框
3.1 汇总
tooltip: {
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'shadow', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
// showContent: true, //是否显示提示框浮层，默认显示。
// triggerOn: 'mouseover', // 触发时机 'mouseover'鼠标移动时触发。 'click'鼠标点击时触发。 'mousemove|click'同时鼠标移动和点击时触发。
// enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
confine: false, // 是否将 tooltip 框限制在图表的区域内。
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
},
3.2 悬浮框样式
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
3.3 悬浮框内文字样式
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
3.4
四、series页面展示的数据
4.1 公共属性
4.1.1 tyep 设置图的类型
type:'bar',
type:'pie',
type:'line',
4.2 饼状
4.2.1 内外半径大小
radius: ['60%', '85%'],//数组的第一项是内半径（%），第二项是外半径（%）。
4.3 折线图
4.3.1 拐点设置
4.3.1.1 拐带形状symbol 大小symbol
circle(实心○), rect(□), roundRect(边框带弧度的□), triangle（△）, diamond（◇）, pin(水滴形),arrow (箭头形),none（无）
symbol: 'circle', //拐点设置为实心圆
symbolSize: 18,
4.3.1.1 拐带样式设置（颜色 边框 边框颜色 边框大小 折线：虚线 实线）series.itemStyle
itemStyle: {
normal: {
color: '#c523f4',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 ,//拐点边框大小
type: 'dotted' // dotted 虚线，solid 实线
}
},
4.3.2 线的光滑设置
series:[
{
smooth:true,
}
]
4.3.3 折线的线样式修改 series.lineStyle
lineStyle: {
width: 4,//线条粗细
color: '#c523f4'//线条颜色
},
4.3.4 折线图的堆叠设置
stack:'name'// 要堆叠在一起的名字要取一样的
4.4 柱状图
4.4.1 柱子的样式（宽度 背景颜色）
showBackground:true,
backgroundStyle: {
color:'', // 背景颜色
}
barWidth:'50%', //柱子宽度
4.4.2 data的设置
4.4.3 柱子的itemStyle属性 (柱体圆角 颜色渐变设置)
itemStyle:{
barBorderRadius: [2, 2, 0, 0], //柱体圆角
color: new echarts.graphic.LinearGradient(
//前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
//通过修改前4个参数，可以实现不同的渐变方向
/*第五个参数则是一个数组，用于配置颜色的渐变过程。
每项为一个对象，包含offset和color两个参数
*/
0, 0, 0, 1, [{//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: '#09b0fa'
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: '#2778ff'
}
]
),
}
4.4.4 柱状条相关设置
4.5 雷达图
4.6
五、grid 图表离容器的距离
5.1 常见属性
grid: {
show:true,
left: "5%",
top: "5%",
right: "5%",
bottom: "5%"
backgroundColor: "rgba(224, 17, 17, 1)"
borderColor: "rgba(96, 67, 67, 1)"
},
总结： 未完待续…
类目轴与非类目轴的概念:
区分在于：坐标轴上的展示信息是否是数据连贯
