1.柱状纵向变横向
将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示
//纵向xAxis: [{type: 'value'}],yAxis: [{type: 'category',data: this.regionList,axisTick: {alignWithLabel: true}}],//横向yAxis: [{type: 'value'}],xAxis: [{type: 'category',data: this.regionList,axisTick: {alignWithLabel: true}}],
2.圆角
series: [{name: '哒哒哒',type: 'bar',barWidth: '13px', //柱状宽度itemStyle: {normal: {barBorderRadius: [0, 8, 8, 0], //设置圆角方向[上,右,下,左]},data: this.deviceCount}]
3.渐变
series: [{name: '哒哒哒',type: 'bar',itemStyle: {normal: {// LinearGradient(1, 0, 0, 0)渐变方向从左到右// LinearGradient(0, 1, 0, 0)渐变方向从下到上// LinearGradient(0, 0, 1, 0)渐变方向从右到左// LinearGradient(0, 0, 0, 1)渐变方向从上到下// LinearGradient(1, 1, 0, 0)渐变方向从左下到右上color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: "#EDC967" // 0% 处的颜色}, {offset: 1,color: "#EB6D57" // 100% 处的颜色}], false)}},data: this.deviceCount}]
4.x轴字体倾斜或垂直显示
xAxis: [{type: 'category',data: this.alarmTList,axisTick: {alignWithLabel: true},axisLabel: {interval: 0,// 倾斜45°rotate:45,//倾斜度 -90 至 90 默认为0}}],xAxis: [{type: 'category',data: this.alarmTList,axisTick: {alignWithLabel: true},axisLabel: {interval: 0,// 垂直显示formatter: function (value) {return value.split('').join('\n');}}}],