echarts 横向柱形图的使用

echarts 横向柱形图的使用

欢迎使用Markdown编辑器

遇到了一个需求，实现横向的柱形图，并在左上角显示对应的名称【第一次用echarts，不太熟悉用法】

要解决以下几个问题

1. 柱形图展示为横向
2. 隐藏掉X轴Y轴的数据显示
3. 如何在柱形图上显示相应的数据

代码展示

yAxis: [{//数据放在Y轴，解决横向柱形图
          type: 'category',
          data: [],
          show:false,//不显示X轴的标注
          splitLine: {show: false},
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 15
          },
          axisLabel :{
            interval:0
          }
        }],
 series: [
          {
            name: 'XXX',
            type: 'bar',
            data: [],//存放的是黄色柱形的数据
            color:'#F8E37A',
            barWidth:20,//设置柱形的宽度
            barMinWidth:20,//最小宽度 barGap: 0可以让黄蓝之间没有空隙
            label: {
              show: true,
              color:'#2173B3',//标签的颜色
              position: [0, -12],//将label  显示在黄色柱形的左上角
              formatter:(params)=>params.name //显示对应的名称
              },
            },
]

遇到的问题

1.echarts的canvas没有占满父组件【width:100%;height:100%】时

grid: {//通过option.grid 实现占满父组件
          top:"50px",
          left:'10px'
          right:"40px",
          bottom:"50px"
        },

2.要显示不同样式的标签或显示x/x的格式

              formatter:(params)=>{//显示黄蓝两个的比值  例如1/4
                let len=this.option.yAxis[0].data.length
                for(var i=0;i

echarts 关于position的设定 有inside的相关属性 为啥没有outside 小问号
给自己记录下