echarts：柱状图的常用操作

最新推荐文章于 2025-05-19 11:17:04 发布

Lvan的前端笔记

最新推荐文章于 2025-05-19 11:17:04 发布

阅读量4.8k

点赞数 5

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_43972437/article/details/135776530

文章目录

背景

本文将带大家一步一步的熟悉柱状图相 API，关于如何初始化，可以看我这篇文章 echars：图表中核心的概念，本文只讲核心配置。

基础柱状图

这是一个最基础的柱状图

option = {
   
  xAxis: {
   
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
   
  },
  series: [
    {
   
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

在这里插入图片描述
接下来的示例都是以这个基础做改动

设置柱子的样式 series.itemStyle

option = {
   
  xAxis: {
   
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
   
  },
  series: [
    {
   
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
   
        // 柱子的背景颜色
        color: '#60D87E',
        // 柱子的 border-radius
        barBorderRadius: [15, 15, 0, 0],
      },
      // 设置柱子的默认宽度,可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度。
      barWidth: '50%',
      // 柱条最小高度，可用于防止某数据项的值过小而影响交互。
      barMinHeight: 30,
      // 设置柱子的最大宽度
      // barMaxWidth: 40,
    }
  ]
};

在这里插入图片描述

添加标签（柱子上的数字）series.label

option = {
   
  xAxis: {
   
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [