#前言
作为一名专业的前端开发工程师，大家在日常的开发过程中，必定或多或少接触使用过echart 这一基于 JavaScript 的开源可视化图表库，特别是做数据可视化领域的同学，对于echart的使用开发已经可以算是家常便饭了。
echart不仅能够流畅的运行在 PC 和移动设备上，提供直观，交互丰富，可高度个性化定制的数据可视化图表，而且还能兼容当前绝大部分浏览器，可以说是数据可视化开发的首选了。当然也有不少同学更青睐antv，只能说萝卜青菜各有所爱，但是客观来说，echart更专注于静态视图的渲染，而antv更擅长一些更加炫酷的交互效果，没有绝对的高低之分！
今天就在这里和大家分享一下本人在平时使用echart的开发过程中，踩过的那些小坑，希望能够帮助到平时使用echart开发可视化的同学。
#图例文本水平对齐
UI设计小姐姐：我们系统全局的折线图图例应该是方块，饼图应该是圆形，你简简单单改一下！
这个要求虽然挺无聊的，但是也挺简单的，搞起来！
legend: {
// 将原来的rect改为circle
icon: 'circle'
}
复制代码本来以为挺简单的，但没想到居然就踩到坑了，可以发现如下所示的效果图中，图例的icon和文本text明显没有在同一水平线上！
作为一个有职业操守的前端开发，必然是不答应在页面上有这等瑕疵。于是我开始尝试通过调整样式来达到水平对齐效果，可是无论怎么改都无济于事，还好我最终在ecahrt的issues上找到了解决方法（ps：果然没事还是要多逛逛github）
解决方法：修改图例文本的字体fontFamily
legend: {
// 将原来的rect改为circle
icon: 'circle',
// 新增的代码
textStyle: {
fontFamily: 'serif'
}
}
复制代码这样我们就成功解决图例文本没有水平对齐的问题了，可是设计师又开始整活了。
#图例关闭时icon样式改变
设计师：饼图的每一个扇形之间都加上2px的间距，你简简单单改一下！
同样简单，直接上代码！
series: [
{
type: 'pie',
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
复制代码就在我内心美滋滋准备向UI设计小姐姐邀功时发现，当我们关闭图例时，图例的icon居然莫名奇妙变大了！
明明没有修改过legend的配置，怎么会这样子呢？而且这次在ecahrt的issues上面也没有找到相关的问题，看来只能靠自己了。
由于是在增加了itemStyle的borderWidth之后出现这个情况，我合理怀疑是边框搞的鬼，于是我们尝试修改图例关闭时的边框样式，终于解决了，看代码！
legend: {
icon: 'circle',
textStyle: {
fontFamily: 'serif'
},
// 新增的代码
inactiveBorderColor: '#fff',
},
复制代码看样子问题是终于解决了，还没等我们开心，UI设计师小姐姐又开始整活了！
#同一个title不同样式
UI设计小姐姐：我这个环状图的标题要分两行居中且两行样式要不同，你简简单单改一下！
这可难倒我了，在我的印象中，title配置项文档里面，并没有提供支持同一title不同样式的配置项。
还好我没有放弃，在熟读文档之后发现，rich也是能够应用于title配置项的，具体使用方法大家可以自行查阅文档，这里不再赘述，直接上代码。
title: {
text: '{firstTitle|一级标题}\n{secondTitle|二级标题}',
top: 'center',
left: 'center',
textStyle: {
fontSize: 24,
rich: {
firstTitle: {
fontSize: 24,
color: '#000'
},
secondTitle: {
fontSize: 16,
color: '#333',
padding: [4, 0, 0, 0]
}
}
}
}
复制代码这样我们就实现了同一title不同样式的效果，据我所知rich还可以用于其他更多地方，果然还是得多读读文档，流下了没技术的泪水！
就在我以为一切都解决了，可以6点准时下班的时候，UI设计师小姐姐又来了！
#图例实现折线样式
UI设计师小姐姐：我们系统的折线图对应的图例也要做成折线，你简简单单改一下！
这个听起来毫无依据的要求居然这么合理，还好我们的echart够给力，不就是换个图例icon吗，说干就干！
于是我又打开了echart官方文档，于是我发现legend的icon根本没有折线条样式，于是我开始慌了...
还好echart在关了一扇门的同时，还给我们留了一扇后门，我们可以通过 'path://' 将图标设置为任意的矢量路径，直接上代码！
legend: {
icon:'path://M400,595 L420,595 L420,610 L400,610 z M430,595 L450,595 L450,610 L430,610 z M460,595 L480,595 L480,610 L460,610 z',
name:'数值',
itemHeight:4,
itemWidth:20,
textStyle:{
fontFamily:'serif'
}
}
复制代码 于是我们终于实现了折线效果，而且还不用担心因为缩放而产生锯齿或模糊，终于可以6点准时下班了！
#写在最后
关于echart的小坑目前就遇到这么多，后续也会持续跟进，将遇到的问题分享给大家，帮助大家排雷。
感谢观看！