这是我在掘金发的第一篇文章，选择掘金是觉得国内IT类技术社区目前只有掘金较为纯粹简单，大多是原创，大家都是抱着交流技术的心态发表自己对技术的理解，这点我个人非常喜欢，也希望跟掘金还有掘金里面的技术大牛们共同进步。
有发文章的想法是前段时间写一个产品的需求遇到了一些问题，在掘金以及很多其他社区上很多没有找到，这也很可能是我检索的关键词有问题。作为一个刚入行的前端菜鸟，希望大牛们发现了错误能及时指正。
第一篇文章写Echarts配置的原因很简单：一是目前在职的公司用到的比较多，有用到可以偷个懒；二是公司网络比较慢导致Echarts的官网有时进不去；三是Echarts的文档算是比较友善，我还算能看懂。
接下来就是Echarts最基础的文本标题配置以下配置只针对图片红框内文本。实现如图效果请将title对象中link到title配置对象结束位置注释即可。
<!-- html代码与script引入 -->
<div id="myChart"></div>
<script src="./js/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('myChart'), null, {
width: 1498,
height: 375
}); // 该配置为放置图表的Dom元素，图表宽高
var option = { // 定义变量接收配置对象
title: { // Object 图表标题配置
id: '', // String 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show: true, // Boolean 是否显示标题组件。默认为 true
text: 'ECharts基础图表', // String 主标题文本，支持使用 \n 换行。
link: '', // String 主标题文本超链接 (可不写) 作用等同于 a标签中的 href 属性
target: '', // String 指定窗口打开主标题超链接。 可选：self:当前窗口打开；blank：新窗口打开
textStyle: { // Object 主题文字样式
color: '', // Color 主标题文字颜色
fontStyle: '', // String 主标题文字字体的风格 可选: normal、italic、oblique
fontWeight: '', // String/Number 主标题文字字体的粗细 可选: normal、bold、bolder、lighter、数字: 100|200|300|400|...
fontFamily: '', // String 主标题文字的字体系列
fontSize: '', // Number 主标题文字的字体大小
lineHeight: '', // Number 行高
rich: { // Object rich中如果没有设置lineHeight，则会继承 lineHeight
// 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。以下时官网的例子
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
},
width: '', // Number 文本显示宽度
height: '', // Number 文本显示高度
textBorderColor: '', // Color 文字本身的描边颜色
textBorderWidth: '', // Number 文字本身的描边宽度
textBorderType: '', // String/Number/Array 文字本身的描边类型 可选：solid/dashed/dotted
textBorderDashOffset: '', // Number 自 v5.0.0 开始支持，也可以是 number 或者 number 数组，用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。[ 更多详情可以参考 MDN ](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
textShadowColor: '', // Color 文字本身的阴影颜色
textShadowBlur: '', // Number 文字本身的阴影长度
textShadowOffsetX: '', // Number 文字本身的阴影X偏移
textShadowOffsetY: '', // Number 文字本身的阴影Y偏移
overflow: '', // String 文本超出宽度是否截断或者换行。配置width时有效。可选：'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...；'break' 换行；'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
ellipsis: '', // String 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示自定义文本。
},
subtext: '副标题', // String 副标题文本，支持 \n 换行
sublink:'', // String 副标题文本超链接
subtarget:'', // String 指定窗口打开副标题超链接，可选：self:当前窗口打开；blank：新窗口打开
subtextStyle:{ // Object 副标题文本样式
color:'', // Color 副标题文字的颜色
fontStyle: '', // String 副标题文字字体的风格 可选: normal、italic、oblique
fontWeight: '', // String/Number 副标题文字字体的粗细 可选: normal、bold、bolder、lighter、数字: 100|200|300|400|...
fontFamily: '', // String 副标题文字的字体系列
fontSize: '', // Number 副标题文字的字体大小
align:'', // String 文字水平对齐方式，默认自动，可选：left，center，right
verticalAlign:'', // String 文字垂直对齐方式，默认自动 可选：top，middle，bottom
lineHeight:'', // Number 行高
formatter: [ // 此配置为下方rich提供文本支持
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
],
rich:{ // Object rich 中如果没有设置 align，则会继承父层级的 align，verticalAlign，lineHeight
// 在文本中，可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号：
// `{styleName|text content text content}` 标记样式名。
// 注意，换行仍是使用 '\n'。
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
},
width:'', // Number 文本显示宽度
height:'', // Number 文本显示高度
textBorderColor:'', // Color 文本本身的描边颜色
textBorderWidth:'', // Number 文本本身的描边宽度
textBorderType:'', // String/Number/Array 文字本身的描边类型 可选：solid/dashed/dotted
textBorderDashOffset: '', // Number 自 v5.0.0 开始支持，也可以是 number 或者 number 数组，用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。[更多详情可以参考 MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
textShadowColor:'', // Color 文字本身的阴影颜色
textShadowBlur:'', // Number 文字本身的阴影长度
textShadowOffsetX:'', // Number 文字本身的阴影 X 偏移
textShadowOffsetY:'', // Number 文字本身的阴影 Y 偏移
overflow:'', // String 文字超出宽度是否截断或者换行。配置width时有效 可选：'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...；'break' 换行；'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
ellipsis: '', // String 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示自定义文本。
},
textAlign:'', // String 整体（包括 text 和 subtext）的水平对齐 可选值：'auto'、'left'、'right'、'center'
textVerticalAlign:'', // String 整体（包括 text 和 subtext）的垂直对齐 可选值：'auto'、'top'、'bottom'、'middle'
triggerEvent:'', // Boolean 是否触发事件
padding:'', // Number/Array 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距 2个值number数组[number(上下),number(左右)] / 4个值number数组[number(上),number(右),number(下),number(左)]
itemGap:'', // Number 主副标题之间的间距
zlevel:'', // Number 所有图形的 zlevel 值 zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
z:'', // Number 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
left:'', // String/Number title 组件离容器左侧的距离 left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。（下方top同理）
top:'', // String/Number title 组件离容器上侧的距离
right:'', // String/Number title 组件离容器右侧的距离 right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比,默认自适应。（下方bottom同理）
bottom:'', // String/Number title 组件离容器下侧的距离
backgroundColor:'', // Color 标题背景色，默认透明 颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'
borderColor:'', // Color 标题的边框颜色。支持的颜色格式同 backgroundColor
borderWidth:'', // Number 标题的边框线宽
borderRadius:'', // Number/Array 圆角半径，单位px，支持传入数组分别指定4个圆角半径，数组方向[左上，右上，右下，左下]
shadowBlur:'', // Number 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 注意：此配置项生效的前提是，设置了 show: true(title以下其他配置同理), 以及值不为 tranparent 的背景色 backgroundColor。
shadowColor:'', // Color 阴影颜色。支持的格式同color
shadowOffsetX:'', // Number 阴影水平方向上的偏移距离
shadowOffsetY:'', // Number 阴影垂直方向上的偏移距离
},
legend: {
data: ['强度'] // 头部提示对应的值
},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五'] // x轴刻度配置
},
yAxis: [{
type: 'value',
name: '工作强度（%）', // y轴文字说明
axisLine: {
show: true, // 配置y轴是否显示 默认false
lineStyle: { //配置y轴颜色
color: 'black', // 颜色 ——>支持单词 / 十六进制
}
}
}],
series: [{
name: '强度',
type: 'line', // 折线图，bar为柱状图用的比较多，更多配置可以等我更新，也可官网自行查看
data: [5, 20, 23, 10, 10] // 图表的值
}]
};
myChart.setOption(option); // 将配置的对象加入实例化的myChart
</script>
以上就是这期的内容了，下期不定时更新，工作之余抽空整理的，觉得写的不好或者有什么建议欢迎留言。有什么技术也欢迎在评论区大家共同探讨。
