ECharts柱状图常见效果

原创已于 2022-05-18 22:10:04 修改 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

于 2022-05-06 22:10:22 首次发布

ECharts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Echarts创建各类柱状图，包括基础样式、最大值、最小值、平均值标注，以及横向条形、边框、排名、背景色、混合折线与堆叠、高亮等功能，并提供了详细的配置代码示例。

基础

效果图：
在这里插入图片描述
配置项：

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

最大值、最小值、平均值

效果图：
在这里插入图片描述
配置项：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      },
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      }
    }
  ]
}

条形：横向

效果图：
在这里插入图片描述
配置项：

// 横轴为数值轴纵轴为类目轴即可
option = {
  xAxis: {
    type: 'value',
    axisLine: {
      show: true,
      symbol: ['none', 'arrow']
    }
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: 20,
      markPoint: {
        itemStyle: {
          color: '#a90000'
        },
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      },
      markLine: {
        itemStyle: {
          color: '#a90000'
        },
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      }
    }
  ]
}

条形、边框、排名

效果图：
在这里插入图片描述
配置项：

const colorList = ['#367BEB', '#FD837A', '#63C4EB', '#FEB64A', '#9773FD']
const option = {
  xAxis: {
    type: 'value',
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'category',
      inverse: true, // 反向坐标系
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      },
      data: ['Tue', 'Fri', 'Wed', 'Thu', 'Mon', 'Sat', 'Sun']
    }, {
      inverse: true, // 反向坐标系
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      },
      data: [1, 2, 3, 4, 5, 6, 7]
    }
  ],
  series: [
    {
      type: 'bar',
      name: '柱',
      yAxisIndex: 0, // 层级关系
      label: {
        show: true,
        color: '#fff',
        formatter: '{c}%'
      },
      barWidth: 10,
      itemStyle: {
        color: function (params) {
          const num = colorList.length
          return colorList[params.dataIndex % num]
        },
        borderRadius: 5
      },
      data: [100, 75, 65, 60, 55, 40, 35],
    },
    {
      type: 'bar',
      name: '框',
      yAxisIndex: 1, // 层级关系
      barWidth: 20,
      itemStyle: {
        color: 'none', // 图形无颜色
        borderColor: '#00c1de', // 边框颜色
        borderWidth: 3,
        borderRadius: 5
      },
      data: [100, 100, 100, 100, 100, 100, 100]
    }
  ]
}

背景色

效果图：
在这里插入图片描述
配置项：

option = {
 xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}

折柱混合

效果图：
在这里插入图片描述
配置项：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      type: 'line',
      data: [130, 220, 155, 90, 79, 120, 150]
    }
  ]
}

堆叠、高亮

效果图：
在这里插入图片描述
高亮效果图：

配置项：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Fir',
      type: 'bar',
      stack: 'all',
      emphasis: {
        focus: 'series'
      },
      data: [120, 200, 150, 80, 70, 110, 130],
    },
    {
      name: 'Sec',
      type: 'bar',
      stack: 'all',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
  ]
}