本想照着文档配置顺序往下写的，但是想了想这样对刚接触Echarts的小伙伴们不太友好，所以上一篇的配置加上这篇配置以及下一篇配置可以自己写一个最基础的图表了。这也是要有基础结构才能更好的理解和使用其他图例组件。
看标题就容易理解这篇配置的是x轴和y轴（如下图红框），其实这两项配置掘金里已经有一篇文章了，但是我还是想自己过一遍文档，结合自己的理解再整理一下。
由于x轴y轴中有很多配置是相同的，y轴配置基本是重复的，参考x轴的配置就好了。准备开始食用了：
<div id="myChart"></div>
<script src="./js/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('myChart'), null, {
width: 900,
height: 375
});
var option = { // 定义变量接收配置对象
title: {
text: 'ECharts基础图表',
},
xAxis: { // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
id:'x', // String 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
show:true, // Boolean 是否显示 x 轴 省略配置则默认为true
gridIndex:'0', // Number x轴所在的grid的索引，默认位于第一个grid
alignTicks:'true', // Boolean 在多个 x 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效 （多个x轴是配置有效）
position:'', // String x轴的位置 可选：top，bottom 默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧 注：若未将 xAxis.axisLine.onZero 设为 false , 则该项无法生效
offset:'', // Number X轴相对于默认位置偏移，在相同的position上有多个X轴的时候有用 注意事项同position
type:'', // String 坐标轴类型 可选：value：数值轴，适用于连续数据；category：类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据；time：时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度；log：对数轴。适用于对数数据 （我的数据不太好，这个对数轴始终不太理解）
name:'时间', // String 坐标轴名称 （默认坐标轴末尾显示此名称）
nameLocation:'start', // String 坐标轴名称显示位置 可选：start；middle/center；end
nameTextStyle:{ // Object 坐标轴名称的文字样式 (我的理解是这里的配置跟css的属性类似)
color:'skyblue', // Color 坐标轴名称的颜色，默认取 axisLine.lineStyle.color
fontStyle:'normal', // String 坐标轴名称文字字体的风格 可选：normal；italic；oblique
fontWeight:'normal', // String/Number 坐标轴名称文字字体的粗细 可选：normal；bold；bolder；lighter；100 | 200 | 300 | 400...
fontFamily:'sans-serif', // String 坐标轴名称文字的字体系列 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize:'', // Number 坐标轴名称文字的字体大小
align:'right', // String 文字水平对齐方式，默认是自动 可选：left；center；right；如rich配置未设置则继承此项配置
verticalAlign:'', // String 文字垂直对齐方式，默认自动 可选：left；middle；right；rich配置同上
lineHeight:'', // Number 行高 rich配置同上
backgroundColor:'red', // String/Object 文字块背景色；可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'也可以Object中直接使用图片，如下
// backgroundColor:{image:'url'},// 这里可以是图片的 URL，或者图片的 dataURI，或者 HTMLImageElement 对象，或者 HTMLCanvasElement 对象；当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应
borderColor:'', // Color 文字块边框颜色
borderWidth:'', // Number 文字块边框宽度
borderType:'', // String/Number/Array 文字块边框描边类型 可选：solid；dashed；dotted；自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果
borderDashOffset:'', // Number 用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果
borderRadius:'', // Number/Array 文字块的圆角
padding:'', // Number/Array 文字块的内边距 padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距；padding: 4：表示 padding: [4, 4, 4, 4]；padding: [3, 4]：表示 padding: [3, 4, 3, 4]； 注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding
shadowColor:'', // Color 文字块的背景阴影颜色
shadowBlur:'', // Number 文字块的背景阴影长度
shadowOffsetX:'', // Number 文字块的背景阴影X偏移量
shadowOffsetY:'', // Number 文字块的背景阴影Y偏移量
width:'', // Number 文本显示宽度
height:'', // Number 文本显示高度
textBorderColor:'', // Color 文字本身的描边颜色
textBorderWidth:'', // Number 文字本身的描边宽度
textBorderType:'', // String/Number/Array 文字本身的描边类型 可选：solid；dashed；dotted；值为number数组时搭配下一项配置一同使用
textBorderDashOffset:'', // Number 从 v5.0.0 开始支持，用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果
textShadowColor:'', // Color 文字本身的阴影颜色
textShadowBlur:'', // Number 文字本身的阴影长度
textShadowOffsetX:'', // Number 文字本身的阴影X偏移
textShadowOffsetY:'', // Number 文字本身的阴影Y偏移
overflow:'none', // String 文字超出宽度是否截断或者换行。配置width时有效 可选：'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...；'break' 换行；'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换
ellipsis:'', // String 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
rich:{ // 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
}
},
nameGap:'-15', // Number 坐标轴名称与轴线之间的距离
nameRotate:'15', // Number 坐标轴名字旋转，角度值
inverse:true, // Boolean 是否方向坐标轴
boundaryGap:'', // Boolean/Array 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 ; 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间；非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
min:'', // Number/String/Function 坐标轴刻度最小值；可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度；不设置时会自动计算最小值保证坐标轴刻度的均匀分布
max:'', // 同min值相同
scale:'', // Boolean 只在数值轴中（type: 'value'）有效，是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用，在设置 min 和 max 之后该配置项无效
splitNumber:'', // Number 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整；注意:在类目轴中无效
minInterval:'', // Number 自动计算的坐标轴最小间隔大小，例如可以设置成1保证坐标轴分割刻度显示成整数；注意：只在数值轴或时间轴中（type: 'value' 或 'time'）有效
maxInterval:'', // 解释同上
interval:'', // Number 强制设置坐标轴分割间隔；因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用；无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值
logBase:'', // Number 对数轴的底数，只在对数轴中（type: 'log'）有效
silent:'true', // Boolean 坐标轴是否是静态无法交互
triggerEvent:'', // Boolean 坐标轴的标签是否响应和触发鼠标事件，默认不响应
axisLine:{ // Object 坐标轴轴线相关配置
show:true, // Boolean 是否显示坐标轴轴线
onZero:'', // Boolean X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
onZeroAxisIndex:'', // Number 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
symbol:'none', // String/Array 轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']
symbolSize:'', // Array 轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）
symbolOffset:'', // Array/Number 轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移
lineStyle:{ // Object 配置 X 轴线及文字的样式 属性有：color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity；以下举例两个
color:'red', // Color X轴的颜色
width:'1', // Number X轴的宽度
},
},
axisTick:{ // Object 坐标轴刻度相关配置
show:true, // Boolean 是否显示坐标轴刻度
alignWithLabel:'', // Boolean 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。如图
interval:'', // Number/function 坐标轴刻度的显示间隔，在类目轴中有效
inside:false, // Boolean 坐标轴刻度是否朝外，默认朝外
length:'10', // Number 坐标轴刻度的长度
lineStyle:{ // Object 刻度线的样式设置，属性与axisLine的lineStyle一致，如未设置则自动继承axisLine的lineStyle样式
color:'orange'
}
},
minorTick:{ // 坐标轴次刻度线相关设置(从 v4.6.0 开始支持) 注意：次刻度线无法在类目轴（type: 'category'）中使用
show:true, // Boolean 是否显示次刻度线
splitNumber:'5', // Number 次刻度线分割数，默认会分割成 5 段
length:'5', // Number 次刻度线的长度
lineStyle:{ // Objec 次刻度线的样式设置，属性与axisLine的lineStyle一致，如未设置则自动继承axisLine的lineStyle样式
color:'green'
}
},
axisLabel:{ // 坐标轴刻度标签的相关设置 (刻度对应的文本)
show:true, // Boolean 默认为true
interval:'', // Number/Function
inside:true, // Boolean 刻度标签是否朝内，默认朝外(false)
rotate:'45', // Number 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠 取值区间[-90,90]
margin:'15', // Number 刻度标签与轴线之间的距离
formatter:'', // String/Function 刻度标签的内容格式器，支持字符串模板和回调函数两种形式 ； 使用字符串模板，模板变量为刻度默认标签 {value}；使用函数模板，函数参数分别为刻度数值（类目），刻度的索引；
showMinLabel:'', // Boolean 是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
showMaxLabel:'', // Boolean 是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
hideOverlap:'', // Boolean 从 v5.2.0 开始支持 是否隐藏重叠的标签
color:'', // Color 刻度标签文字的颜色，默认取 axisLine.lineStyle.color
fontStyle:'', // String 文字字体的风格 可选：'normal'；'italic'；'oblique
fontWeight:'', // String/Number 文字字体的粗细 可选同其他fontWeight一致
fontFamily:'', // String 文字的字体系列 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize:'', // Number 文字的字体大小
align:'', // String 文字水平对齐方式，默认自动 可选：left；center；right
verticalAlign:'', // String 文字垂直对齐方式，默认自动 可选：top；middle；bottom
lineHeight:'', // Number 行高
backgroundColor:'', // String/Object 文字块背景色；可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'；也可使用图片如nameTextStyle中的backgroundColor
borderColor:'', // Color 文字块边框颜色
borderWidth:'', // Number 文字块边框宽度
borderType:'', // String/Number/Array 文字块边框描边类型 可选如其他borderType配置一致
borderDashOffset:'', // Number 用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果
borderRadius:'', // Number/Array 文字块的圆角，配置如其他borderRadius一致
padding:'', // Number/Array 文字块的内边距 配置如其他的padding一致
shadowColor:'', // Color 文字块的背景阴影颜色
shadowBlur:'', // Number 文字块的背景阴影长度
shadowOffsetX:'', // Number 文字块的背景阴影X偏移
shadowOffsetY:'', // Number 文字块的背景阴影Y偏移
width:'', // Number 文本显示宽度
height:'', // Number 文本显示高度
textBorderColor:'', // Color 文字本身的描边颜色
textBorderWidth:'', // Color 文字本身的描边宽度
textBorderType:'', // String/NUmber/Array 文字本身的描边类型 配置如其他textBorderType一致
textBorderDashOffset:'', // Number 从 v5.0.0 开始支持,用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果
textShadowColor:'', // Color 文字本身的阴影颜色
textShadowBlur:'', // Number 文字本身的阴影长度
textShadowOffsetX:'', // Number 文字本身的阴影 X 偏移
textShadowOffsetY:'', // Number 文字本身的阴影 Y 偏移
overflow:'', // String 文字超出宽度是否截断或者换行。配置width时有效 配置如其他overflow一致
ellipsis:'', // String 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
rich:{ // Object 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
},
},
splitLine:{ // Object 坐标轴在 grid 区域中的分隔线
show:'', // Boolean 是否显示分隔线。默认数值轴显示，类目轴不显示
interval:'', // Number/Function 坐标轴分隔线的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样
lineStyle:{ // Object 属性与axisLine的lineStyle一致，如未设置则自动继承axisLine的lineStyle样式
}
},
minorSplitLine:{ // 从 v4.6.0 开始支持，坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
show:'', // Boolean 是否显示次分隔线。默认不显示
lineStyle:{ // Object 属性与axisLine的lineStyle一致，如未设置则自动继承axisLine的lineStyle样式
}
},
splitArea:{ // Object 坐标轴在 grid 区域中的分隔区域，默认不显示
show:'', // Boolean 是否显示分隔区域
interval:'', // Number/Function 坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样
areaStyle:{ // Object 分隔区域的样式设置 可选属性：color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
}
},
data: ['周一', '周二', '周三', '周四', '周五'], // Array 类目数据，在类目轴（type: 'category'）中有效，如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'，如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。假如 series.data 为空时，就什么也获取不到
axisPointer:{ // Object 坐标轴指示器配置项
show:'', // Boolean 默认不显示。但是如果 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross'，则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择 (tooltip的配置后面会单独写一篇配置)
type:'', // String 指示器类型 可选：line：直线；shadow：阴影，none：无
snap:'', // Boolean 坐标轴指示器是否自动吸附到点上。默认自动判断，这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点
z:'', // Number 坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
label:{ // Object 坐标轴指示器的文本标签，属性{show , precision , formatter , margin , color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY} （配置与其他同名方式一致）
},
lineStyle:{ // Object axisPointer.type 为 'line' 时有效 属性{color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity} （与其他lineStyle中的配置一致）
},
shadowStyle:{ // Object axisPointer.type 为 'shadow' 时有效 属性{color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity}
},
triggerTooltip:false, // Boolean 是否触发 tooltip。如果不想触发 tooltip 可以关掉
value:'', // Number 当前的 value。在使用 axisPointer.handle 时，可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置
status:'', // Boolean 当前的状态，可取值为 'show' 和 'hide'
handle:{ // Object 拖拽手柄，适用于触屏的环境 属性{show , icon , size , margin , color , throttle , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY}
}
},
zlevel:'', // Number X 轴所有图形的 zlevel 值，zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:'', // Number X 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
},
yAxis: [{
type: 'value',
name: '工作强度（%）',
axisLine: {
show: true,
lineStyle: {
color: 'black',
}
},
}],
series: [{
name: '强度',
type: 'line',
data: [5, 20, 23, 10, 10]
}]
};
myChart.setOption(option);
</script>
以下补充富文本rich，可以通过这个链接查看官方文档的详解：echarts.apache.org/zh/tutorial…
