在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。接下来我们先对第一个图表——柱状图，进行定制。

我们先来看一下UI设计稿中的柱状图：

其次再看一下eCharts官网默认的柱状图：

除去DIV内边框的晕眩效果可以通过CSS或者直接拿切图当背景实现外，这里面的柱状图需要我们对官网原有的柱状图做定制，根据对比，可得知需要更改以下几部分：

目前使用的eCharts是最新版的4.5.0版本。

了解了大概需要定制哪些内容之后，我们接下来就开始定制我们的柱状图。

1、网格线修改

在柱状图中，修改网格线样式可以在xAxis和yAxis属性中添加splitLine属性来修改，具体代码如下：

2、横、纵轴的颜色修改

横、纵轴的颜色修改通过在xAxis和yAxis属性中添加splitLine属性来修改axisLine属性来修改，代码如下：

3、柱状的颜色和形状修改

在eCharts图表中，修改柱状图的形状和颜色需要修改series属性来实现，在此处我们修改了柱状的宽度、圆角和颜色，代码如下：

通过以上三处的修改，我们实现了UI设计稿类似的效果，完整代码和最终效果如下所示：

以上定制的过程其实都是查阅eCharts官网的API文档实现的，所以在每类图表定制的时候，查阅API文档是最有效、准确的方法途径