描述
在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。接下来我们先对第一个图表——柱状图，进行定制。
我们先来看一下UI设计稿中的柱状图：
其次再看一下eCharts官网默认的柱状图：
除去DIV内边框的晕眩效果可以通过CSS或者直接拿切图当背景实现外，这里面的柱状图需要我们对官网原有的柱状图做定制，根据对比，可得知需要更改以下几部分：
- 柱状图网格线
- 柱状图横、纵轴的颜色
- 柱状的形状及颜色
目前使用的eCharts是最新版的4.5.0版本。
操作步骤
了解了大概需要定制哪些内容之后，我们接下来就开始定制我们的柱状图。
1、网格线修改
在柱状图中，修改网格线样式可以在xAxis和yAxis属性中添加splitLine属性来修改，具体代码如下：
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#262732'],
width: 1,
type: 'solid',
},
},
},
yAxis: {
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#262732'],
width: 1,
type: 'solid',
},
},
},2、横、纵轴的颜色修改
横、纵轴的颜色修改通过在xAxis和yAxis属性中添加splitLine属性来修改axisLine属性来修改，代码如下：
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
axisLine: { //横轴样式
lineStyle: {
color: '#ffffff',
},
},
},
yAxis: { //纵轴样式
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
},3、柱状的颜色和形状修改
在eCharts图表中，修改柱状图的形状和颜色需要修改series属性来实现，在此处我们修改了柱状的宽度、圆角和颜色，代码如下：
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
barWidth: 15, //柱状宽度
itemStyle: { //柱状颜色和圆角
color: '#F43368',
barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
},
}],通过以上三处的修改，我们实现了UI设计稿类似的效果，完整代码和最终效果如下所示：
const option01 = {
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#262732'],
width: 1,
type: 'solid',
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#262732'],
width: 1,
type: 'solid',
},
},
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
barWidth: 15,
itemStyle: {
color: '#F43368',
barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
},
}],
};
总结
以上定制的过程其实都是查阅eCharts官网的API文档实现的，所以在每类图表定制的时候，查阅API文档是最有效、准确的方法途径，参考地址如下：https://www.echartsjs.com/zh/option.html#xAxis
