当前位置: 首页> 文旅> 文化 > echarts横向柱状图让Y轴的名字在柱状图上方展示

echarts横向柱状图让Y轴的名字在柱状图上方展示

时间:2025/7/11 7:44:54来源:https://blog.csdn.net/Z_Gleng/article/details/141674852 浏览次数:0次

效果

代码
 

   myEcharts(){// 基于准备好的dom,初始化echarts实例this.myChart =  echarts.init(this.$refs.rankingList);// 指定图表的配置项和数据var option = {  title: {    },  tooltip: {  trigger: 'axis',  axisPointer: {  type: 'shadow'  }  },  legend: {  data: ['数据']  },  grid: {  top: '0',  left: '3%',  right: '4%',  bottom: '3%',  containLabel: true  },  xAxis: {  type: 'value',  boundaryGap: [0, 0.01] ,axisLine: { // 控制坐标轴线  show: false // 隐藏轴线  },  axisTick: { // 控制刻度线  show: false // 隐藏刻度线  },  splitLine: { // 控制网格线  show: false // 隐藏网格线  },  axisLabel: { // 控制坐标轴标签  show: false // }  },  yAxis: {  type: 'category',  data: ['项目5', '项目4', '项目3', '项目2', '项目1'] ,axisLine: { // 控制坐标轴线  show: false // 隐藏轴线},  axisTick: { // 控制刻度线  show: false // 隐藏刻度线  },  splitLine: { // 控制网格线  show: false // 隐藏网格线  },  axisLabel: { // 控制坐标轴标签  show: true, inside: true,interval: 0, //横轴信息全部显splitNumber: 50,textStyle: {color: '#585858',verticalAlign: 'bottom',fontSize: 13,align: 'left',padding: [0, 0, 15, -5]}} },  series: [  {  name: '数值',  type: 'bar',  stack: '总量',  barWidth: 15, // 条形的宽度  label: {  show: true,  position: 'right'  },  itemStyle: {  borderRadius: 4,// 设置颜色为线性渐变  color: function (params) {  var startIndex = params.dataIndex % 5; //var colors = [  ['#B4B4B4', '#FFFFFF'], // 第三种渐变色  ['#B4B4B4', '#FFFFFF'], // 第四种渐变色  ['#6C88FC', '#FFFFFF'], // 第四种渐变色  ['#FFB44D', '#FFFFFF'],  // 第二种渐变色  ['#FF4D4D', '#FFFFFF'], // 第一种渐变色  ];  var startColor = colors[startIndex][0];  var endColor = colors[startIndex][1];  return new echarts.graphic.LinearGradient(  1, 0, 0, 0, // 渐变方向从上到下  [  {offset: 0, color: startColor},  {offset: 1, color: endColor}  ],  false // 是否为对象模式,这里用数组模式  );  },  } ,data: [120, 200, 150, 80, 70]  }  ]  };  // 使用刚指定的配置项和数据显示图表。this.myChart .setOption(option);}

因为是在y轴名字在上方展示,看下面代码

 axisLabel: { // 控制坐标轴标签  show: true, inside: true,interval: 0, //横轴信息全部显splitNumber: 50,textStyle: {color: '#585858',verticalAlign: 'bottom',fontSize: 13,align: 'left',padding: [0, 0, 15, -5]}} 

关键字:echarts横向柱状图让Y轴的名字在柱状图上方展示

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: