echarts 柱状图如何不顶格_echarts完成横向柱状图遇到的问题

近期在使用echart开发过程中遇到一些问题，需要开发横向柱状图，横向对比噪声相似度。

以下是遇到的几个问题列表：

问题1：柱状图横置

首先要把官方文档给的柱状图横置，只需要在option配置项里yAxis中增加一列即可实现。

xAxis: {

type:'value',

show:false,

boundaryGap: ['5%', '5%'],

},

yAxis: {

type:'category', //增加这一行代码，即可柱状图横置

data: ["Mahlendes","Tickern","Tacken","300HZ","Tockern"],

axisTick: {

show: false

},

axisLine: {

show: false,

},

axisLabel: {

inside: false,

textStyle: {

color: '#000',

fontSize:'15',

itemSize:''

}},

max:6},

问题2：柱状图标题居中下移

官方文档看的不仔细的话，不知道如何定义标题居中，实际也是一行代码的问题。

title: {

text: '噪声识别结果：',

left:'center', // 标题居中的代码

top:20 //项目要求标题距离顶部有间距，可以直接用数字也可用百分比。

},

问题3：柱状图Y轴文字显示不全

遇到的情况类似这样的，文字从头开始被隐藏了一部分。

image.png

找了很久最后找到了解决方案，使用如下代码：

grid:{

containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。

},

设置完成之后的效果为：

image.png

文字描述不是过长的情况下适用。

问题4：柱状图数字设置为百分比显示

实际传进来的数据是常见数字，并不能直接写百分数会报错，所以考虑在格式上控制。同样在option中增加配置项代码：

series: [{

name: '相似度',

type: 'bar',

data: [1, 1, 1, 17,80],

label:{

show:true,

formatter: '{c}%', //显示数据带上百分比

position:'right' //控制数据显示位置，‘’right‘’为显示在柱状图右侧

}

}]

最终显示效果如下图：

image.png