前端 - echarts横向柱形图怎么把文字显示到上面去?

Question

这是要的效果，
但我怎么调都只能这样

应该去调series还是y轴

Answer 1

主要调整yaxis的参数，下面有个例子可参考

let xdata = ['label1', 'label2', 'label3'];option = {  tooltip: {    trigger: 'axis',    axisPointer: {      type: 'shadow'    }  },  grid: {    left: 100  },  toolbox: {    show: true,    feature: {      saveAsImage: {}    }  },  xAxis: {    show: false  },  yAxis: {    type: 'category',    inverse: true,    splitLine: {      show: false    },    axisTick: {      show: false    },    axisLine: {      show: false    },    axisLabel: {      show: true,      inside: true,      interval: 0,      splitNumber: 50,      textStyle: {        color: '#111',        verticalAlign: 'bottom',        fontSize: 14,        align: 'left',        padding: [0, 0, 15, -5]      }    },    data: xdata  },  series: [    {      type: 'bar',      barWidth: 24,      data: [165, 170, 30],      label: {        position: 'inside',        offset: [480, -20],        textStyle: {          color: '#111'        }      }    }  ]};

实现效果如图

Answer 2

option = {  xAxis: {    max: 'dataMax'  },  yAxis: {    type: 'category',    axisLine:{      show:false    },    axisTick:{      show:false    },    axisLabel:{      show:false,    },    data: ['广州市番禺区1', '广州市番禺区2', '广州市番禺区3'],      },  series: [    {      type: 'bar',      barGap: 0,      data: [        {          value: 120,          itemStyle: {            color: '#fff'          }        },        {          value: 200,          itemStyle: {            color: '#fff'          }        },        {          value: 150,          itemStyle: {            color: '#fff'          }        },      ],      barWidth:40,      label: {        show: true,        fontSize:18,        position: [10, 10],        formatter: '{b}',      },    },    {      type: 'bar',      data: [         {          value: 120,          itemStyle: {            color: '#ff0'          }        },        {          value: 200,          itemStyle: {            color: '#ff0'          }        },        {          value: 150,          itemStyle: {            color: '#ff0'          }        },      ],      barWidth:20,      label: {        show: true,        position: 'right',      },    }  ],};

Answer 3

使用series或y轴都可以实现，比如下面的案例
这是使用series实现的：https://www.makeapie.cn/echarts_content/x65Xqw5MAf.html
这是使用y轴实现的：https://www.makeapie.cn/echarts_content/xqjNqqjc_U.html

不过你的series右侧已经有数值显示了，所以可以使用y轴显示

Answer 4

echarts横向柱形图把文字显示到上面去的方法如下：

1. 选中横向柱形图中的文字标签，右键选择“设置系列”或“设置坐标轴”。
2. 在弹出的对话框中，选择“标签”选项卡。
3. 在“标签”选项卡中，找到“标签位置”或“文字居中”或“文字对齐方式”等选项，选择“居中”或“上居中”。
4. 点击“确定”按钮即可完成设置。

请注意，以上方法适用于 ECharts 版本 4.0 及以上。如果您使用的是旧版本，请参考 ECharts 官方文档进行设置。