每次写echarts 修改样式时，要么就是翻以前代码，要么找官方api，太浪费时间了，就把常用到的一些记录下来做个笔记，方便下次查看。

1.修改柱条颜色

1.1修改柱条颜色为纯色

series: [{name: '个数',type: 'bar',label: {normal: {show: true,position: 'inside'}},data: [],itemStyle:{ //修改柱条颜色color: '#f00'},barMaxWidth:40},
]

1.2 修改柱条颜色为渐变色

series: [{name: '个数',type: 'bar',label: {normal: {show: true,position: 'inside'}},data: [],itemStyle:{ //修改柱条颜色color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 1, color: '#00adff'},{offset: 0.5, color: '#007dfe'},{offset: 0, color: '#0054fd'},                   //柱图渐变色])},barMaxWidth:40},
]

修改后的渐变柱条如下：

2.调整图表周围的空白区域

坐标轴文字区域太窄，显示效果不好，如果能把图表左边的区域留大一点就好了，而 grid 组件能帮助我们实现。

grid: {x: '25%', //grid 组件距离左侧的距离y: 50
},

由于显示的字数有点多，距离太远了影响也不好，所以再加上了换行。最终效果如下：

（换行具体操作参考之前的文章：echarts坐标轴上文本太长的解决办法）

3. 图表去除网格线、坐标轴颜色修改

xAxis:  {type: 'value',splitLine:{show: false},//去除网格线position:'top',//坐标轴位置axisLine:{lineStyle:{color:'#fff',width:1,//这里是为了突出显示加上的}}
},

想到再更新,未完待续...