300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Echarts柱状纵向横向 圆角 渐变 x轴字体倾斜或垂直显示

Echarts柱状纵向横向 圆角 渐变 x轴字体倾斜或垂直显示

时间:2023-02-10 11:46:00

相关推荐

Echarts柱状纵向横向 圆角 渐变 x轴字体倾斜或垂直显示

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');}}}],

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。