echarts横向柱状图

最新推荐文章于 2024-11-11 19:03:47 发布

xxxxxxx丶

最新推荐文章于 2024-11-11 19:03:47 发布

阅读量1.3k

点赞数

分类专栏：可视化数据文章标签： echarts 前端 javascript vue

本文链接：https://blog.youkuaiyun.com/m0_37394102/article/details/126401629

版权

可视化数据专栏收录该内容

3 篇文章

订阅专栏

这段博客详细介绍了如何使用ECharts库配置图表，实现类目轴的左对齐和数据的右对齐效果。通过设置grid、xAxis和yAxis的属性，包括inverse、axisLabel、margin、barWidth等，以及系列的barMaxWidth、barMinWidth和label的位置，创建了一个美观的柱状图，展示了不同类目的数据分布情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类目左对齐数据右对齐，上图

代码仅供参考

option = {
          grid: {
            top: '10px',
            left: '120px',
            bottom:'30px',
          },
          xAxis: {
            show: false
          },
          yAxis: {
            type: 'category',
            inverse: true, // 倒叙
            axisLabel: {
              margin:100,
              align: 'left',
              formatter: (val) => {
                return `${val}`;
              }
            },
            axisLine: {
              show: false // 轴线
            },
            axisTick: {
              show: false // 刻度线
            },
            data:['栏目1','栏目2','栏目3','栏目4','栏目5','栏目6','栏目7','栏目8','栏目9','栏目10',]
          },
          series: [
            {
              type: 'bar',
              showBackground: true,
              barWidth: 10,
              barMaxWidth: 20,
              barMinWidth: 5,
              
              label:{
                show:true,
                position:'left',
                offset:[680,0],
                color: '#000'
                // distance: -22
              },
              itemStyle: {
                color: 'rgba(71, 177, 255, 1)',
                barBorderRadius: [0, 5, 5, 0]
              },
              data: [100, 200, 300, 400, 500,100, 200, 300, 400, 500]
            }
          ]
        };