echarts柱形图自定义字体样式，以及柱形的填充色

最近项目需求要用echarts做一些数据分析图表，ui设计的图比较美观，显然echarts默认的图表样式满足不了需求，看官网文档之后完美的还原了ui图，在这里稍微的总结一些，首先效果图如下：

这里我所做的变化有这几点：
1、x轴的轴线颜色、字体颜色，以及把刻度取消了
2、y轴的轴线颜色、坐标指示线颜色、字体颜色、刻度取消；
3、柱形填充色为自定义渐变色
第一点的实现方法：在配置项xAxis:{}配置

第二点实现方法：在配置项yAxis:{}里配置

第三点实现方法：在配置项series:{}里配置

要注意的是需要先声明 echarts，

至此就实现效果图了，
完整代码如下

drawChart2() {
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('data-lf-bottom'));
			// 指定图表的配置项和数据
			let option = {
				grid: {
					//坐标系地板的定位
					left:60,
					bottom:50
				},
				xAxis: {
					type: 'category', //类名轴
					data: ['5', '6', '7','8','9','10'],
					axisLine: {//坐标轴轴线相关设置
						
						lineStyle: {
							color: '#262571'//x轴线颜色设置
						}
					},
					axisLabel: {// 坐标轴刻度标签的相关设置
						show: true,//控制显隐
						textStyle: {
							color: '#6FCEFF',//x轴字体颜色
							fontSize: 20 // 
						}
					},
					axisTick: {
						//x轴刻度相关设置
						show: false
					}
				},
				yAxis: {
					axisLine: {
						//坐标轴轴线相关设置
						lineStyle: {
							color: '#262571'
						}
					},
					axisLabel: {//坐标轴刻度标签的相关设置
						textStyle: {//y轴字体样式设置
							color: '#CFD4EB',
							fontSize:20
						}
					},
					axisTick: {
						//y轴刻度相关设置
						show: false
					},
					splitLine: {//坐标轴在 grid 区域中的分隔线相关设置
						lineStyle: {//线的样式设置
							color: '#262571'
						}
					}
				},
				series: [
					{
						name: '数量',
						type: 'bar',
						data: [50, 125, 10,50,30,15],
						barWidth: 28, //柱图宽度
						itemStyle: {//图形样式相关设置
							normal: {
								//自定义柱形渐变色
								color: new echarts.graphic.LinearGradient(
									0,
									1,
									0,
									0,
									[
										{
											offset: 0,
											color: '#63FFFF' // 0% 处的颜色
										},
										{
											offset: 1,
											color: '#0054FF' // 100% 处的颜色
										}
									],
									false
								),
							}
						}
						
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},