当前位置: 首页 > 知识库问答 >
问题:

前端 - 求助echarts的刻度标签如何单独一行显示的问题?

燕实
2024-05-08

各位佬们,想问下echarts中如何让y轴的刻度标签单独一行显示?比如上面一行是XXX,下面就是对应的柱状图,如下图
设计稿

翻了半天echarts文档,只找到个inside属性好像有点用又好像没多少用,没法让axisLabel刻度标签偏移到上方,活动范围只能在柱状图的高度里面。而且刻度标签还会被柱状图给遮挡住,下面是我尝试的代码:

import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {  xAxis: {    type: 'value',    gridIndex: 0,    axisTick: {      show: false    },    axisLabel: {      show: false    },    axisLine: {      show: false    },    splitLine: {      show: false    }  },  yAxis: {    // type: 'value',    data: [      'Mon',      'Tue',      'Wed',      'Thu',      'Fri',      'Sat',      'Sun',      'Tue',      'Wed',      'Thu',      'Fri',      'Sat',      'Sun',      'Tue',      'Wed',      'Thu',      'Fri',      'Sat',      'Sun'    ],    axisLabel: {      inside: true,      z: 100,      // margin:200,      // backgroundColor:"#f66",      color: '#f66',      fontSize: 24      // height:55    },    axisTick: {      show: false    },    axisLine: {      show: false    }  },  series: [    {      data: [        120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130, 200, 150,        80, 70      ],      type: 'bar',      itemStyle: {        normal: {          color: {            type: 'linear',            x: 0,            y: 0,            x2: 1,            y2: 0,            colorStops: [              {                offset: 0.1,                color: '#0F89FF' // 10% 处的颜色              },              {                offset: 0.55,                color: '#31AEE9' // 55% 处的颜色              },              {                offset: 1,                color: '#00D5D9' // 100% 处的颜色              }            ],            global: false // 缺省为 false          },          label: {            show: true,            position: 'right',            backgroundColor: 'transparent',            textStyle: {              color: '#86909C',              fontSize: 16,              textBorderWidth: 1,              textShadowOffsetY: 1,              textShadowColor: '#000000',              textShadowBlur: 2            }          },          barBorderRadius: 3        }      }    }  ]};option && myChart.setOption(option);

代码对应的图表

共有3个答案

公冶谦
2024-05-08

你可以定义多个chartDom,每个只显示一条,文字样式也可以自定义

栾瑞
2024-05-08

https://www.isqqw.com/。可以在这里找找,很多案例

汪信鸥
2024-05-08

该方案已解决我的问题https://blog.csdn.net/orangeverity/article/details/107160849

 类似资料:
  • 问题内容: 我可以用 但这也会删除标签。我可以以任何方式绘制刻度标签,但不能绘制刻度和书脊 问题答案: 您可以使用(http://matplotlib.org/api/axes_api.html#matplotlib.axes.Axes.tick_params)将刻度长度设置为0 :

  • 问题内容: 我遇到了与此处报告的问题类似的问题。我不明白为什么刻度标签文本为空字符串: 输出: 我得到的结果相同,但是绘制的图在保存或显示时在x轴上显示了八个带标记的刻度。但是,如果我 在 显示图 后 要求标签,则该列表已正确填充。当然,现在要做任何更改都为时已晚。 输出: 为什么会发生这种情况(Mac OS X Yosemite,Matplotlib 1.5.1),以及 在 显示或保存绘图 之前

  • 这个a标签的高度为什么会高一点点?

  • 我试图在matplotlib中绘制多条线。 我已经习惯了标签功能,但它没有显示它。 这是我的密码。 这是我的照片:

  • 我需要移动轴中所有刻度线的标签(),使文本位于其自己的刻度线和下一个刻度线的中间。 我正在使用Roland的甘特图控件(经过一些修改)和Christian Schudt的DateAxis作为我的X轴。我的目标是根据Date值绘制甘特图(忽略时间;所有时间值都被截断)。 我的甘特图对每个任务都有一个“开始日期”和“结束日期”(即在图表上,它由一个条形图表示)。 考虑一下: 我有一个从2月1日开始的任

  • 我想沿x轴水平移动一些记号的标签,而不移动相应的记号。 更具体地说,当使用