vue/js - 关于 echarts - 柱状图的使用_vue echars柱状图概率不展开-CSDN博客

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/127727730

本文总结了在vue项目中使用echarts绘制柱状图的步骤和注意事项，包括如何避免横坐标文本间隔显示及设置显示全部横坐标的方法。通过设置xAxis.axisLabel.interval为0，可确保所有横坐标文本都可见。示例代码展示了在vue中应用echarts的基本配置。

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

近期，在做项目的时候有涉及到柱状图的模块，所以在这里简单总结一下，有需要的朋友们可自行参考。说到柱状图这种图形模块，我们很自然的就想到了echarts 插件了，里面有格式各样的图形效果，可供我们使用。
echarts文档地址：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

一、实现效果：

柱状图

二、注意点

这里值得注意一点：当我们直接复制 echarts 里面的代码的时候，实现出来的效果是这样的，当横坐标的项很多的时候，会自动识别为双数的时候不显示横坐标文本，如下在这里插入图片描述
但是我们大多时候需要的是让它们都显示出来，这时候我们就需要在 xAxis 下面的 axisLabel 里面加上 interval: 0 ，即：

xAxis: [
    {
   
   
      type: "category",
      axisLabel: {
   
   
        interval: 0 // 让横坐标每一项都显示
      },
    },
  ]

在这里插入图片描述
如果柱状图的横坐标只需要显示一条的话，只需要设置series 为一项就可以了，如下

 series: [
    {
   
   
      name: "总数",
      type: "bar",
      barGap: 0,
      barWidth: 16,
      color: ["#589EFF"],
      tooltip: {
   
   
        valueFormatter: function(value) {
   
   
          return value;
        },
      },
      data: [320, 332, 301, 334, 390, 220, 182, 191, 234, 290, 220, 182],
    }
 ]
// 或者
 series: {
   
   
    name: "总数",
    type: "bar",
    barGap: 0,
    barWidth: 16,
    color: ["#589EFF"],
    tooltip: {
   
   
      valueFormatter: function(value)