echarts 横向柱形图的使用

欢迎使用Markdown编辑器

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

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

代码展示

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<len;i++){ if(this.option.yAxis[0].data[i] == params.name){ let value=params.value+'/'+this.option.series[0].data[i] return `{color1|${params.name}}{color2|${value}}` //实现的效果为 XXX X/X } } }, rich:{ color1:{ color:'', }, color2:{ color:'', } }

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