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